nolanlawson/pinafore
1
0
Fork 0
forked from cybrespace/pinafore
Code Issues Pull requests Releases Wiki Activity

Make cybre theme the default, but actually

Browse source
This commit is contained in:
chr 2018-08-18 22:04:57 -07:00
parent 8149e270ea
commit 2234ed3144
5 changed files with 43 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
inline-script.js
View file

@ -2,8 +2,8 @@
// To allow CSP to work correctly, we also calculate a sha256 hash during // To allow CSP to work correctly, we also calculate a sha256 hash during
// the build process and write it to inline-script-checksum.json. // the build process and write it to inline-script-checksum.json.
window.__themeColors = { window.__themeColors = {
'default': 'cybre', 'default': '#1ea21e',
cybre: '#1ea21e', royal: 'royalblue',
scarlet: '#e04e41', scarlet: '#e04e41',
seafoam: '#177380', seafoam: '#177380',
hotpants: 'hotpink', hotpants: 'hotpink',
@ -18,7 +18,7 @@ window.__themeColors = {
if (localStorage.store_currentInstance && localStorage.store_instanceThemes) { if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {
let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str) let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str)
let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)] let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)]
if (theme && theme !== 'cybre') { if (theme && theme !== 'default') {
document.body.classList.add(`theme-${theme}`) document.body.classList.add(`theme-${theme}`)
let link = document.createElement('link') let link = document.createElement('link')
link.rel = 'stylesheet' link.rel = 'stylesheet'

4
routes/_static/themes.js
View file

@ -1,10 +1,10 @@
const themes = [ const themes = [
{ {
name: 'cybre', name: 'default',
label: 'Cybre (default)' label: 'Cybre (default)'
}, },
{ {
name: 'default', name: 'royal',
label: 'Royal' label: 'Royal'
}, },
{ {

32
scss/themes/_default.scss
View file

@ -1,17 +1,27 @@
$main-theme-color: royalblue; $main-theme-color: #2c2c2c;
$body-bg-color: lighten($main-theme-color, 38%); $body-bg-color: #181818;
$anchor-color: $main-theme-color; $main-bg-color: #222;
$main-text-color: #333; $anchor-color: lighten($main-theme-color, 20%);
$border-color: #dadada; $main-text-color: #fafaff;
$main-bg-color: white; $border-color: lighten($main-bg-color, 16%);
$secondary-text-color: white; $secondary-text-color: #1ea21e;
$toast-border: #fafafa; $toast-border: $main-theme-color;
$toast-bg: #333; $toast-bg: lighten($body-bg-color, 4%);
$focus-outline: lighten($main-theme-color, 30%); $focus-outline: darken($main-theme-color, 10%);
$compose-background: lighten($main-theme-color, 32%); $compose-background: darken($main-theme-color, 12%);
@import "_base.scss"; @import "_base.scss";
@import "_dark.scss";
body { body {
@include baseTheme(); @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%)};
} }

27
scss/themes/cybre.scss
View file

@ -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%)};
}

17
scss/themes/royal.scss Normal file
View file

@ -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();
}