wip
This commit is contained in:
parent
3cbdfcb43d
commit
0a64f638c6
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -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] == '@') {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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",
|
||||||
|
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": {
|
"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",
|
||||||
|
Loading…
Reference in New Issue
Block a user