diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts index db1cd7c394..f27ded8685 100644 --- a/src/client/app/common/scripts/theme.ts +++ b/src/client/app/common/scripts/theme.ts @@ -43,12 +43,13 @@ function compile(theme: Theme): { [key: string]: string } { if (code[0] == ':') { const parts = code.split('<'); const func = parts.shift().substr(1); - const arg = parseInt(parts.shift(), 10); + const arg = parseFloat(parts.shift()); const color = getColor(parts.join('<')); switch (func) { case 'darken': return color.darken(arg); case 'lighten': return color.lighten(arg); + case 'alpha': return color.setAlpha(arg); } } diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index e95e7a735d..4d839f1dc9 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -486,9 +486,7 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> - - -root(isDark) +.mk-settings display flex width 100% height 100% @@ -499,13 +497,13 @@ root(isDark) height 100% padding 16px 0 0 0 overflow auto - border-right solid 1px isDark ? #1c2023 : #ddd + border-right solid 1px var(--faceDivider) > p display block padding 10px 16px margin 0 - color isDark ? #9aa2a7 : #666 + color var(--desktopSettingsNavItem) cursor pointer user-select none transition margin-left 0.2s ease @@ -514,7 +512,7 @@ root(isDark) margin-right 4px &:hover - color isDark ? #fff : #555 + color var(--desktopSettingsNavItemHover) &.active margin-left 8px @@ -528,14 +526,13 @@ root(isDark) > section margin 32px - color isDark ? #c4ccd2 : #4a535a + color var(--text) > h1 margin 0 0 1em 0 padding 0 0 8px 0 font-size 1em - color isDark ? #e3e7ea : #555 - border-bottom solid 1px isDark ? #1c2023 : #eee + border-bottom solid 1px var(--faceDivider) &, >>> * .ui.button.block @@ -548,18 +545,12 @@ root(isDark) margin 0 0 1em 0 padding 0 0 8px 0 font-size 1em - color isDark ? #e3e7ea : #555 - border-bottom solid 1px isDark ? #1c2023 : #eee + color var(--text) + border-bottom solid 1px var(--faceDivider) > .web > .div - border-bottom solid 1px isDark ? #1c2023 : #eee + border-bottom solid 1px var(--faceDivider) margin 16px 0 -.mk-settings[data-darkmode] - root(true) - -.mk-settings:not([data-darkmode]) - root(false) - </style> diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json index 7a9a06187f..8962235f2f 100644 --- a/src/client/theme/dark.json +++ b/src/client/theme/dark.json @@ -5,12 +5,14 @@ "author": "syuilo", "vars": { "primary": "#fb4e4e", - "secondary": "#282C37" + "secondary": "#282C37", + "text": "#d0e0ea" } }, "primary": "$primary", "primaryForeground": "#fff", "bg": ":darken<8<$secondary", + "text": "$text", "scrollbarTrack": "#282c37", "scrollbarHandle": "#454954", "scrollbarHandleHover": "#535660", @@ -99,6 +101,9 @@ "desktopTimelineSrc": "@faceTextButton", "desktopTimelineSrcHover": "@faceTextButtonHover", "desktopWindowTitle": "@faceHeaderText", + "desktopSettingsNavItem": ":alpha<0.8<$text", + "desktopSettingsNavItemHover": ":lighten<10<$text", + "mobileSignedInAsBg": "#273c34", "mobileSignedInAsFg": "#49ab63", "mobileSignoutBg": "#652222", diff --git a/src/client/theme/light.json b/src/client/theme/light.json index ca0dad0718..11b001ceb1 100644 --- a/src/client/theme/light.json +++ b/src/client/theme/light.json @@ -5,12 +5,14 @@ "author": "syuilo", "vars": { "primary": "#fb4e4e", - "secondary": "#fff" + "secondary": "#fff", + "text": "#666" } }, "primary": "$primary", "primaryForeground": "#fff", "bg": ":darken<8<$secondary", + "text": "$text", "scrollbarTrack": "#fff", "scrollbarHandle": "#00000033", "scrollbarHandleHover": "#00000066", @@ -99,6 +101,9 @@ "desktopTimelineSrc": "#6f7477", "desktopTimelineSrcHover": "#525a5f", "desktopWindowTitle": "#666", + "desktopSettingsNavItem": ":alpha<0.8<$text", + "desktopSettingsNavItemHover": ":darken<10<$text", + "mobileSignedInAsBg": "#fcfff5", "mobileSignedInAsFg": "#2c662d", "mobileSignoutBg": "#fff6f5",