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

Refactor prefers-color-scheme handling

pull/937/head
Sergei Birukov 2 years ago
parent
cb8aaff912
commit
8ba634d915
8 changed files with 10 additions and 791 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. 1
      webui/dist/assets/index-Vj7S3zSy.css
  2. 741
      webui/dist/assets/index-qMiTwhmc.js
  3. BIN
      webui/dist/img/apple-touch-icon.png
  4. BIN
      webui/dist/img/favicon.png
  5. 20
      webui/dist/index.html
  6. 11
      webui/dist/manifest.json
  7. 9
      webui/src/App.vue
  8. 17
      webui/src/store/store.js

1
webui/dist/assets/index-Vj7S3zSy.css
View File

File diff suppressed because one or more lines are too long

741
webui/dist/assets/index-qMiTwhmc.js
View File

File diff suppressed because one or more lines are too long

BIN
webui/dist/img/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
webui/dist/img/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

20
webui/dist/index.html
View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WireGuard</title>
<link rel="manifest" href="./manifest.json" />
<link rel="icon" type="image/png" href="./img/favicon.png" />
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="module" crossorigin src="/assets/index-qMiTwhmc.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Vj7S3zSy.css">
</head>
<body class="bg-gray-50 dark:bg-neutral-800">
<div id="app"></div>
</body>
</html>

11
webui/dist/manifest.json
View File

@ -1,11 +0,0 @@
{
"name": "WireGuard",
"display": "standalone",
"background_color": "#fff",
"icons": [
{
"src": "img/favicon.png",
"type": "image/png"
}
]
}

9
webui/src/App.vue
View File

@ -101,7 +101,6 @@ const {
clientToDelete, clientToDelete,
qrcode, qrcode,
prefersDarkScheme, prefersDarkScheme,
uiTheme,
uiChartType, uiChartType,
uiTrafficStats, uiTrafficStats,
lang, lang,
@ -116,12 +115,9 @@ const refreshInterval = ref(null);
const refresh = store.refresh; const refresh = store.refresh;
const setTheme = store.setTheme; const setTheme = store.setTheme;
watch(prefersDarkScheme, () => {
setTheme(uiTheme.value);
});
onBeforeMount(() => { onBeforeMount(() => {
setTheme(uiTheme.value); setTheme();
prefersDarkScheme.value.addEventListener('change', setTheme);
api api
.getSession() .getSession()
@ -143,6 +139,7 @@ onBeforeMount(() => {
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
prefersDarkScheme.value.removeEventListener('change', setTheme);
clearInterval(refreshInterval.value); clearInterval(refreshInterval.value);
}); });

17
webui/src/store/store.js
View File

@ -21,7 +21,9 @@ export const useStore = defineStore('store', () => {
const dateFnsLocale = ref(); const dateFnsLocale = ref();
const uiTheme = ref(localStorage.theme || 'auto'); const uiTheme = ref(localStorage.theme || 'auto');
const prefersDarkScheme = ref(window.matchMedia('(prefers-color-scheme: dark)')); const prefersDarkScheme = computed(() =>
window.matchMedia('(prefers-color-scheme: dark)')
);
const uiChartType = ref(0); const uiChartType = ref(0);
const uiShowCharts = ref(localStorage.getItem('uiShowCharts') === '1'); const uiShowCharts = ref(localStorage.getItem('uiShowCharts') === '1');
@ -156,24 +158,18 @@ export const useStore = defineStore('store', () => {
const newIndex = (currentIndex + 1) % themes.length; const newIndex = (currentIndex + 1) % themes.length;
uiTheme.value = themes[newIndex]; uiTheme.value = themes[newIndex];
localStorage.theme = uiTheme.value; localStorage.theme = uiTheme.value;
setTheme(uiTheme.value); setTheme();
setTimeout(() => { setTimeout(() => {
pauseCharts.value = false; pauseCharts.value = false;
}, 300); }, 300);
} }
function setTheme(theme) { function setTheme() {
const { classList } = document.documentElement; const { classList } = document.documentElement;
const shouldAddDarkClass = theme === 'dark' || (theme === 'auto' && prefersDarkScheme.value.matches); const shouldAddDarkClass = uiTheme.value === 'dark' || (uiTheme.value === 'auto' && prefersDarkScheme.value.matches);
classList.toggle('dark', shouldAddDarkClass); classList.toggle('dark', shouldAddDarkClass);
} }
function handlePrefersChange(e) {
if (localStorage.theme === 'auto') {
setTheme(e.matches ? 'dark' : 'light');
}
}
function toggleCharts() { function toggleCharts() {
localStorage.setItem('uiShowCharts', uiShowCharts.value ? 1 : 0); localStorage.setItem('uiShowCharts', uiShowCharts.value ? 1 : 0);
} }
@ -204,7 +200,6 @@ export const useStore = defineStore('store', () => {
refresh, refresh,
toggleTheme, toggleTheme,
setTheme, setTheme,
handlePrefersChange,
toggleCharts, toggleCharts,
}; };
}); });

Write Preview
Loading…
Cancel
Save