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
+182 -50
6 changed files with 182 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+15 -5
View File
@@ -17,15 +17,22 @@ limitations under the License.
<script setup>
import Navbar from './features/nav/components/Navbar.vue';
import Footer from './features/footer/components/Footer.vue';
import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
import { ref, provide, watch } from 'vue';
const isDark = ref(localStorage.getItem('theme') === 'dark');
provide('isDark', isDark);
watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
const { getColorScheme, updateColorScheme } = useColorScheme();
const colorScheme = ref(getColorScheme());
provide('colorScheme', colorScheme);
watch(colorScheme, val => updateColorScheme(val))
</script>
<template>
<div :class="{ dark: isDark }" class="app-wrapper">
<div
:style="{ colorScheme: colorScheme === 'auto' ? 'normal' : (colorScheme === 'dark' ? 'dark' : 'light')}"
:class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }"
id="app-wrapper"
>
<Navbar />
<div class="main-content">
@@ -44,9 +51,12 @@ watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
width: calc(100% - var(--main-content-padding-x) * 2);
flex-grow: 1;
}
.app-wrapper {
#app-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: var(--light-bg);
color: var(--dark);
}
</style>
src/features/colorScheme/components/ColorSchemeButton.vue
+69
View File
@@ -0,0 +1,69 @@
<!--
Copyright 2026 Seekra
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<script setup>
import { inject } from 'vue';
const colorScheme = inject('colorScheme');
const colorSchemeNextMapper = {
'light': 'dark',
'dark': 'auto',
'auto': 'light'
};
const colorSchemeTextMapper = {
'light': 'Switch to light mode',
'dark': 'Switch to dark mode',
'auto': 'Switch to the system scheme'
}
const colorSchemeIconMapper = {
'dark': '⏾',
'light': '☀',
'auto': '◐'
}
</script>
<template>
<button class="color-scheme-button"
@click="colorScheme = colorSchemeNextMapper[colorScheme]"
:aria-label="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
:title="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
>
{{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
</button>
</template>
<style scoped>
.color-scheme-button {
background: none;
border: 1.5px solid var(--light-d-3);
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--dark);
}
.color-scheme-button:hover {
background: var(--light-d-2);
}
</style>
src/features/colorScheme/composables/useColorScheme.js
+39
View File
@@ -0,0 +1,39 @@
/*
Copyright 2026 Seekra
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
export const useColorScheme = function () {
const getColorScheme = function () {
let colorScheme = localStorage.getItem('colorScheme') || 'auto';
if (!(colorScheme === 'dark' || colorScheme === 'light' || colorScheme === 'auto')) {
colorScheme = 'auto';
};
return colorScheme;
};
const updateColorScheme = function (newScheme) {
let actualNewScheme = newScheme;
if (!(actualNewScheme === 'dark' || actualNewScheme === 'light' || actualNewScheme === 'auto')) {
actualNewScheme = 'auto';
};
localStorage.setItem('colorScheme', actualNewScheme);
};
return {
getColorScheme,
updateColorScheme
};
};
src/features/nav/components/Navbar.vue
+3 -24
View File
@@ -15,10 +15,9 @@ limitations under the License.
-->
<script setup>
import { inject } from 'vue';
import logo from '@/assets/logo.svg';
import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
const isDark = inject('isDark');
import logo from '@/assets/logo.svg';
</script>
<template>
<nav class="global-nav">
@@ -27,12 +26,7 @@ const isDark = inject('isDark');
</RouterLink>
<ul class="right-links">
<li>
<button class="dark-mode-toggle"
@click="isDark = !isDark"
:aria-label="isDark ? 'Light mode' : 'Dark mode'">
<span v-if="isDark">☀</span>
<span v-else>⏾</span>
</button>
<ColorSchemeButton />
</li>
</ul>
</nav>
@@ -62,22 +56,7 @@ const isDark = inject('isDark');
.global-nav .right-links a:hover{
text-decoration: underline;
}
.dark-mode-toggle {
background: none;
border: 1.5px solid var(--light-d-3);
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.dark-mode-toggle:hover {
background: var(--light-d-2);
}
.nav-logo {
height: 24px;
width: auto;
src/styles/common.css
+4 -6
View File
@@ -19,16 +19,14 @@ body {
font-size: 16px;
}
#app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.link {
text-decoration: none;
}
.link:hover:not(.button-link) {
text-decoration: underline;
}
input {
color: var(--dark);
}
src/styles/variables/colors.css
+52 -15
View File
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
:root {
#app-wrapper {
--primary-color-l-8: oklch(0.897 0.202 260);
--primary-color-l-7: oklch(0.847 0.202 260);
--primary-color-l-6: oklch(0.797 0.202 260);
@@ -74,20 +74,57 @@ limitations under the License.
--light-d-8: var(--white-d-8);
--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);
--light-d-1: var(--black-l-7);
--light-d-2: var(--black-l-6);
--light-d-3: var(--black-l-5);
--light-d-4: var(--black-l-4);
--light-d-5: var(--black-l-3);
--light-d-6: var(--black-l-2);
--light-d-7: var(--black-l-1);
--light-d-8: var(--black);
@media (prefers-color-scheme: dark) {
#app-wrapper.color-scheme-auto {
--dark-l-8: var(--white-d-8);
--dark-l-7: var(--white-d-7);
--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-5: var(--black-l-5);
--light-d-6: var(--black-l-6);
--light-d-7: var(--black-l-7);
--light-d-8: var(--black-l-8);
--dark-bg: var(--white);
--light-bg: var(--black);
}
}
#app-wrapper.dark {
--dark-l-8: var(--white-d-8);
--dark-l-7: var(--white-d-7);
--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-5: var(--black-l-5);
--light-d-6: var(--black-l-6);
--light-d-7: var(--black-l-7);
--light-d-8: var(--black-l-8);
--dark-bg: var(--white);
--light-bg: var(--black);
}