diff --git a/inline-script.js b/inline-script.js index fce50b6..c34b92e 100644 --- a/inline-script.js +++ b/inline-script.js @@ -2,8 +2,8 @@ // To allow CSP to work correctly, we also calculate a sha256 hash during // the build process and write it to inline-script-checksum.json. window.__themeColors = { - 'default': 'cybre', - cybre: '#1ea21e', + 'default': '#1ea21e', + royal: 'royalblue', scarlet: '#e04e41', seafoam: '#177380', hotpants: 'hotpink', @@ -18,7 +18,7 @@ window.__themeColors = { if (localStorage.store_currentInstance && localStorage.store_instanceThemes) { let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str) let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)] - if (theme && theme !== 'cybre') { + if (theme && theme !== 'default') { document.body.classList.add(`theme-${theme}`) let link = document.createElement('link') link.rel = 'stylesheet' diff --git a/routes/_static/themes.js b/routes/_static/themes.js index 6f10d38..f6760dc 100644 --- a/routes/_static/themes.js +++ b/routes/_static/themes.js @@ -1,10 +1,10 @@ const themes = [ { - name: 'cybre', + name: 'default', label: 'Cybre (default)' }, { - name: 'default', + name: 'royal', label: 'Royal' }, { diff --git a/scss/themes/_default.scss b/scss/themes/_default.scss index e36c9cd..5e7cf8e 100644 --- a/scss/themes/_default.scss +++ b/scss/themes/_default.scss @@ -1,17 +1,27 @@ -$main-theme-color: royalblue; -$body-bg-color: lighten($main-theme-color, 38%); -$anchor-color: $main-theme-color; -$main-text-color: #333; -$border-color: #dadada; -$main-bg-color: white; -$secondary-text-color: white; -$toast-border: #fafafa; -$toast-bg: #333; -$focus-outline: lighten($main-theme-color, 30%); -$compose-background: lighten($main-theme-color, 32%); +$main-theme-color: #2c2c2c; +$body-bg-color: #181818; +$main-bg-color: #222; +$anchor-color: lighten($main-theme-color, 20%); +$main-text-color: #fafaff; +$border-color: lighten($main-bg-color, 16%); +$secondary-text-color: #1ea21e; +$toast-border: $main-theme-color; +$toast-bg: lighten($body-bg-color, 4%); +$focus-outline: darken($main-theme-color, 10%); +$compose-background: darken($main-theme-color, 12%); @import "_base.scss"; +@import "_dark.scss"; body { @include baseTheme(); + @include darkTheme(); + + --anchor-text: #{$secondary-text-color}; + --settings-list-item-text: #{$main-text-color}; + --settings-list-item-text-hover: #{$main-text-color}; + + --action-button-fill-color-pressed: #{darken($secondary-text-color, 7%)}; + --action-button-fill-color-pressed-hover: #{darken($secondary-text-color, 2%)}; + --action-button-fill-color-pressed-active: #{darken($secondary-text-color, 15%)}; } diff --git a/scss/themes/cybre.scss b/scss/themes/cybre.scss deleted file mode 100644 index 02b1b2b..0000000 --- a/scss/themes/cybre.scss +++ /dev/null @@ -1,27 +0,0 @@ -$main-theme-color: #2c2c2c; -$body-bg-color: #181818; -$main-bg-color: #222; -$anchor-color: lighten($main-theme-color, 20%); -$main-text-color: #fafaff; -$border-color: lighten($main-bg-color, 16%); -$secondary-text-color: #1ea21e; -$toast-border: $main-theme-color; -$toast-bg: lighten($body-bg-color, 4%); -$focus-outline: darken($main-theme-color, 10%); -$compose-background: darken($main-theme-color, 12%); - -@import "_base.scss"; -@import "_dark.scss"; - -body.theme-cybre { - @include baseTheme(); - @include darkTheme(); - - --anchor-text: #{$secondary-text-color}; - --settings-list-item-text: #{$main-text-color}; - --settings-list-item-text-hover: #{$main-text-color}; - - --action-button-fill-color-pressed: #{darken($secondary-text-color, 7%)}; - --action-button-fill-color-pressed-hover: #{darken($secondary-text-color, 2%)}; - --action-button-fill-color-pressed-active: #{darken($secondary-text-color, 15%)}; -} diff --git a/scss/themes/royal.scss b/scss/themes/royal.scss new file mode 100644 index 0000000..e36c9cd --- /dev/null +++ b/scss/themes/royal.scss @@ -0,0 +1,17 @@ +$main-theme-color: royalblue; +$body-bg-color: lighten($main-theme-color, 38%); +$anchor-color: $main-theme-color; +$main-text-color: #333; +$border-color: #dadada; +$main-bg-color: white; +$secondary-text-color: white; +$toast-border: #fafafa; +$toast-bg: #333; +$focus-outline: lighten($main-theme-color, 30%); +$compose-background: lighten($main-theme-color, 32%); + +@import "_base.scss"; + +body { + @include baseTheme(); +}