0
0
This commit is contained in:
syuilo 2018-09-27 01:32:04 +09:00
parent 3cbdfcb43d
commit 0a64f638c6
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
10 changed files with 71 additions and 35 deletions

View File

@ -7,13 +7,15 @@ import Vue from 'vue';
import { url, lang } from './config'; import { url, lang } from './config';
import applyTheme from './common/scripts/theme'; import applyTheme from './common/scripts/theme';
const darkTheme = require('../theme/dark'); const darkTheme = require('../theme/dark');
const halloweenTheme = require('../theme/halloween');
export default Vue.extend({ export default Vue.extend({
computed: { computed: {
keymap(): any { keymap(): any {
return { return {
'h|slash': this.help, 'h|slash': this.help,
'd': this.dark 'd': this.dark,
'x': this.test
}; };
} }
}, },
@ -25,6 +27,10 @@ export default Vue.extend({
dark() { dark() {
applyTheme(darkTheme); applyTheme(darkTheme);
},
test() {
applyTheme(halloweenTheme);
} }
} }
}); });

View File

@ -1,6 +1,23 @@
import * as tinycolor from 'tinycolor2'; import * as tinycolor from 'tinycolor2';
const lightTheme = require('../../../theme/light');
const darkTheme = require('../../../theme/dark');
type Theme = {
meta: {
id: string;
name: string;
inherit: string;
};
} & {
[key: string]: string;
};
export default function(theme: Theme) {
if (theme.meta.inherit) {
const inherit = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.inherit);
theme = Object.assign({}, inherit, theme);
}
export default function(theme: { [key: string]: string }) {
const props = compile(theme); const props = compile(theme);
Object.entries(props).forEach(([k, v]) => { Object.entries(props).forEach(([k, v]) => {
@ -11,7 +28,7 @@ export default function(theme: { [key: string]: string }) {
localStorage.setItem('theme', JSON.stringify(props)); localStorage.setItem('theme', JSON.stringify(props));
} }
function compile(theme: { [key: string]: string }): { [key: string]: string } { function compile(theme: Theme): { [key: string]: string } {
function getColor(code: string): tinycolor.Instance { function getColor(code: string): tinycolor.Instance {
// ref // ref
if (code[0] == '@') { if (code[0] == '@') {

View File

@ -117,10 +117,8 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.onchrpzrvnoruiaenfcqvccjfuupzzwv
$bg-color = var(--popupBg)
root(isDark)
$bg-color = isDark ? #2c303c : #fff
$border-color = rgba(27, 31, 35, 0.15) $border-color = rgba(27, 31, 35, 0.15)
position initial position initial
@ -132,7 +130,7 @@ root(isDark)
z-index 10000 z-index 10000
width 100% width 100%
height 100% height 100%
background rgba(#000, isDark ? 0.5 : 0.1) background var(--modalBackdrop)
opacity 0 opacity 0
> .popover > .popover
@ -179,7 +177,7 @@ root(isDark)
display block display block
padding 8px 16px padding 8px 16px
width 100% width 100%
color isDark ? #d6dce2 : #111 color var(--popupFg)
&:hover &:hover
color var(--primaryForeground) color var(--primaryForeground)
@ -193,12 +191,6 @@ root(isDark)
> div > div
margin 8px 0 margin 8px 0
height 1px height 1px
background isDark ? #1c2023 : #eee background var(--faceDivider)
.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
root(true)
.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
root(false)
</style> </style>

View File

@ -210,11 +210,9 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
$border-color = rgba(27, 31, 35, 0.15) $border-color = rgba(27, 31, 35, 0.15)
root(isDark) .mk-reaction-picker
position initial position initial
> .backdrop > .backdrop
@ -224,11 +222,11 @@ root(isDark)
z-index 10000 z-index 10000
width 100% width 100%
height 100% height 100%
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1) background var(--modalBackdrop)
opacity 0 opacity 0
> .popover > .popover
$bgcolor = isDark ? #2c303c : #fff $bgcolor = var(--popupBg)
position absolute position absolute
z-index 10001 z-index 10001
background $bgcolor background $bgcolor
@ -281,8 +279,8 @@ root(isDark)
margin 0 margin 0
padding 8px 10px padding 8px 10px
font-size 14px font-size 14px
color isDark ? #d6dce2 : #586069 color var(--popupFg)
border-bottom solid 1px isDark ? #1c2023 : #e1e4e8 border-bottom solid 1px var(--faceDivider)
> div > div
padding 4px padding 4px
@ -312,16 +310,10 @@ root(isDark)
border-radius 2px border-radius 2px
&:hover &:hover
background isDark ? #252731 : #eee background var(--reactionPickerButtonHoverBg)
&:active &:active
background var(--primary) background var(--primary)
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15) box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
.mk-reaction-picker[data-darkmode]
root(true)
.mk-reaction-picker:not([data-darkmode])
root(false)
</style> </style>

View File

@ -145,7 +145,7 @@ root(isDark)
opacity 0 opacity 0
> .popover > .popover
$bgcolor = isDark ? #2c303c : #fff $bgcolor = var(--popupBg)
position absolute position absolute
z-index 10001 z-index 10001
width 240px width 240px

View File

@ -280,7 +280,7 @@ root(isDark)
width 100% width 100%
height 48px height 48px
color isDark ? #fff : #000 color isDark ? #fff : #000
background isDark ? #313543 : #f7f7f7 background var(--desktopHeaderBg)
box-shadow 0 1px 1px rgba(#000, 0.075) box-shadow 0 1px 1px rgba(#000, 0.075)
> a > a

View File

@ -151,7 +151,7 @@ root(isDark)
z-index 1000 z-index 1000
width 100% width 100%
height 48px height 48px
background isDark ? #313543 : #f7f7f7 background var(--desktopHeaderBg)
> .main > .main
z-index 1001 z-index 1001

View File

@ -1,16 +1,22 @@
{ {
"meta": { "meta": {
"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
"name": "Dark" "name": "Dark"
}, },
"primary": "#fb4e4e", "primary": "#fb4e4e",
"primaryForeground": "#fff", "primaryForeground": "#fff",
"bg": "#191B22", "bg": "#191b22",
"scrollbarTrack": "#282C37", "scrollbarTrack": "#282c37",
"scrollbarHandle": "#454954", "scrollbarHandle": "#454954",
"scrollbarHandleHover": "#535660", "scrollbarHandleHover": "#535660",
"face": "#282c37", "face": "#282c37",
"faceHeader": "#313543", "faceHeader": "#313543",
"faceDivider": "rgba(0, 0, 0, 0.3)", "faceDivider": "rgba(0, 0, 0, 0.3)",
"popupBg": "#2c303c",
"popupFg": "#d6dce2",
"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
"modalBackdrop": "rgba(0, 0, 0, 0.5)",
"desktopHeaderBg": "#313543",
"mobileSignedInAsBg": "#273c34", "mobileSignedInAsBg": "#273c34",
"mobileSignedInAsFg": "#49ab63", "mobileSignedInAsFg": "#49ab63",
"mobileSignoutBg": "#652222", "mobileSignoutBg": "#652222",

View File

@ -0,0 +1,17 @@
{
"meta": {
"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
"name": "Halloween",
"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
},
"primary": "#fb8d4e",
"primaryForeground": "#fff",
"bg": "#1b1a35",
"face": "#282c37",
"faceHeader": "#313543",
"faceDivider": "rgba(0, 0, 0, 0.3)",
"popupBg": "#2c303c",
"popupFg": "#d6dce2",
"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
"desktopHeaderBg": "#0c0b19"
}

View File

@ -1,5 +1,6 @@
{ {
"meta": { "meta": {
"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
"name": "Light" "name": "Light"
}, },
"primary": "#fb4e4e", "primary": "#fb4e4e",
@ -11,6 +12,11 @@
"face": "#fff", "face": "#fff",
"faceHeader": "#fff", "faceHeader": "#fff",
"faceDivider": "rgba(0, 0, 0, 0.082)", "faceDivider": "rgba(0, 0, 0, 0.082)",
"popupBg": "#fff",
"popupFg": "#586069",
"reactionPickerButtonHoverBg": "#eee",
"modalBackdrop": "rgba(0, 0, 0, 0.1)",
"desktopHeaderBg": "#f7f7f7",
"mobileSignedInAsBg": "#fcfff5", "mobileSignedInAsBg": "#fcfff5",
"mobileSignedInAsFg": "#2c662d", "mobileSignedInAsFg": "#2c662d",
"mobileSignoutBg": "#fff6f5", "mobileSignoutBg": "#fff6f5",