pitfriedrich/chart-app
1
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[FEATURE] Dark Theme

Browse Source
This commit is contained in:
Pit Friedrich
2026-07-11 22:31:08 +02:00
parent aa8fbb4838
commit 9df764d065
7 changed files with 140 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/META-INF/resources/styles.css
+17 -6
View File
@@ -1,18 +1,29 @@
/* Dialect design system tokens (https://www.figma.com/design/6DRThj0vmRgfjMIdsmkaIy) */
:root {
/* Support both schemes; actual scheme is picked by the theme toggle setting
`color-scheme` on <html> (see MainLayout's theme switch). */
color-scheme: light dark;
--dialect-primary: #e86c00;
--dialect-secondary: #f6b93b;
--dialect-bg: #f4f6f9;
--dialect-surface: #ffffff;
--dialect-ink: #14171f;
--dialect-border: #e6eaf0;
--dialect-bg: light-dark(#f4f6f9, #14171f);
--dialect-surface: light-dark(#ffffff, #1c2029);
--dialect-ink: light-dark(#14171f, #e6eaf0);
--dialect-border: light-dark(#e6eaf0, #2b303b);
--dialect-radius: 14px;
--dialect-shadow: 0 6px 20px rgba(20, 23, 31, 0.08), 0 1px 2px rgba(20, 23, 31, 0.06);
/* light-dark() only takes 2 args, so each shadow layer gets its own light-dark()
call and the layers are joined below (var() is a text substitution, so the
comma-separated shadow list still parses correctly). */
--dialect-shadow-1: light-dark(0 6px 20px rgba(20, 23, 31, 0.08), 0 6px 20px rgba(0, 0, 0, 0.35));
--dialect-shadow-2: light-dark(0 1px 2px rgba(20, 23, 31, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3));
--dialect-shadow: var(--dialect-shadow-1), var(--dialect-shadow-2);
--dialect-navbar-shadow: light-dark(0 1px 3px rgba(20, 23, 31, 0.05), 0 1px 3px rgba(0, 0, 0, 0.3));
/* Alias onto Aura's theming hooks */
--aura-accent-color-light: var(--dialect-primary);
--aura-accent-color-dark: var(--dialect-primary);
--aura-background-color-light: var(--dialect-bg);
--aura-background-color-dark: var(--dialect-bg);
--aura-orange: var(--dialect-primary);
--aura-yellow: var(--dialect-secondary);
@@ -59,7 +70,7 @@ vaadin-app-layout::part(navbar) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 1px solid var(--dialect-border);
box-shadow: 0 1px 3px rgba(20, 23, 31, 0.05);
box-shadow: var(--dialect-navbar-shadow);
}
/* Sidebar: solid white, right divider separates it from the canvas */