This commit is contained in:
syuilo 2018-09-26 18:59:37 +09:00
parent f6e4a1770e
commit 2b07b3a873
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
7 changed files with 103 additions and 70 deletions

View file

@ -5,6 +5,8 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { url, lang } from './config'; import { url, lang } from './config';
import applyTheme from './common/scripts/theme';
import darkTheme from '../theme/dark.json';
export default Vue.extend({ export default Vue.extend({
computed: { computed: {
@ -22,10 +24,7 @@ export default Vue.extend({
}, },
dark() { dark() {
this.$store.commit('device/set', { applyTheme(darkTheme);
key: 'darkmode',
value: !this.$store.state.device.darkmode
});
} }
} }
}); });

View file

@ -20,6 +20,16 @@
const langs = LANGS; const langs = LANGS;
//#region Apply theme
const theme = localStorage.getItem('theme');
if (theme) {
Object.entries(JSON.parse(theme)).forEach(([k, v]) => {
if (k == 'meta') return;
document.documentElement.style.setProperty(`--${k}`, v.toString());
});
}
//#endregion
//#region Load settings //#region Load settings
let settings = null; let settings = null;
const vuex = localStorage.getItem('vuex'); const vuex = localStorage.getItem('vuex');
@ -84,13 +94,6 @@
app = isMobile ? 'mobile' : 'desktop'; app = isMobile ? 'mobile' : 'desktop';
} }
// Dark/Light
if (settings) {
if (settings.device.darkmode) {
document.documentElement.setAttribute('data-darkmode', 'true');
}
}
// Script version // Script version
const ver = localStorage.getItem('v') || VERSION; const ver = localStorage.getItem('v') || VERSION;

View file

@ -0,0 +1,63 @@
export default function(theme: { [key: string]: string }) {
const props = compile(theme);
Object.entries(props).forEach(([k, v]) => {
if (k == 'meta') return;
document.documentElement.style.setProperty(`--${k}`, v.toString());
});
}
function compile(theme: { [key: string]: string }): { [key: string]: string } {
function getRgba(code: string): number[] {
// ref
if (code[0] == '@') {
return getRgba(theme[code.substr(1)]);
}
let m;
//#region #RGB
m = code.match(/^#([0-9a-f]{3})$/i)[1];
if (m) {
return [
parseInt(m.charAt(0), 16) * 0x11,
parseInt(m.charAt(1), 16) * 0x11,
parseInt(m.charAt(2), 16) * 0x11,
255
];
}
//#endregion
//#region #RRGGBB
m = code.match(/^#([0-9a-f]{6})$/i)[1];
if (m) {
return [
parseInt(m.substr(0, 2), 16),
parseInt(m.substr(2, 2), 16),
parseInt(m.substr(4, 2), 16),
255
];
}
//#endregion
return [0, 0, 0, 255];
}
const props = {};
Object.entries(theme).forEach(([k, v]) => {
if (k == 'meta') return;
const [r, g, b, a] = getRgba(v);
props[k] = genValue(r, g, b, a);
props[`${k}-r`] = r;
props[`${k}-g`] = g;
props[`${k}-b`] = b;
props[`${k}-a`] = a;
});
return props;
}
function genValue(r: number, g: number, b: number, a: number): string {
return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}

View file

@ -11,34 +11,21 @@
html html
height 100% height 100%
background #f7f7f7 background var(--bg)
&, * &, *
&::-webkit-scrollbar &::-webkit-scrollbar
width 6px width 6px
height 6px height 6px
&::-webkit-scrollbar-track
background var(--scrollbarTrack)
&::-webkit-scrollbar-thumb &::-webkit-scrollbar-thumb
background rgba(0, 0, 0, 0.2) background var(--scrollbarHandle)
&:hover &:hover
background rgba(0, 0, 0, 0.4) background var(--scrollbarHandleHover)
&:active &:active
background $theme-color background var(--primary)
&[data-darkmode]
background #191B22
&, *
&::-webkit-scrollbar-track
background-color #282C37
&::-webkit-scrollbar-thumb
background-color #454954
&:hover
background-color #535660
&:active
background-color $theme-color

View file

@ -86,45 +86,6 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
const launch = (router: VueRouter, api?: (os: MiOS) => API) => { const launch = (router: VueRouter, api?: (os: MiOS) => API) => {
os.apis = api ? api(os) : null; os.apis = api ? api(os) : null;
//#region Dark/Light
Vue.mixin({
data() {
return {
_unwatchDarkmode_: null
};
},
mounted() {
const apply = v => {
if (this.$el.setAttribute == null) return;
if (v) {
this.$el.setAttribute('data-darkmode', 'true');
} else {
this.$el.removeAttribute('data-darkmode');
}
};
apply(os.store.state.device.darkmode);
this._unwatchDarkmode_ = os.store.watch(s => {
return s.device.darkmode;
}, apply);
},
beforeDestroy() {
this._unwatchDarkmode_();
}
});
os.store.watch(s => {
return s.device.darkmode;
}, v => {
if (v) {
document.documentElement.setAttribute('data-darkmode', 'true');
} else {
document.documentElement.removeAttribute('data-darkmode');
}
});
//#endregion
//#region shadow //#region shadow
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)'; const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow); if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);

View file

@ -0,0 +1,10 @@
{
"meta": {
"name": "Dark"
},
"primary": "#fb4e4e",
"bg": "#191B22",
"scrollbarTrack": "#282C37",
"scrollbarHandle": "#454954",
"scrollbarHandleHover": "#535660"
}

View file

@ -0,0 +1,10 @@
{
"meta": {
"name": "Light"
},
"primary": "#fb4e4e",
"bg": "#f7f7f7",
"scrollbarTrack": "#fff",
"scrollbarHandle": "#00000033",
"scrollbarHandleHover": "#00000066"
}