#pragma once // Design tokens for ui-lvgl -- the one place colours, spacing and type live -- // and the rules every widget follows (install() below). // // The accent (amber by default; Settings > Display > Accent colour) // on near-black, soft corners. The accent means one of three things: // - ACCENT fill, ON_ACCENT text: the primary action of a screen or popup // (Download, Install, Save, Go) -- stylePrimary() in UITask.cpp -- and // something selected / on (a tab, a chip, a segment, a mode that is // running, own bubbles) -- styleSelected(); // - ACCENT text or icon: a name, a count, a background mode, a value. // No accent mixed toward black for "selected": it came out brown. // Everything else is BG / SURFACE / SURFACE_2 with TEXT or TEXT_MUTED. // // Two themes, dark (the default) and light (Settings > Display > Theme). The // colours are set once, before anything is built (setLight()), so changing // the theme restarts the device. The light one isn't the dark one inverted: // something selected is a tint of the accent with the accent's text (SEL_*), // not a full accent fill -- that stays for the primary action and own // bubbles -- values read in grey, and popups and banners have a quiet edge. #include // lv_theme_t's fields, to layer a theme namespace theme { // Colours (0xRRGGBB), the dark theme's; setLight() sets the light one's. static uint32_t BG = 0x0B0B0D; // screen background static uint32_t SURFACE = 0x1A1A1F; // cards, rows, bubbles (incoming) static uint32_t SURFACE_2 = 0x27272E; // pressed / raised static uint32_t ACCENT = 0xFFB000; // primary actions, names, badges, modes (setAccent) static uint32_t ON_ACCENT = 0x0B0B0D; // text and icons on an ACCENT fill static uint32_t TEXT = 0xF2EEE6; static uint32_t TEXT_MUTED= 0x9A958C; static uint32_t OK = 0x6FCF6F; // delivered / relayed static uint32_t FAIL = 0xE5534B; // not delivered // Set from those by setAccent(): static uint32_t SEL_BG = 0xFFB000; // something selected / on: a tab, a segment, a tile static uint32_t SEL_FG = 0x0B0B0D; // its text and icons static uint32_t SEL_PRESS = 0xC08400; // it pressed static uint32_t VALUE = 0xFFB000; // a setting's value (a choice, a typed value) static uint32_t EDGE = 0xFFB000; // the edge of a popup, the banner, the toast static bool s_light = false; // Spacing (px) static const int PAD = 8; static const int GAP = 6; static const int RADIUS = 10; // cards, rows and everything tapped: buttons, tabs, choices, chips static const int RADIUS_SM = 6; // small drawn cells inside those (chart backgrounds, captions) static const int STATUS_H = 22; // top status bar (Home, the map: screens without a title bar) static const int ROW_H = 44; // list row (touch target) // A screen's title bar, at the top in place of the status bar: back, the // title, the screen's actions, then the time and battery. static const int APPBAR_H = 40; static const int BAR_BTN_H = 32; // back and the actions in it static const int TAB_H = 34; // a screen's tabs (segmented), the first thing under the title bar // Type -- Noto Sans, generated by fonts/generate.sh (declared in lv_conf.h). // ui_font_40 holds digits / ':' / '-' / '.' only (clock, timer, stopwatch). #define THEME_FONT_SMALL (&ui_font_12) #define THEME_FONT_BODY (&ui_font_14) #define THEME_FONT_TITLE (&ui_font_16) #define THEME_FONT_LARGE (&ui_font_20) #define THEME_FONT_CLOCK (&ui_font_40) // Status bar icons, refitted to one size (fonts/status_icons.py); any other // character falls back to ui_font_12. #define THEME_FONT_ICONS (&ui_icons_14) // Extra FontAwesome glyphs baked into ui_font_12..20 beyond LVGL's LV_SYMBOL_*. #define UI_SYMBOL_STAR "\xEF\x80\x85" // U+F005, favourite #define UI_SYMBOL_MAP "\xEF\x89\xB9" // U+F279 #define UI_SYMBOL_USERS "\xEF\x83\x80" // U+F0C0, Nearby #define UI_SYMBOL_COMPASS "\xEF\x85\x8E" // U+F14E, Navigate #define UI_SYMBOL_FLAG "\xEF\x80\xA4" // U+F024, waypoint #define UI_SYMBOL_PIN "\xEF\x8F\x85" // U+F3C5, mark here (a place on the map) #define UI_SYMBOL_TACK "\xEF\x82\x8D" // U+F08D, thumbtack: pin to the Home dial #define UI_SYMBOL_CLOCK "\xEF\x80\x97" // U+F017, Clock tools #define UI_SYMBOL_STOPWATCH "\xEF\x8B\xB2" // U+F2F2 #define UI_SYMBOL_RADIO "\xEF\x94\x99" // U+F519, broadcast tower #define UI_SYMBOL_CHART "\xEF\x82\x80" // U+F080, diagnostics #define UI_SYMBOL_KEY "\xEF\x82\x84" // U+F084, admin #define UI_SYMBOL_ROUTE "\xEF\x93\x97" // U+F4D7, trail #define UI_SYMBOL_MUTE "\xEF\x9A\xA9" // U+F6A9, muted (speaker with a cross) #define UI_SYMBOL_LOCK "\xEF\x80\xA3" // U+F023, quick panel: lock the screen #define UI_SYMBOL_SUN "\xEF\x86\x85" // U+F185, quick panel: brightness #define UI_SYMBOL_BULB "\xEF\x83\xAB" // U+F0EB, Flashlight // Accent choices: on the dark theme, and deeper on the light one, to read // as text on white and take white text on it. struct Accent { const char* name; uint32_t col, light; }; static const Accent ACCENTS[] = { { "Amber", 0xFFB000, 0xC77800 }, { "Orange", 0xFF7A2E, 0xD9561A }, { "Coral", 0xFF6B7A, 0xD9455A }, { "Violet", 0xB18CFF, 0x7A55E0 }, { "Cyan", 0x3CC8E8, 0x0E8AA8 }, { "Lime", 0xB5E04A, 0x5E8A12 }, }; static const int ACCENT_COUNT = sizeof(ACCENTS) / sizeof(ACCENTS[0]); static int s_accent = 0; // `fg` at `pct` % over `bg`, worked out once: an opaque fill in the colour // a translucent one would blend to, without blending it every frame. static uint32_t mix(uint32_t fg, uint32_t bg, uint32_t pct) { uint32_t out = 0; for (int sh = 0; sh <= 16; sh += 8) { uint32_t c = (fg >> sh) & 0xFF, b = (bg >> sh) & 0xFF; out |= ((c * pct + b * (100 - pct)) / 100) << sh; } return out; } static void setAccent(int idx) { if (idx < 0 || idx >= ACCENT_COUNT) idx = 0; s_accent = idx; ACCENT = s_light ? ACCENTS[idx].light : ACCENTS[idx].col; if (s_light) { SEL_BG = mix(ACCENT, SURFACE, 20); SEL_FG = mix(ACCENT, 0x000000, 78); SEL_PRESS = mix(ACCENT, SURFACE, 32); VALUE = TEXT_MUTED; EDGE = SURFACE_2; } else { SEL_BG = ACCENT; SEL_FG = ON_ACCENT; SEL_PRESS = mix(ACCENT, BG, 75); VALUE = ACCENT; EDGE = ACCENT; } } // Before anything is built (the colours are copied into what is). static void setLight(bool on) { s_light = on; if (on) { // Neutral greys the panel's RGB565 keeps neutral (0xF3F3F1 came out pink). BG = 0xEFEFEF; SURFACE = 0xFFFFFF; SURFACE_2 = 0xDEDEDE; ON_ACCENT = 0xFFFFFF; TEXT = 0x1C1C1C; TEXT_MUTED = 0x6B6D6B; OK = 0x2E9A3E; FAIL = 0xD23A32; } setAccent(s_accent); } // Over LVGL's default theme, for every widget: a checked button is // "selected" (SEL_BG, SEL_FG text), buttons // have the card radius and give a little under the finger (the default // theme's transitions animate it both ways). Scrollbars are thin and hug // the edge, inside the padding every panel and list has, instead of the // default's 5 px bar 7 px in, which ran over right-aligned text. static lv_theme_t s_theme; static lv_style_t s_btn, s_press, s_checked, s_sbar; static void applyTheme(lv_theme_t* th, lv_obj_t* obj) { (void)th; lv_obj_add_style(obj, &s_sbar, LV_PART_SCROLLBAR); if (lv_obj_check_type(obj, &lv_button_class)) { lv_obj_add_style(obj, &s_btn, 0); lv_obj_add_style(obj, &s_press, LV_STATE_PRESSED); lv_obj_add_style(obj, &s_checked, LV_STATE_CHECKED); } } // (Re)builds the default theme in the current accent with this layer over it. static void install(lv_display_t* disp) { static bool styled = false; if (!styled) { styled = true; lv_style_init(&s_btn); lv_style_set_radius(&s_btn, RADIUS); lv_style_set_shadow_width(&s_btn, 0); lv_style_init(&s_press); lv_style_set_transform_width(&s_press, -2); lv_style_set_transform_height(&s_press, -2); lv_style_init(&s_checked); lv_style_init(&s_sbar); lv_style_set_width(&s_sbar, 3); lv_style_set_pad_right(&s_sbar, 2); // vertical bar: 2 px off the edge lv_style_set_pad_bottom(&s_sbar, 2); // horizontal bar likewise lv_style_set_pad_top(&s_sbar, RADIUS / 2); lv_style_set_pad_left(&s_sbar, RADIUS / 2); } lv_style_set_bg_color(&s_checked, lv_color_hex(SEL_BG)); lv_style_set_text_color(&s_checked, lv_color_hex(SEL_FG)); lv_theme_t* base = lv_theme_default_init(disp, lv_color_hex(ACCENT), lv_color_hex(ACCENT), !s_light, THEME_FONT_BODY); s_theme = *base; lv_theme_set_parent(&s_theme, base); lv_theme_set_apply_cb(&s_theme, applyTheme); lv_display_set_theme(disp, &s_theme); lv_obj_report_style_change(&s_checked); } }