Add persistent dark theme toggle
This commit is contained in:
@@ -21,6 +21,10 @@
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
@@ -142,4 +146,42 @@
|
||||
.product-panel { @apply pt-0; }
|
||||
.table-wrap { @apply max-h-[70vh]; }
|
||||
}
|
||||
|
||||
html.dark body { @apply bg-slate-950 text-slate-100; }
|
||||
html.dark .control-panel { @apply bg-slate-950; }
|
||||
html.dark .product-panel { @apply bg-slate-800; }
|
||||
html.dark .data-panel { @apply bg-slate-950; }
|
||||
html.dark .field-label { @apply border-slate-700 bg-slate-800 text-slate-200; }
|
||||
html.dark .field-value { @apply border-slate-700 bg-slate-900 text-slate-100; }
|
||||
html.dark .variant-table th { @apply border-slate-700 bg-slate-800 text-slate-100; }
|
||||
html.dark .variant-table td { @apply border-slate-700 bg-slate-900 text-slate-200; }
|
||||
html.dark .variant-table tr:nth-child(even) td { @apply bg-slate-800; }
|
||||
html.dark .variant-table tr:hover td { @apply bg-slate-700; }
|
||||
html.dark .arrow-button,
|
||||
html.dark .action-button,
|
||||
html.dark .input-like { @apply border-slate-600 bg-slate-800 text-slate-100; }
|
||||
html.dark .arrow-button:hover:not(:disabled),
|
||||
html.dark .action-button:hover:not(:disabled) { @apply border-slate-400 bg-slate-700; }
|
||||
html.dark #scanInput { @apply bg-slate-700 placeholder:text-slate-400; }
|
||||
html.dark .settings-dialog,
|
||||
html.dark .suggested-dialog,
|
||||
html.dark .source-dialog { @apply border-slate-700 bg-slate-900; }
|
||||
html.dark .suggested-header { @apply border-slate-700 bg-slate-800; }
|
||||
html.dark .suggested-header h2,
|
||||
html.dark .settings-group legend,
|
||||
html.dark .settings-option,
|
||||
html.dark .settings-field { @apply text-slate-100; }
|
||||
html.dark .settings-group { @apply border-slate-700; }
|
||||
html.dark .settings-field input { @apply border-slate-600 bg-slate-800 text-slate-100; }
|
||||
html.dark .modal-close,
|
||||
html.dark .settings-test-button,
|
||||
html.dark .suggested-pick,
|
||||
html.dark .source-row-action,
|
||||
html.dark .source-picture-action { @apply border-slate-600 bg-slate-800 text-slate-100 hover:bg-slate-700; }
|
||||
html.dark .source-section { @apply border-slate-700; }
|
||||
html.dark .source-section-header { @apply border-slate-700 bg-slate-800 text-slate-100; }
|
||||
html.dark .source-row { @apply border-slate-700 bg-slate-900 text-slate-100 hover:bg-slate-800; }
|
||||
html.dark .suggested-row,
|
||||
html.dark .picture-candidate { @apply border-slate-700; }
|
||||
html.dark .suggested-row:nth-child(even) { @apply bg-slate-800; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user