SWREI/switched
0
0
Fork 0
Code

wip

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/app/app.vue
View File

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

21
src/client/app/common/scripts/theme.ts
View File

@ -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] == '@') {

18
src/client/app/common/views/components/menu.vue
View File

@ -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>

20
src/client/app/common/views/components/reaction-picker.vue
View File

@ -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>

2
src/client/app/common/views/components/visibility-chooser.vue
View File

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

2
src/client/app/desktop/views/components/home.vue
View File

@ -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

2
src/client/app/desktop/views/components/ui.header.vue
View File

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

10
src/client/theme/dark.json
View File

@ -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
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"
}

6
src/client/theme/light.json
View File

@ -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",