filipriec/komp_ac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark light mode generalized

Browse Source
This commit is contained in:
Filipriec
2026-08-21 10:03:36 +02:00
parent 4e13535729
commit f04bbd78c2
2 changed files with 214 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
web/templates/ui/base.html
View File

@@ -40,52 +40,41 @@
#}
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
/*
The theme penguinui-components/style.css declares, with this app's palette
in the light slots. The names are the library's and are not renamed: the
component markup here is the library's markup, so it asks for
`text-on-surface` and `rounded-radius` and has to find them.
*/
/* Penguin UI's names stay as aliases; app.css owns the actual palette. */
@custom-variant dark (&:where(.dark, .dark *));
@theme {
/* Light theme — this app's palette. */
--color-surface: #ffffff;
--color-surface-alt: #f3f5f7;
--color-on-surface: #465267;
--color-on-surface-strong: #17202a;
--color-primary: #2563eb;
--color-on-primary: #ffffff;
--color-secondary: #152238;
--color-on-secondary: #ffffff;
--color-outline: #d9dfe7;
--color-outline-strong: #8f9bad;
/* All aliases resolve through app.css, including the dark aliases. */
--color-surface: var(--surface);
--color-surface-alt: var(--surface-alt);
--color-on-surface: var(--label);
--color-on-surface-strong: var(--text-strong);
--color-primary: var(--primary);
--color-on-primary: var(--on-primary);
--color-secondary: var(--secondary);
--color-on-secondary: var(--on-secondary);
--color-outline: var(--border);
--color-outline-strong: var(--outline-strong);
/*
Dark theme. Nothing sets the `.dark` class the custom variant above
scopes these to, so they are inert — they exist because the library's
markup carries `dark:` classes and is used as it ships. Scoping the
variant to a class rather than leaving Tailwind's prefers-color-scheme
default is what keeps them from firing on an OS set to dark.
*/
--color-surface-dark: #0f1722;
--color-surface-dark-alt: #152238;
--color-on-surface-dark: #cbd7e8;
--color-on-surface-dark-strong: #ffffff;
--color-primary-dark: #68a4ff;
--color-on-primary-dark: #0f1722;
--color-outline-dark: #33415a;
--color-outline-dark-strong: #cbd7e8;
--color-surface-dark: var(--surface);
--color-surface-dark-alt: var(--surface-alt);
--color-on-surface-dark: var(--text);
--color-on-surface-dark-strong: var(--text-strong);
--color-primary-dark: var(--primary);
--color-on-primary-dark: var(--on-primary);
--color-secondary-dark: var(--secondary);
--color-on-secondary-dark: var(--on-secondary);
--color-outline-dark: var(--border);
--color-outline-dark-strong: var(--outline-strong);
/* Shared colours. */
--color-info: #1d4e89;
--color-on-info: #ffffff;
--color-success: #21643a;
--color-on-success: #ffffff;
--color-warning: #8a5a08;
--color-on-warning: #ffffff;
--color-danger: #9d342d;
--color-on-danger: #ffffff;
--color-info: var(--info);
--color-on-info: var(--on-info);
--color-success: var(--success);
--color-on-success: var(--on-success);
--color-warning: var(--warning);
--color-on-warning: var(--on-warning);
--color-danger: var(--danger);
--color-on-danger: var(--on-danger);
/* Border radius. */
--radius-radius: 6px;