luzifer/ots
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add Theme-Switcher for Dark-/Light-Mode

Browse source 
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers 2021-09-16 19:24:36 +02:00
parent a200047352
commit 5c0ea48261
Signed by: luzifer
GPG key ID: 0066F03ED215AD7D
7 changed files with 469 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app.js
View file

File diff suppressed because one or more lines are too long

16
frontend/index.html
View file

@ -9,6 +9,22 @@
<link rel="stylesheet" href="css/all.min.css"/>
<title>OTS - One Time Secrets</title>
<script>
window.getTheme = () => localStorage.getItem('set-color-scheme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
window.refreshTheme = () => {
document.querySelector('html').setAttribute('mode', window.getTheme())
}
window.setTheme = (theme) => {
localStorage.setItem('set-color-scheme', theme)
window.refreshTheme()
}
// Very early load of theme definition to avoid flickering
document.addEventListener('DOMContentLoaded', () => window.refreshTheme())
</script>
</head>
<body>
<div id="app"></div>

27
src/app.vue
View file

@ -25,6 +25,14 @@
<b-nav-item @click="newSecret">
<i class="fas fa-plus" /> {{ $t('btn-new-secret') }}
</b-nav-item>
<b-nav-form class="ml-2">
<b-form-checkbox
v-model="darkTheme"
switch
>
<i class="fas fa-moon" />&ZeroWidthSpace;
</b-form-checkbox>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
@ -172,6 +180,7 @@ export default {
securePassword: '',
secretId: '',
showError: false,
darkTheme: false,
}
},
@ -187,8 +196,15 @@ export default {
},
},
watch: {
darkTheme(to) {
window.setTheme(to ? 'dark' : 'light')
},
},
// Trigger initialization functions
mounted() {
this.darkTheme = window.getTheme() === 'dark'
window.onhashchange = this.hashLoad
this.hashLoad()
},
@ -269,14 +285,3 @@ export default {
},
}
</script>
<style>
textarea {
font-family: monospace;
}
.footer {
color: #2f2f2f;
font-size: 0.9em;
text-align: center;
}
</style>

2
src/main.js
View file

@ -5,7 +5,7 @@ import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootswatch/dist/flatly/bootstrap.css'
import './style.scss'
import app from './app.vue'
import messages from './langs/langs.js'

492
src/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
src/package.json
View file

@ -24,9 +24,9 @@
},
"dependencies": {
"axios": "^0.21.4",
"bootstrap": "^4.0.0",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"bootswatch": "^4.0.0",
"bootswatch": "^4.6.0",
"gibberish-aes": "^1.0.0",
"popper.js": "^1.16.1",
"vue": "^2.6.14",

50
src/style.scss Normal file
View file

@ -0,0 +1,50 @@
:root {
&[mode="dark"] {
@import "node_modules/bootswatch/dist/darkly/bootstrap";
.custom-control-input:checked ~ .custom-control-label::before {
border-color: #333;
background-color: #444;
}
.footer {
color: #d1d1d1;
}
.form-control {
/* Force overwrite bright textareas */
background-color: rgb(24, 26, 27);
border-color: rgb(129, 120, 106);
color: rgb(189, 183, 175);
&:focus {
background-color: rgb(24, 26, 27);
border-color: rgb(49, 81, 113);
color: rgb(189, 183, 175);
}
&[readonly] {
background-color: rgb(24, 26, 27);
}
}
}
&[mode="light"] {
@import "node_modules/bootswatch/dist/flatly/bootstrap";
.footer {
color: #2f2f2f;
}
}
textarea {
font-family: monospace !important;
}
.footer {
font-size: 0.9em;
text-align: center;
}
}