wip
This commit is contained in:
syuilo
parent
3cbdfcb43d
commit
0a64f638c6
10 changed files with 71 additions and 35 deletions
|
|
@ -7,13 +7,15 @@ import Vue from 'vue';
|
|||
import { url, lang } from './config';
|
||||
import applyTheme from './common/scripts/theme';
|
||||
const darkTheme = require('../theme/dark');
|
||||
const halloweenTheme = require('../theme/halloween');
|
||||
|
||||
export default Vue.extend({
|
||||
computed: {
|
||||
keymap(): any {
|
||||
return {
|
||||
'h|slash': this.help,
|
||||
'd': this.dark
|
||||
'd': this.dark,
|
||||
'x': this.test
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
@ -25,6 +27,10 @@ export default Vue.extend({
|
|||
|
||||
dark() {
|
||||
applyTheme(darkTheme);
|
||||
},
|
||||
|
||||
test() {
|
||||
applyTheme(halloweenTheme);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,23 @@
|
|||
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);
|
||||
|
||||
Object.entries(props).forEach(([k, v]) => {
|
||||
|
|
@ -11,7 +28,7 @@ export default function(theme: { [key: string]: string }) {
|
|||
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 {
|
||||
// ref
|
||||
if (code[0] == '@') {
|
||||
|
|
|
|||
|
|
@ -117,10 +117,8 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
root(isDark)
|
||||
$bg-color = isDark ? #2c303c : #fff
|
||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv
|
||||
$bg-color = var(--popupBg)
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
position initial
|
||||
|
|
@ -132,7 +130,7 @@ root(isDark)
|
|||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background rgba(#000, isDark ? 0.5 : 0.1)
|
||||
background var(--modalBackdrop)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
|
|
@ -179,7 +177,7 @@ root(isDark)
|
|||
display block
|
||||
padding 8px 16px
|
||||
width 100%
|
||||
color isDark ? #d6dce2 : #111
|
||||
color var(--popupFg)
|
||||
|
||||
&:hover
|
||||
color var(--primaryForeground)
|
||||
|
|
@ -193,12 +191,6 @@ root(isDark)
|
|||
> div
|
||||
margin 8px 0
|
||||
height 1px
|
||||
background isDark ? #1c2023 : #eee
|
||||
|
||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
|
||||
root(false)
|
||||
background var(--faceDivider)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -210,11 +210,9 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
root(isDark)
|
||||
.mk-reaction-picker
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
|
|
@ -224,11 +222,11 @@ root(isDark)
|
|||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
|
||||
background var(--modalBackdrop)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
$bgcolor = isDark ? #2c303c : #fff
|
||||
$bgcolor = var(--popupBg)
|
||||
position absolute
|
||||
z-index 10001
|
||||
background $bgcolor
|
||||
|
|
@ -281,8 +279,8 @@ root(isDark)
|
|||
margin 0
|
||||
padding 8px 10px
|
||||
font-size 14px
|
||||
color isDark ? #d6dce2 : #586069
|
||||
border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
|
||||
color var(--popupFg)
|
||||
border-bottom solid 1px var(--faceDivider)
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
|
|
@ -312,16 +310,10 @@ root(isDark)
|
|||
border-radius 2px
|
||||
|
||||
&:hover
|
||||
background isDark ? #252731 : #eee
|
||||
background var(--reactionPickerButtonHoverBg)
|
||||
|
||||
&:active
|
||||
background var(--primary)
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ root(isDark)
|
|||
opacity 0
|
||||
|
||||
> .popover
|
||||
$bgcolor = isDark ? #2c303c : #fff
|
||||
$bgcolor = var(--popupBg)
|
||||
position absolute
|
||||
z-index 10001
|
||||
width 240px
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ root(isDark)
|
|||
width 100%
|
||||
height 48px
|
||||
color isDark ? #fff : #000
|
||||
background isDark ? #313543 : #f7f7f7
|
||||
background var(--desktopHeaderBg)
|
||||
box-shadow 0 1px 1px rgba(#000, 0.075)
|
||||
|
||||
> a
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ root(isDark)
|
|||
z-index 1000
|
||||
width 100%
|
||||
height 48px
|
||||
background isDark ? #313543 : #f7f7f7
|
||||
background var(--desktopHeaderBg)
|
||||
|
||||
> .main
|
||||
z-index 1001
|
||||
|
|
|
|||
|
|
@ -1,16 +1,22 @@
|
|||
{
|
||||
"meta": {
|
||||
"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
|
||||
"name": "Dark"
|
||||
},
|
||||
"primary": "#fb4e4e",
|
||||
"primaryForeground": "#fff",
|
||||
"bg": "#191B22",
|
||||
"scrollbarTrack": "#282C37",
|
||||
"bg": "#191b22",
|
||||
"scrollbarTrack": "#282c37",
|
||||
"scrollbarHandle": "#454954",
|
||||
"scrollbarHandleHover": "#535660",
|
||||
"face": "#282c37",
|
||||
"faceHeader": "#313543",
|
||||
"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",
|
||||
"mobileSignedInAsFg": "#49ab63",
|
||||
"mobileSignoutBg": "#652222",
|
||||
|
|
|
|||
17
src/client/theme/halloween.json
Normal file
17
src/client/theme/halloween.json
Normal 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"
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"meta": {
|
||||
"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
|
||||
"name": "Light"
|
||||
},
|
||||
"primary": "#fb4e4e",
|
||||
|
|
@ -11,6 +12,11 @@
|
|||
"face": "#fff",
|
||||
"faceHeader": "#fff",
|
||||
"faceDivider": "rgba(0, 0, 0, 0.082)",
|
||||
"popupBg": "#fff",
|
||||
"popupFg": "#586069",
|
||||
"reactionPickerButtonHoverBg": "#eee",
|
||||
"modalBackdrop": "rgba(0, 0, 0, 0.1)",
|
||||
"desktopHeaderBg": "#f7f7f7",
|
||||
"mobileSignedInAsBg": "#fcfff5",
|
||||
"mobileSignedInAsFg": "#2c662d",
|
||||
"mobileSignoutBg": "#fff6f5",
|
||||
|
|
|
|||
Loading…
Reference in a new issue