zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reafctor: Rely only on the database for themes

Browse Source 
This commit makes it so that a user's theme will only be pulled from the
database rather than from a weird mix of cookies and the database. This
fixes some issues with themes rendering weirdly.
This commit is contained in:
Zoe
2026-02-24 16:35:40 +00:00
parent ab57af1f23
commit fc5aedcedd
7 changed files with 75 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.vue
+4 -21
View File
@@ -2,12 +2,13 @@
import '~/assets/css/reset.css';
import '~/assets/css/base.css';
const { accent, neutral, hinting } = useTheme();
const { accent, neutral, hinting } = await useUserSettings();
// by default, disable hinting
if (Number.isNaN(Number(hinting.value))) hinting.value = '0';
useHead({
watchEffect(() => {
useHead({
htmlAttrs: {
style: `
--neutral-100: var(--palette-${neutral.value}-100);
@@ -18,30 +19,12 @@ useHead({
--accent-hinting: ${hinting.value}%;
--base-hinting: calc(100% - var(--accent-hinting));`,
},
});
});
if (import.meta.client) {
// force shiki into browser rendering only
window.sessionStorage.setItem('mdc-shiki-highlighter', 'browser');
watchEffect(() => {
document.documentElement.style.setProperty(
'--color-accent',
`var(--accent-${accent.value}, var(--accent-violet))`,
);
document.documentElement.style.setProperty(
'--color-accent-hover',
`var(--accent-${accent.value}-hover, var(--accent-violet-hover))`,
);
// document.documentElement.style.setProperty(
// '--color-neutral',
// `var(--neutral-${neutral.value}, var(--neutral-zinc))`,
// );
document.documentElement.style.setProperty('--neutral-100', `var(--palette-${neutral.value}-100)`);
document.documentElement.style.setProperty('--neutral-200', `var(--palette-${neutral.value}-200)`);
document.documentElement.style.setProperty('--neutral-300', `var(--palette-${neutral.value}-300)`);
document.documentElement.style.setProperty('--accent-hinting', `${hinting.value}%`);
});
}
</script>
app/assets/css/base.css
+1 -1
View File
@@ -1,7 +1,7 @@
:root {
--spacing: 0.25rem;
--color-accent-text: #232625;
--color-accent-text: #fcfdff;
--reasoning-accent: #a62bcb;
app/components/ChatInput.vue
+1 -1
View File
@@ -161,7 +161,7 @@ onUnmounted(() => {
<template>
<div :class="['w-full flex max-h-full', $attrs.class]">
<div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-3 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--bg-container)]
<div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-2 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--bg-container)]
border-[var(--color-border)] focus-within:border-[var(--color-border-active)]">
<div class="flex-1 min-w-0 max-h-full">
<!-- Grammarly literally breaks everything, go fuck yourself -->
app/components/Settings/AppearanceSettings.vue
+1 -2
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
const { settings, updateSettings } = await useUserSettings();
const { colorScheme } = useTheme();
const { colorScheme, settings, updateSettings } = await useUserSettings();
const accents = ['violet', 'volcano', 'lime', 'sky', 'coral', 'emerald', 'amber', 'rose', 'cyan', 'indigo', 'magenta'];
const neutrals = ['zinc', 'slate', 'obsidian'];
app/composables/useTheme.ts
-76
View File
@@ -1,76 +0,0 @@
export const useTheme = () => {
const accent = useCookie('accent', {
default: () => 'violet',
maxAge: 60 * 60 * 24 * 365,
});
const neutral = useCookie('neutral', {
default: () => 'zinc',
maxAge: 60 * 60 * 24 * 365,
});
// disable hinting by default
const hinting = useCookie('hinting', {
default: () => '0',
maxAge: 60 * 60 * 24 * 365,
});
const colorScheme: { preference: Ref<'light' | 'dark' | 'system'>; value: Ref<'light' | 'dark'>; class: Ref<'light' | 'dark' | undefined> } = {
preference: useCookie('colorScheme', {
default: () => 'system',
maxAge: 60 * 60 * 24 * 365,
}),
value: computed(() => {
if (colorScheme.preference.value === 'system') {
if (import.meta.client) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
return prefersDark ? 'dark' : 'light';
}
return 'dark';
}
return colorScheme.preference.value as 'light' | 'dark';
}),
class: ref<undefined | 'light' | 'dark'>(undefined)
}
let listeningToColorScheme = false;
const changeSystemColorScheme = (e: MediaQueryListEvent) => {
if (colorScheme.preference.value !== 'system') return;
colorScheme.class.value = e.matches ? 'dark' : 'light';
}
watch(colorScheme.preference, () => {
if (colorScheme.preference.value === 'system') {
if (import.meta.client) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (!listeningToColorScheme) {
listeningToColorScheme = true;
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', changeSystemColorScheme);
}
colorScheme.class.value = prefersDark ? 'dark' : 'light';
return;
}
if (listeningToColorScheme) {
listeningToColorScheme = false;
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', changeSystemColorScheme);
}
// fallback to dark on the server
colorScheme.class.value = 'dark';
return;
}
colorScheme.class.value = colorScheme.preference.value as 'light' | 'dark';
}, { immediate: true });
return {
accent,
neutral,
hinting,
colorScheme
};
};
app/composables/useUserSettings.ts
+64 -8
View File
@@ -7,7 +7,61 @@ import { computed, watch } from 'vue';
export const useUserSettings = async () => {
const { user, loggedIn } = useAuth();
const triplit = useTriplitClient();
const { accent, neutral, hinting, colorScheme } = useTheme();
const accent = useState('theme:accent', () => 'violet');
const neutral = useState('theme:neutral', () => 'zinc');
const hinting = useState('theme:hinting', () => '0');
const colorScheme: { preference: Ref<'light' | 'dark' | 'system'>; value: Ref<'light' | 'dark'>; class: Ref<'light' | 'dark' | undefined> } = {
preference: useState('theme:colorScheme', () => 'system' as 'light' | 'dark' | 'system'),
value: computed(() => {
if (colorScheme.preference.value === 'system') {
if (import.meta.client) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
return prefersDark ? 'dark' : 'light';
}
return 'dark';
}
return colorScheme.preference.value as 'light' | 'dark';
}),
class: ref<undefined | 'light' | 'dark'>(undefined)
}
let listeningToColorScheme = false;
const changeSystemColorScheme = (e: MediaQueryListEvent) => {
if (colorScheme.preference.value !== 'system') return;
colorScheme.class.value = e.matches ? 'dark' : 'light';
}
watch(colorScheme.preference, () => {
if (colorScheme.preference.value === 'system') {
if (import.meta.client) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (!listeningToColorScheme) {
listeningToColorScheme = true;
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', changeSystemColorScheme);
}
colorScheme.class.value = prefersDark ? 'dark' : 'light';
return;
}
if (listeningToColorScheme) {
listeningToColorScheme = false;
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', changeSystemColorScheme);
}
// fallback to dark on the server
colorScheme.class.value = 'dark';
return;
}
colorScheme.class.value = colorScheme.preference.value as 'light' | 'dark';
}, { immediate: true });
const start = Date.now();
const remoteSettings = useState<Entity<typeof schema, 'settings'> | null>('user:settings', () => null);
@@ -23,28 +77,26 @@ export const useUserSettings = async () => {
remoteSettings.value = val[0] as any;
}, { immediate: true, deep: true })
// Sync remote settings to local cookies
// This bridges the gap between the server state and the local CSS variable application
watch(remoteSettings, (newSettings) => {
if (!newSettings?.appearance) return;
const { appearance } = newSettings;
if (appearance.colorScheme && appearance.colorScheme !== colorScheme.preference.value) {
if (appearance.colorScheme) {
colorScheme.preference.value = appearance.colorScheme as 'light' | 'dark' | 'system';
}
if (appearance.accent && appearance.accent !== accent.value) {
if (appearance.accent) {
accent.value = appearance.accent;
}
if (appearance.neutral && appearance.neutral !== neutral.value) {
if (appearance.neutral) {
neutral.value = appearance.neutral;
}
if (appearance.hinting !== undefined && String(appearance.hinting) !== hinting.value) {
if (appearance.hinting !== undefined) {
hinting.value = String(appearance.hinting);
}
}, { deep: true });
}, { immediate: true, deep: true });
// Effective settings with defaults for backwards compatibility
const settings = computed(() => {
@@ -138,5 +190,9 @@ export const useUserSettings = async () => {
settings,
remoteSettings,
updateSettings,
accent,
neutral,
hinting,
colorScheme
};
};
app/layouts/default.vue
+1 -2
View File
@@ -1,8 +1,7 @@
<script setup lang="ts">
import SettingsDialog from '~/components/Settings/Dialog.vue';
const { open: sidebarOpen, openSidebar } = useSidebar();
const { colorScheme } = useTheme();
const { colorScheme } = await useUserSettings();
useHead({
htmlAttrs: {