Seekra/frontend
3
2
Fork 0
generated from Seekra/repository-template
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Add option to adapt color scheme to the system color scheme #61

Merged
jakob.scheid merged 12 commits from feature/dynamic-dark-mode into main 2026-05-18 16:55:41 +02:00
Conversation 1 Commits 12 Files Changed 6
+30 -17
2 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7f5cbf5665 - Show all commits
src/App.vue
+5 -2
View File
@@ -28,7 +28,7 @@ watch(colorTheme, val => updateColorTheme(val))
</script> </script>
<template> <template>
<div :class="{ dark: colorTheme === 'dark' }" class="app-wrapper"> <div :class="{ dark: colorTheme === 'dark' }" id="app-wrapper">
<Navbar /> <Navbar />
<div class="main-content"> <div class="main-content">
@@ -47,9 +47,12 @@ watch(colorTheme, val => updateColorTheme(val))
width: calc(100% - var(--main-content-padding-x) * 2); width: calc(100% - var(--main-content-padding-x) * 2);
flex-grow: 1; flex-grow: 1;
} }
.app-wrapper {
#app-wrapper {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--light-bg);
color: var(--dark);
} }
</style> </style>
src/styles/variables/colors.css
+24 -14
View File
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
:root { #app-wrapper {
--primary-color-l-8: oklch(0.897 0.202 260); --primary-color-l-8: oklch(0.897 0.202 260);
--primary-color-l-7: oklch(0.847 0.202 260); --primary-color-l-7: oklch(0.847 0.202 260);
--primary-color-l-6: oklch(0.797 0.202 260); --primary-color-l-6: oklch(0.797 0.202 260);
@@ -74,20 +74,30 @@ limitations under the License.
--light-d-8: var(--white-d-8); --light-d-8: var(--white-d-8);
--dark-bg: var(--black-l-2); --dark-bg: var(--black-l-2);
--light-bg: oklch(1 0 0); --light-bg: var(--white);
} }
.dark {
color-scheme: dark;
background-color: var(--dark-bg);
color: var(--white-d-1);
--light: var(--black-l-8); #app-wrapper.dark {
--light-d-1: var(--black-l-7); --dark-l-8: var(--white-d-8);
--light-d-2: var(--black-l-6); --dark-l-7: var(--white-d-7);
--light-d-3: var(--black-l-5); --dark-l-6: var(--white-d-6);
--dark-l-5: var(--white-d-5);
--dark-l-4: var(--white-d-4);
--dark-l-3: var(--white-d-3);
--dark-l-2: var(--white-d-2);
--dark-l-1: var(--white-d-1);
--dark: var(--white);
--light: var(--black);
--light-d-1: var(--black-l-1);
--light-d-2: var(--black-l-2);
--light-d-3: var(--black-l-3);
--light-d-4: var(--black-l-4); --light-d-4: var(--black-l-4);
--light-d-5: var(--black-l-3); --light-d-5: var(--black-l-5);
--light-d-6: var(--black-l-2); --light-d-6: var(--black-l-6);
--light-d-7: var(--black-l-1); --light-d-7: var(--black-l-7);
--light-d-8: var(--black); --light-d-8: var(--black-l-8);
--dark-bg: var(--white);
--light-bg: var(--black);
} }