From c7286194f897194e4d01cf639f40dc7a532c4e6d Mon Sep 17 00:00:00 2001 From: Tom Najdek Date: Mon, 16 Oct 2023 13:40:59 +0200 Subject: [PATCH] Convert theme to css variables * Opt-in for light and dark color schemes * Convert scss variables in _light.scss to css variables * Add _dark.scss for dark color scheme * Remove unused, theme-related variables --- chrome/skin/default/zotero/overlay.css | 3 +- scss/_zotero.scss | 11 +- scss/components/_clicky.scss | 2 +- scss/components/_longTagFixer.scss | 4 +- scss/components/_mainWindow.scss | 8 +- scss/components/_notesList.scss | 24 +-- scss/components/_rtfScan.scss | 5 +- scss/components/_tabBar.scss | 50 ++--- scss/components/_tagSelector.scss | 7 +- scss/components/_textLink.scss | 2 +- scss/components/_virtualized-table.scss | 6 +- scss/elements/_attachmentBox.scss | 2 +- scss/elements/_itemBox.scss | 2 +- scss/elements/_noteEditor.scss | 2 +- scss/elements/_styleConfigurator.scss | 7 +- scss/mac/_tag-selector.scss | 2 +- scss/themes/_dark.scss | 63 ++++++ scss/themes/_light.scss | 246 ++++++------------------ 18 files changed, 189 insertions(+), 257 deletions(-) create mode 100644 scss/themes/_dark.scss diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css index 5a78cd434e..910abfd403 100644 --- a/chrome/skin/default/zotero/overlay.css +++ b/chrome/skin/default/zotero/overlay.css @@ -602,7 +602,8 @@ z-index: 2; left: 0; right: 0; - background-color: #ececec; + color: var(--fill-primary); + background-color: var(--material-background); position: fixed; height: 100%; display: flex; diff --git a/scss/_zotero.scss b/scss/_zotero.scss index c41156dbf4..513cde52a6 100644 --- a/scss/_zotero.scss +++ b/scss/_zotero.scss @@ -1,8 +1,3 @@ -// -// Zotero React Client -// -------------------------------------------------- - - // Abstracts // -------------------------------------------------- @@ -13,10 +8,12 @@ @import "abstracts/utilities"; @import "abstracts/split-button"; -// Theme -// -------------------------------------------------- +:root { + color-scheme: light dark; +} @import "themes/light"; +@import "themes/dark"; // Components // -------------------------------------------------- diff --git a/scss/components/_clicky.scss b/scss/components/_clicky.scss index cf68ae6037..5defb52b01 100644 --- a/scss/components/_clicky.scss +++ b/scss/components/_clicky.scss @@ -1,6 +1,6 @@ .zotero-clicky { border-radius: 6px; - border: 1px solid transparent; + border: var(--material-border-transparent); } /* Minus and plus buttons with clicky glow effect */ diff --git a/scss/components/_longTagFixer.scss b/scss/components/_longTagFixer.scss index df0e01e17a..228b96ae54 100644 --- a/scss/components/_longTagFixer.scss +++ b/scss/components/_longTagFixer.scss @@ -38,7 +38,7 @@ height: 50px; border: none; padding: .5em; - background-color: $shade-1; + background: var(--material-background50); appearance: none; outline: none; } @@ -102,7 +102,7 @@ } .invalid { - color: $red; + color: var(--accent-red); } #zotero-new-tag-character-count { diff --git a/scss/components/_mainWindow.scss b/scss/components/_mainWindow.scss index 6a4c01f219..7ea1416bf7 100644 --- a/scss/components/_mainWindow.scss +++ b/scss/components/_mainWindow.scss @@ -127,16 +127,16 @@ } #tab-bar-container .tab { - background: $transparent; + background: transparent; } #tab-bar-container .tab.selected { - background: $toolbar-background-color; + background: var(--material-tabbar) } #zotero-toolbar { -moz-appearance: none; - background: $toolbar-background-color; - border-bottom: $toolbar-border; + background: var(--material-tabbar); + border-bottom: var(--material-panedivider); } } \ No newline at end of file diff --git a/scss/components/_notesList.scss b/scss/components/_notesList.scss index 1269ed78bc..780161a519 100644 --- a/scss/components/_notesList.scss +++ b/scss/components/_notesList.scss @@ -3,8 +3,8 @@ width: 100%; overflow-y: auto; flex-grow: 1; - background: #d2d8e2; - border-top: 1px solid lightgray; + background: var(--material-sidepane); + border-top: var(--material-border); } .notes-list { @@ -47,13 +47,13 @@ } .note-row { - border: 1px solid #bcc4d2; + border: 1px solid var(--fill-quinary); border-radius: 5px; margin: 4px 7px; - background-color: #fff; + background: var(--material-background); &:active { - background: #eef1f8; + background: var(--accent-blue-50); } .inner { @@ -64,7 +64,8 @@ .parent-line { display: flex; width: calc(100% - 16px); - border-bottom: 1px solid #d7dad7; + color: var(--fill-secondary); + border-bottom: 1px solid var(--fill-quinary); align-items: center; padding: 5px 8px 4px; margin-bottom: 5px; @@ -102,7 +103,7 @@ padding: 0 8px 6px; .date { - color: $shade-6; + color: var(--fill-primary); } .body { @@ -112,22 +113,23 @@ overflow: hidden; text-overflow: ellipsis; margin-left: 10px; - color: $shade-6; + color: var(--fill-primary); } } } } .more-row { - border: 1px solid #bcc4d2; + color: var(--fill-primary); + border: 1px solid var(--fill-quinary); border-radius: 5px; margin: 4px 7px; - background-color: white; + background: var(--material-background); text-align: center; padding: 5px; &:active { - background: #eef1f8; + background-color: var(--accent-blue-50); } } diff --git a/scss/components/_rtfScan.scss b/scss/components/_rtfScan.scss index ff66ffa835..ba66bac520 100644 --- a/scss/components/_rtfScan.scss +++ b/scss/components/_rtfScan.scss @@ -33,9 +33,6 @@ } .file-input-container { - background-color: $input-group-background-color; - border-radius: $border-radius-base; - border: 1px solid $input-group-border-color; display: flex; margin: auto $space-min auto; padding: .5em; @@ -69,7 +66,7 @@ >div { display: flex; flex: 1 0 auto; - background-color: -moz-field; + background: var(--material-background70); overflow: hidden; position: relative; } diff --git a/scss/components/_tabBar.scss b/scss/components/_tabBar.scss index 0ce980e84e..3b60ca0c1a 100644 --- a/scss/components/_tabBar.scss +++ b/scss/components/_tabBar.scss @@ -2,6 +2,7 @@ // These variables can be overridden in platform styles to set platform-specific safe areas --safe-area-start: 0; --safe-area-end: 0; + --tab-border: .5px solid var(--tab-border); min-height: 30px; @@ -14,14 +15,14 @@ content: ''; min-width: var(--safe-area-start); // Add bottom border to safe area space - border-bottom: $tab-border; + border-bottom: var(--tab-border); } &::after { content: ''; min-width: var(--safe-area-end); // Add bottom border to safe area space - border-bottom: $tab-border; + border-bottom: var(--tab-border); } & > div { @@ -42,12 +43,12 @@ padding: 0 3px; align-items: center; z-index: 1; - color: #bebebe; + color: var(--fill-tertiary); display: none; box-shadow: none; // Add bottom border to scroll arrows, // and negate the extra vertical pixel added by the border with a negative margin - border-bottom: $tab-border; + border-bottom: var(--tab-border); margin-bottom: -1px; box-sizing: border-box; @@ -56,26 +57,26 @@ } &.active { - color: #505050; + color: var(--fill-secondary); &:hover { - background-color: rgba(0, 0, 0, 0.08); + background-color: var(--fill-quinary); } } } .scroll-start-arrow { - border-right: 1px solid transparent; + border-right: var(--material-border-transparent); &.active { - border-right: 1px solid rgba(0, 0, 0, 0.2); - box-shadow: 1px 0 0 0 rgba(0,0,0,0.05); + border-right: var(--material-panedivider); + box-shadow: 3px 0 3px -3px rgba(0, 0, 0, .3); } } .scroll-end-arrow { - border-left: 1px solid transparent; + border-left: var(--material-border-transparent); &.active { - border-left: 1px solid rgba(0, 0, 0, 0.2); - box-shadow: -1px 0 0 0 rgba(0,0,0,0.05); + border-left: var(--material-panedivider); + box-shadow: -3px 0 3px -3px rgba(0, 0, 0, .3) } } @@ -112,7 +113,7 @@ content: ""; width: 0; min-width: 0; - border-inline-end: $tab-border; + border-inline-end: var(--tab-border); } &:after { @@ -121,8 +122,8 @@ width: 100%; min-width: 0; // Add bottom border to the space between the last tab and the spacer in #tab-bar-container::after - border-bottom: $tab-border; - border-inline-start: $tab-border; + border-bottom: var(--tab-border); + border-inline-start: var(--tab-border); } } @@ -134,28 +135,27 @@ height: 30px; line-height: 30px; position: relative; - background: #f9f9f9; - border-top: 2px solid transparent; - color: #000; + color: var(--fill-primary); text-align: center; padding: 0 22px; min-width: 110px; &:not(:last-child) { - border-inline-end: $tab-border; + border-inline-end: var(--tab-border); } &.selected { - border-top: 2px solid $tab-background-color-selected; + background: var(--material-button); + box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.05), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.30); } &.dragging { - border-inline-start: $tab-border; + border-inline-start: var(--tab-border); z-index: 1; } &.dragging + & { - border-inline-start: $tab-border; + border-inline-start: var(--tab-border); } .tab-name { @@ -197,11 +197,11 @@ } &:hover { - background-color: rgba(0, 0, 0, 0.08); + background-color: var(--fill-quinary); } &:active { - background-color: rgba(0, 0, 0, 0.16); + background-color: var(--fill-quarternary); } } @@ -210,6 +210,6 @@ } &:not(.selected) { - border-bottom: $tab-border; + border-bottom: var(--tab-border); } } diff --git a/scss/components/_tagSelector.scss b/scss/components/_tagSelector.scss index e0601c6968..9d3c86f827 100644 --- a/scss/components/_tagSelector.scss +++ b/scss/components/_tagSelector.scss @@ -28,7 +28,7 @@ display: flex; overflow: hidden; height: 100px; - background-color: $tag-selector-bg; + background: var(--material-sidepane); } .tag-selector-list-container > div { @@ -75,7 +75,6 @@ text-overflow: ellipsis; white-space: pre; padding: 1px 4px 3px; // See also TagSelectorList.jsx - background-color: $tag-selector-bg; &.colored { font-weight: bold; @@ -87,7 +86,7 @@ } &.dragged-over { - color: $shade-0; - background: $shade-6; + color: var(--color-background); + background-color: var(--fill-secondary); } } diff --git a/scss/components/_textLink.scss b/scss/components/_textLink.scss index 30555e2364..39ba2263aa 100644 --- a/scss/components/_textLink.scss +++ b/scss/components/_textLink.scss @@ -2,6 +2,6 @@ -moz-user-focus: normal; color: -moz-nativehyperlinktext; text-decoration: underline; - border: 1px solid transparent; + border: var(--material-border-transparent); cursor: pointer; } diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss index e64b765a94..bb1a45e2b8 100644 --- a/scss/components/_virtualized-table.scss +++ b/scss/components/_virtualized-table.scss @@ -96,8 +96,8 @@ box-sizing: border-box; &.drop { - color: $shade-0 !important; - background: $shade-5 !important; + color: var(--material-background) !important; + background: var(--fill-secondary) !important; * { pointer-events: none !important; @@ -108,7 +108,7 @@ position: absolute; width: 20%; height: 1px; - background-color: $shade-5; + background-color: var(--fill-secondary); pointer-events: none; } diff --git a/scss/elements/_attachmentBox.scss b/scss/elements/_attachmentBox.scss index 1867f8b225..3a557a47e4 100644 --- a/scss/elements/_attachmentBox.scss +++ b/scss/elements/_attachmentBox.scss @@ -47,7 +47,7 @@ attachment-box { -moz-margin-end: 5px !important; padding: 0 2px 0 2px !important; border-radius: 6px; - border: 1px solid transparent; + border: var(--material-border-transparent); } td > hbox { diff --git a/scss/elements/_itemBox.scss b/scss/elements/_itemBox.scss index 43e9ea40af..10de38d055 100644 --- a/scss/elements/_itemBox.scss +++ b/scss/elements/_itemBox.scss @@ -101,7 +101,7 @@ item-box { } #item-type-menu:not(:hover):not(:active) { - border: 1px solid transparent; + border: var(--material-border-transparent); background-color: transparent; } diff --git a/scss/elements/_noteEditor.scss b/scss/elements/_noteEditor.scss index 9858d098fd..313b8c47f9 100644 --- a/scss/elements/_noteEditor.scss +++ b/scss/elements/_noteEditor.scss @@ -14,7 +14,7 @@ text-align: right; font-weight: bold; min-width: 62px; - border: 1px solid transparent; + border: var(--material-border-transparent); } .value { diff --git a/scss/elements/_styleConfigurator.scss b/scss/elements/_styleConfigurator.scss index 8f84973131..1d57e6ce39 100644 --- a/scss/elements/_styleConfigurator.scss +++ b/scss/elements/_styleConfigurator.scss @@ -25,15 +25,12 @@ style-configurator { .locale-selector-wrapper, .style-selector-wrapper, .display-as-wrapper { - background-color: var(--style-configurator-field-wrapper-background-color, $input-group-background-color); - border-radius: var(--style-configurator-field-wrapper-border-radius, $border-radius-base); - border: var(--style-configurator-field-wrapper-border, 1px solid $input-group-border-color); - margin: var(--style-configurator-field-margin, 1.5em 0 0 0); + margin: var(--style-configurator-field-margin, .5em 0 0 0); padding: var(--style-configurator-field-padding, $space-xs); } label[for="style-selector"] { - margin: var(--style-configurator-label-margin, 1.5em 0 0 0); + margin: var(--style-configurator-label-margin, .5em 0 0 0); font-size: var(--style-configurator-label-font-size, 13px); } diff --git a/scss/mac/_tag-selector.scss b/scss/mac/_tag-selector.scss index ae5f72e951..491d4d8a7a 100644 --- a/scss/mac/_tag-selector.scss +++ b/scss/mac/_tag-selector.scss @@ -4,7 +4,7 @@ .tag-selector-filter-container { padding: 0.25em 0 0.25em 0.5em; - border-top: 1px solid $shade-3; + border-top: var(--material-panedivider); } .tag-selector-item { diff --git a/scss/themes/_dark.scss b/scss/themes/_dark.scss new file mode 100644 index 0000000000..b59bc77193 --- /dev/null +++ b/scss/themes/_dark.scss @@ -0,0 +1,63 @@ +@media (prefers-color-scheme: dark) { + :root { + --accent-blue: #4072e5; + --accent-blue10: #4072e54d; + --accent-blue30: #4072e573; + --accent-blue50: #4072e599; + --accent-gold: #cc9200d9; + --accent-green: #39bf68d9; + --accent-orange: #ff794cd9; + --accent-red: #db2c3ae5; + --accent-teal: #59adc4e5; + --accent-white: #fff; + --accent-wood-dark: #996b6f; + --accent-wood: #cc7a52e5; + --accent-yellow: #faa700cc; + --fill-primary: #ffffffe5; + --fill-secondary: #ffffff8c; + --fill-tertiary: #ffffff4d; + --fill-quarternary: #ffffff1f; + --fill-quinary: #ffffff0f; + --fill-senary: #ffffff08; + --color-background: #1e1e1e; + --color-background50: #1e1e1e80; + --color-background70: #1e1e1eb2; + --color-border: #ffffff2e; + --color-border50: #ffffff17; + --color-button: #404040; + --color-control: #ccc; + --color-menu: #28282894; + --color-panedivider: #404040; + --color-sidepane: #303030; + --color-tabbar: #1e1e1e; + --color-toolbar: #272727; + --tag-blue: #55a6dfd9; + --tag-gray: #aaac; + --tag-green: #74b04ad9; + --tag-indigo: #5b6dd2; + --tag-magenta: #d675e7d9; + --tag-orange: #e59c4ccc; + --tag-plum: #9b5579; + --tag-purple: #9e8bdfe5; + --tag-red: #ed706be5; + --tag-teal: #439781; + --tag-yellow: #f8d648bf; + + // background materials + --material-background: var(--color-background); + --material-background50: var(--color-background50); + --material-background70: var(--color-background70); + --material-button: var(--color-button); + --material-control: var(--color-control); + --material-menu: var(--color-menu); + --material-sidepane: var(--color-sidepane); + --material-tabbar: var(--color-tabbar); + --material-toolbar: var(--color-toolbar); + + // border materials + --material-border-transparent: 1px solid transparent; + --material-border: 1px solid var(--color-border); + --material-border50: 1px solid var(--color-border50); + --material-panedivider: 1px solid var(--color-panedivider); + } +} \ No newline at end of file diff --git a/scss/themes/_light.scss b/scss/themes/_light.scss index 6476edac22..630ec844ca 100644 --- a/scss/themes/_light.scss +++ b/scss/themes/_light.scss @@ -1,187 +1,63 @@ -// -// Light theme -// -------------------------------------------------- +@media (prefers-color-scheme: light) { + :root { + --accent-blue: #4072e5; + --accent-blue10: #4072e51a; + --accent-blue30: #4072e54d; + --accent-blue50: #4072e580; + --accent-gold: #cc9200; + --accent-green: #39bf68; + --accent-orange: #ff794c; + --accent-red: #db2c3a; + --accent-teal: #59adc4; + --accent-white: #fff; + --accent-wood-dark: #996b6f; + --accent-wood: #cc7a52; + --accent-yellow: #faa700; + --fill-primary: #000000d9; + --fill-secondary: #00000080; + --fill-tertiary: #00000040; + --fill-quarternary: #0000001a; + --fill-quinary: #0000000d; + --fill-senary: #00000005; + --color-background: #fff; + --color-background50: #ffffff80; + --color-background70: #ffffffb2; + --color-border: #00000026; + --color-border50: #00000014; + --color-button: #fff; + --color-control: #fff; + --color-menu: #f6f6f6b8; + --color-panedivider: #dadada; + --color-sidepane: #f2f2f2; + --color-tabbar: #f2f2f2; + --color-toolbar: #f9f9f9; + --tag-blue: #55a6df; + --tag-gray: #aaa; + --tag-green: #74b04a; + --tag-indigo: #5b6dd2; + --tag-magenta: #d675e7; + --tag-orange: #e59c4c; + --tag-plum: #9b5579; + --tag-purple: #9e8bdf; + --tag-red: #ed706b; + --tag-teal: #439781; + --tag-yellow: #f8d648; + // background materials + --material-background: var(--color-background); + --material-background50: var(--color-background50); + --material-background70: var(--color-background70); + --material-button: var(--color-button); + --material-control: var(--color-control); + --material-menu: var(--color-menu); + --material-sidepane: var(--color-sidepane); + --material-tabbar: var(--color-tabbar); + --material-toolbar: var(--color-toolbar); -// Colors -// -------------------------------------------------- - -$red: #cc2936; -$blue: rgb(89, 139, 236); -$asphalt: #7a8799; -$asphalt-light: #dadee3; - -$primary: $red; -$secondary: $blue; - -$blue-dark: #333c66; -$blue-darkest: #3d4466; - -$transparent: transparent; - - -// Grays -// -------------------------------------------------- - -$shade-0: #fff; -$shade-1: #f6f6f6; -$shade-2: #e6e6e6; -$shade-3: #ddd; -$shade-4: #ccc; -$shade-5: #bbb; -$shade-6: #777; -$shade-7: #555; -$shade-8: #444; -$shade-9: #222; -$shade-10: #000; - - -// Scaffolding -// -------------------------------------------------- - -$body-bg: $shade-0; -$text-color: $shade-9; - -$headings-color: $shade-8; - -$link-color: $blue; -$link-hover-color: $blue; - -$focus-color: $secondary; - - -// Typography -// -------------------------------------------------- - -$text-selection-color: inherit; -$text-selection-bg: rgba($secondary, 0.2); - -// Separator -$separator-color: $shade-3; - - -// Partials -// -------------------------------------------------- - -// Main -$main-bg: $shade-0; - -// Sidebar -$sidebar-bg: $shade-1; - -// Clicky -$clicky-hover-bg-color: rgb(187, 206, 241); -$clicky-active-bg-color: $secondary; -$clicky-border-radius: 6px; -$clicky-border-color: rgb(109, 149, 224); -$clicky-active-color: $shade-0; - - -// Components -// -------------------------------------------------- - -// Toolbar -$toolbar-background-color: #f6f6f6; -$toolbar-border-color: darkgray; -$toolbar-border: .5px solid $toolbar-border-color; - -// Tab bar -$tab-border: $toolbar-border; -$tab-background-color-selected: #678AC5; - -// Icon -$icon-color: $secondary; -$icon-active-color: $shade-9; - -// Collection tree -$collection-tree-headings-color: $shade-6; -$collection-tree-link-color: $shade-8; -$collection-tree-active-link-color: $shade-9; -$collection-tree-active-icon-color: $shade-7; -$collection-tree-active-link-bg: $shade-2; -$collection-tree-focus-color: $asphalt; -$collection-tree-icon-color: $shade-6; -$touch-collection-tree-active-link-color: $shade-0; -$touch-collection-tree-active-link-bg: $blue; -$touch-collection-tree-border: $shade-2; -$touch-collection-tree-separator: $body-bg; -$collection-tree-dnd-target-link-color: $shade-0; -$collection-tree-dnd-target-bg-color: $blue; -$collection-tree-dnd-target-icon-color: $shade-0; - -// Items -$items-bg: $shade-0; -$items-odd-bg: $shade-1; -$item-list-head-color: $shade-8; -$item-list-head-border: $shade-2; - -// Item list -$item-odd-bg: $shade-1; -$item-active-color: $shade-0; -$item-active-bg: $secondary; - -// Item details -$item-details-bg: $shade-1; -$info-view-color: $shade-5; - -// Panel -$panel-bg: $shade-1; -$panel-header-color: $shade-8; -$panel-header-shadow: rgba($shade-10, 0.08); - -// Tabs -$tabs-border-color: $shade-3; -$tab-active-color: $secondary; -$tab-inactive-color: $headings-color; - -// Metadata list -$key-color: $shade-6; -$editable-hover-bg: rgba($shade-10, 0.04); -$handle-color-touch: $shade-4; -$handle-color-mouse: $shade-6; -$metadata-heading-color: $shade-5; -$metadata-separator-color: $shade-3; - -// Button -$btn-primary-color: $shade-0; -$btn-primary-bg: $asphalt; -$btn-default-color: $text-color; -$btn-border: $shade-3; -$btn-default-bg: $shade-0; -$btn-default-active-color: rgba($btn-default-color, 0.5); - -// Forms -$input-color: $text-color; -$input-bg: $body-bg; -$input-border-color: $shade-3; -$input-focus-color: $secondary; -$placeholder-color: $shade-5; -$input-group-background-color: #e5e5e5; -$input-group-border-color: darken($input-group-background-color, 5%); - -// Editable -$editable-color: $text-color; -$editable-bg: $shade-0; -$editable-border-color: $secondary; - -// Menu (select, dropdown, …) -$menu-bg: $body-bg; -$menu-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.2); -$menu-item-hover-bg: $shade-1; -$menu-item-selected-bg: $shade-2; -$menu-devider: $shade-2; -$menu-no-results-color: $shade-5; - -// Drag layer -$creator-drag-preview-shadow: rgba($shade-10, 0.2); - -// Modal -$modal-backdrop-bg: rgba($shade-10, 0.4); -$modal-content-bg: $shade-1; -$modal-header-bg: $shade-0; -$modal-footer-border-width: 1px; -$modal-footer-border-color: $shade-2; -$modal-icon-spin-color: $shade-0; - -// Tag selector -$tag-selector-bg: -moz-field; \ No newline at end of file + // border materials + --material-border-transparent: 1px solid transparent; + --material-border: 1px solid var(--color-border); + --material-border50: 1px solid var(--color-border50); + --material-panedivider: 1px solid var(--color-panedivider); + } +} \ No newline at end of file