zest_theme/theme/
dark.rs

1//! Dark theme — derived from Bryan's website palette.
2//!
3//! Source: `style.css` on the personal website.
4//!
5//! This is the **default theme** for zest applications.
6
7use crate::{Component, Container, CornerRadii, Palette, Spacing, Theme};
8use embedded_graphics::{mono_font::MonoFont, pixelcolor::Rgb888};
9
10// ---- Website palette ---------------------------------------------------
11const BG: Rgb888 = Rgb888::new(0x0e, 0x0e, 0x10);
12const BG_SUBTLE: Rgb888 = Rgb888::new(0x14, 0x14, 0x1a);
13const BG_ELEVATED: Rgb888 = Rgb888::new(0x1c, 0x1c, 0x24);
14const BORDER: Rgb888 = Rgb888::new(0x2a, 0x2a, 0x36);
15const BORDER_LIGHT: Rgb888 = Rgb888::new(0x1e, 0x1e, 0x28);
16const TEXT: Rgb888 = Rgb888::new(0xea, 0xe8, 0xe2);
17const TEXT_MUTED: Rgb888 = Rgb888::new(0x8a, 0x88, 0x80);
18const TEXT_FAINT: Rgb888 = Rgb888::new(0x42, 0x40, 0x4a);
19const ACCENT: Rgb888 = Rgb888::new(0xe0, 0x7b, 0x39);
20
21// ---- Semantic colors (chosen for visual harmony with the accent) ------
22const SUCCESS: Rgb888 = Rgb888::new(0x4c, 0xaf, 0x50); // tag-linux / tag-oss
23const DESTRUCTIVE: Rgb888 = Rgb888::new(0xff, 0x55, 0x55);
24const WARNING: Rgb888 = Rgb888::new(0xff, 0xb8, 0x6c);
25
26const DEFAULT_FONT: &MonoFont<'static> = &crate::font::FONT_ZEST_MONO;
27
28/// The default dark theme. Static const, lives in flash.
29pub const THEME: Theme<'static, Rgb888> = Theme {
30    background: Container {
31        base: BG,
32        on_base: TEXT,
33        divider: BORDER_LIGHT,
34    },
35    primary: Container {
36        base: BG_SUBTLE,
37        on_base: TEXT,
38        divider: BORDER,
39    },
40    secondary: Container {
41        base: BG_ELEVATED,
42        on_base: TEXT,
43        divider: BORDER,
44    },
45    accent: Component {
46        base: ACCENT,
47        pressed: Rgb888::new(0xc2, 0x6a, 0x2e),
48        disabled: TEXT_FAINT,
49        on_base: BG,
50        border: ACCENT,
51    },
52    button: Component {
53        base: BG_ELEVATED,
54        pressed: Rgb888::new(0x35, 0x35, 0x42),
55        disabled: BG_SUBTLE,
56        on_base: TEXT,
57        border: BORDER,
58    },
59    destructive: Component {
60        base: DESTRUCTIVE,
61        pressed: Rgb888::new(0xc8, 0x44, 0x44),
62        disabled: TEXT_FAINT,
63        on_base: BG,
64        border: DESTRUCTIVE,
65    },
66    success: Component {
67        base: SUCCESS,
68        pressed: Rgb888::new(0x3e, 0x8e, 0x41),
69        disabled: TEXT_FAINT,
70        on_base: BG,
71        border: SUCCESS,
72    },
73    warning: Component {
74        base: WARNING,
75        pressed: Rgb888::new(0xd9, 0x99, 0x55),
76        disabled: TEXT_FAINT,
77        on_base: BG,
78        border: WARNING,
79    },
80    text_button: Component {
81        base: BG,
82        pressed: BG_SUBTLE,
83        disabled: BG,
84        on_base: ACCENT,
85        border: BG, // invisible
86    },
87    icon_button: Component {
88        base: BG,
89        pressed: BG_SUBTLE,
90        disabled: BG,
91        on_base: TEXT_MUTED,
92        border: BG,
93    },
94    palette: Palette {
95        neutral_0: TEXT,
96        neutral_2: Rgb888::new(0xcc, 0xc8, 0xbe),
97        neutral_4: TEXT_MUTED,
98        neutral_5: Rgb888::new(0x6a, 0x68, 0x60),
99        neutral_6: TEXT_FAINT,
100        neutral_8: BORDER,
101        neutral_10: BG,
102        accent_blue: Rgb888::new(0x82, 0xcf, 0xff), // tag-bevy
103        accent_green: SUCCESS,
104        accent_red: DESTRUCTIVE,
105        accent_yellow: WARNING,
106        black: Rgb888::new(0x00, 0x00, 0x00),
107        white: Rgb888::new(0xff, 0xff, 0xff),
108    },
109    spacing: Spacing::default_small(),
110    corner_radii: CornerRadii::default_small(),
111    typography: crate::Typography::new(
112        &crate::font::FONT_ZEST_MONO_DISPLAY,
113        &crate::font::FONT_ZEST_MONO_HEADING,
114        DEFAULT_FONT,
115        &crate::font::FONT_ZEST_MONO_CAPTION,
116    ),
117    is_dark: true,
118    is_high_contrast: false,
119};
zest_theme/theme/dark.rs

zest_theme/theme/
dark.rs
