mirror
/
wg-easy
mirror of https://github.com/wg-easy/wg-easy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add theme toggle button 

* Manipulate `<html>` directly because Vue does not bind it.
pull/178/head
Anton Grouchtchak 3 years ago
parent
46078c68ed
commit
9f0c6c563d
No known key found for this signature in database GPG Key ID: 17F776B7A59A0AEA
3 changed files with 37 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/www/css/vendor/tailwind.min.css
  2. 22
      src/www/index.html
  3. 17
      src/www/js/app.js

2
src/www/css/vendor/tailwind.min.css
View File

File diff suppressed because one or more lines are too long

22
src/www/index.html
View File

@ -10,10 +10,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<script> <script>
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
} else { } else {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} }
</script> </script>
</head> </head>
@ -28,6 +30,20 @@
<div id="app"> <div id="app">
<div class="flex justify-end">
<button v-cloak id="theme-toggle" @click="toggleTheme"
class="mt-5 mr-5 text-gray-500 dark:text-slate-200 bg-gray-200 dark:bg-slate-700 hover:bg-gray-300 dark:hover:bg-slate-600 focus:outline-none rounded-lg text-sm p-2.5 transition">
<svg id="theme-toggle-dark-icon" :class="{ hidden: isDark }" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" :class="{ hidden: !isDark }" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z">
</path>
</svg>
</button>
</div>
<div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0"> <div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0">
<div v-if="authenticated === true"> <div v-if="authenticated === true">
@ -40,8 +56,8 @@
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /> d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg> </svg>
</span> </span>
<h1 class="text-4xl dark:text-slate-200 font-medium mt-10 mb-2"> <h1 class="text-4xl dark:text-slate-200 font-medium mt-2 mb-2">
<img src="./img/logo.png" width="32" class="inline align-middle dark:bg-slate-200 py-1 rounded" /> <img src="./img/logo.png" width="32" class="inline align-middle dark:bg-slate-200 py-1 rounded-lg" />
<span class="align-middle">WireGuard</span> <span class="align-middle">WireGuard</span>
</h1> </h1>
<h2 class="text-sm text-gray-400 dark:text-slate-400 mb-10"></h2> <h2 class="text-sm text-gray-400 dark:text-slate-400 mb-10"></h2>

17
src/www/js/app.js
View File

@ -48,6 +48,8 @@ new Vue({
currentRelease: null, currentRelease: null,
latestRelease: null, latestRelease: null,
isDark: null,
chartOptions: { chartOptions: {
chart: { chart: {
background: 'transparent', background: 'transparent',
@ -243,6 +245,16 @@ new Vue({
.catch(err => alert(err.message || err.toString())) .catch(err => alert(err.message || err.toString()))
.finally(() => this.refresh().catch(console.error)); .finally(() => this.refresh().catch(console.error));
}, },
toggleTheme() {
if (this.isDark) {
localStorage.theme = "light";
document.documentElement.classList.remove('dark');
} else {
localStorage.theme = "dark";
document.documentElement.classList.add('dark');
}
this.isDark = !this.isDark;
},
}, },
filters: { filters: {
bytes, bytes,
@ -251,6 +263,11 @@ new Vue({
}, },
}, },
mounted() { mounted() {
this.isDark = false;
if (localStorage.theme === 'dark') {
this.isDark = true;
}
this.api = new API(); this.api = new API();
this.api.getSession() this.api.getSession()
.then(session => { .then(session => {

Write Preview
Loading…
Cancel
Save