rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added dark-theme

Browse source
This commit is contained in:
Joel Collins 2019-05-28 15:37:09 +01:00
parent d65329eafd
commit 17883e0567
8 changed files with 88 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/App.vue
View file

@ -1,11 +1,11 @@
<template>
<div id="app">
<div id="app" v-bind:class="handleTheme">
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
<div id="sidebar-container" v-bind:class="{ 'overlay-panel': this.window.width<850 }" class="uk-padding-remove uk-first-column uk-inline uk-height-1-1">
<div id="overlay-toggle">
<a href="" class="uk-icon-button uk-box-shadow-small uk-box-shadow-hover-medium action-btn-outline" uk-icon="menu" uk-toggle="target: #left-panel-container; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
</div>
<div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1">
<div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
<panelLeft/>
</div>
</div>
@ -81,6 +81,15 @@ export default {
console.log("Triggered beforeunload")
this.$root.$emit('globalTogglePreview', false)
}
},
computed: {
handleTheme: function () {
return {
'uk-light': this.$store.state.globalSettings.darkMode,
'uk-background-secondary': this.$store.state.globalSettings.darkMode
}
}
}
}
@ -123,6 +132,17 @@ body, html {
border: 1px solid lightgray;
}
.uk-light .uk-icon-button {
background-color: rgb(52, 52, 52);
}
.uk-light .uk-icon-button:hover, .uk-light .uk-icon-button:focus {
background-color: rgb(70, 70, 70);
}
.uk-light .uk-card-default {
background: #222
}
.uk-disabled {
pointer-events: none;
opacity: 0.5;