From 6a8b28df881c689ebfa6f02dce28fb1bf6ff07d3 Mon Sep 17 00:00:00 2001 From: h44z Date: Sun, 27 Jul 2025 00:15:27 +0200 Subject: [PATCH] add dark mode (#482) (#489) --- frontend/index.html | 2 +- frontend/package-lock.json | 16 +++--- frontend/package.json | 4 +- frontend/src/App.vue | 60 ++++++++++++++++++++++- frontend/src/assets/base.css | 8 +++ frontend/src/components/PeerViewModal.vue | 4 +- frontend/src/views/AuditView.vue | 2 +- frontend/src/views/HomeView.vue | 8 +-- frontend/src/views/InterfaceView.vue | 6 ++- frontend/src/views/ProfileView.vue | 4 +- frontend/src/views/SettingsView.vue | 12 ++--- frontend/src/views/UserView.vue | 2 +- 12 files changed, 97 insertions(+), 31 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index fd8033f..287ef99 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,5 +1,5 @@ - + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index afbb37b..db118ca 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,8 +14,8 @@ "@popperjs/core": "^2.11.8", "@simplewebauthn/browser": "^13.1.0", "@vojtechlanka/vue-tags-input": "^3.1.1", - "bootstrap": "^5.3.5", - "bootswatch": "^5.3.5", + "bootstrap": "^5.3.7", + "bootswatch": "^5.3.7", "flag-icons": "^7.3.2", "ip-address": "^10.0.1", "is-cidr": "^5.1.1", @@ -1048,9 +1048,9 @@ } }, "node_modules/bootstrap": { - "version": "5.3.5", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.5.tgz", - "integrity": "sha512-ct1CHKtiobRimyGzmsSldEtM03E8fcEX4Tb3dGXz1V8faRwM50+vfHwTzOxB3IlKO7m+9vTH3s/3C6T2EAPeTA==", + "version": "5.3.7", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.7.tgz", + "integrity": "sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==", "funding": [ { "type": "github", @@ -1067,9 +1067,9 @@ } }, "node_modules/bootswatch": { - "version": "5.3.5", - "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.3.5.tgz", - "integrity": "sha512-1z8LNoUL5NHmv/hNROALQ6qtjw9OJIjMgP8ovBlIft+oI15b/mvnzxGL896iO9LtoDZH0Vdm+D2YW+j03GduSg==", + "version": "5.3.7", + "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.3.7.tgz", + "integrity": "sha512-n0X99+Jmpmd4vgkli5KwMOuAkgdyUPhq7cIAwoGXbM6WhE/mmkWACfxpr7WZeG9Pdx509Ndi+2K1HlzXXOr8/Q==", "license": "MIT" }, "node_modules/buffer-builder": { diff --git a/frontend/package.json b/frontend/package.json index 0be893a..e226a95 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,8 +14,8 @@ "@popperjs/core": "^2.11.8", "@simplewebauthn/browser": "^13.1.0", "@vojtechlanka/vue-tags-input": "^3.1.1", - "bootstrap": "^5.3.5", - "bootswatch": "^5.3.5", + "bootstrap": "^5.3.7", + "bootswatch": "^5.3.7", "flag-icons": "^7.3.2", "ip-address": "^10.0.1", "is-cidr": "^5.1.1", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index e6e20d2..cddea54 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -14,6 +14,10 @@ const settings = settingsStore() onMounted(async () => { console.log("Starting WireGuard Portal frontend..."); + // restore theme from localStorage + const theme = localStorage.getItem('wgTheme') || 'light'; + document.documentElement.setAttribute('data-bs-theme', theme); + await sec.LoadSecurityProperties(); await auth.LoadProviders(); @@ -40,6 +44,13 @@ const switchLanguage = function (lang) { } } +const switchTheme = function (theme) { + if (document.documentElement.getAttribute('data-bs-theme') !== theme) { + localStorage.setItem('wgTheme', theme); + document.documentElement.setAttribute('data-bs-theme', theme); + } +} + const languageFlag = computed(() => { // `this` points to the component instance let lang = appGlobal.$i18n.locale.toLowerCase(); @@ -125,6 +136,24 @@ const userDisplayName = computed(() => {
{{ $t('menu.login') }}
+
+ + +
@@ -141,7 +170,7 @@ const userDisplayName = computed(() => {
-
Deutsch @@ -163,4 +192,31 @@ const userDisplayName = computed(() => { - + diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css index 39092f5..092eb2f 100644 --- a/frontend/src/assets/base.css +++ b/frontend/src/assets/base.css @@ -65,6 +65,14 @@ a.disabled { color: var(--bs-body-color); } +[data-bs-theme=dark] .vue-tags-input .ti-tag { + position: relative; + background: #3c3c3c; + border: 2px solid var(--bs-body-color); + margin: 6px; + color: var(--bs-body-color); +} + /* the styles if a tag is invalid */ .vue-tags-input .ti-tag.ti-invalid { background-color: #e88a74; diff --git a/frontend/src/components/PeerViewModal.vue b/frontend/src/components/PeerViewModal.vue index 91c2d86..5b7a94d 100644 --- a/frontend/src/components/PeerViewModal.vue +++ b/frontend/src/components/PeerViewModal.vue @@ -134,9 +134,9 @@ function ConfigQrUrl() { {{ $t('modals.peer-view.style-label') }}:
- + - +
diff --git a/frontend/src/views/AuditView.vue b/frontend/src/views/AuditView.vue index 108827a..ccd78f7 100644 --- a/frontend/src/views/AuditView.vue +++ b/frontend/src/views/AuditView.vue @@ -26,7 +26,7 @@ onMounted(async () => {
- +
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index 0291ca7..be87e56 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -13,21 +13,21 @@ const auth = authStore()

{{ $t('home.abstract') }}

-
+

{{ $t('home.profiles.headline') }}

{{ $t('home.profiles.abstract') }}

-

{{ $t('home.profiles.content') }}

+

{{ $t('home.profiles.content') }}

{{ $t('home.profiles.button') }}

-
+

{{ $t('home.admin.headline') }}

{{ $t('home.admin.abstract') }}

-

{{ $t('home.admin.content') }}

+

{{ $t('home.admin.content') }}

{{ $t('home.admin.button-admin') }} diff --git a/frontend/src/views/InterfaceView.vue b/frontend/src/views/InterfaceView.vue index 1084081..1cdb9fb 100644 --- a/frontend/src/views/InterfaceView.vue +++ b/frontend/src/views/InterfaceView.vue @@ -112,7 +112,7 @@ onMounted(async () => {

- - +
@@ -429,3 +429,5 @@ onMounted(async () => {
+ diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue index a5daec2..ea73fab 100644 --- a/frontend/src/views/ProfileView.vue +++ b/frontend/src/views/ProfileView.vue @@ -65,7 +65,7 @@ onMounted(async () => {
-
@@ -73,7 +73,7 @@ onMounted(async () => {
- - +