add themes and colors :D

This commit is contained in:
2026-03-03 12:12:41 -05:00
parent bae74d7a96
commit 3173fabfc1
9 changed files with 308 additions and 116 deletions

View File

@@ -10,7 +10,6 @@
#include "midi/midi.h"
#include "audio/audio.h"
#include "ui/ui_core.h"
#include "ui/ui_theme.h"
#include "ui/ui_widgets.h"
// [cpp]
@@ -94,9 +93,14 @@ struct AppState {
B32 show_about_window;
B32 show_confirm_dialog;
S32 settings_theme_sel;
S32 settings_theme_prev;
B32 settings_vsync;
B32 settings_autosave;
// Accent color selection
S32 accent_sel;
S32 accent_prev;
// Audio device selection
S32 audio_device_sel; // dropdown index: 0 = None, 1+ = device
S32 audio_device_prev; // previous selection for change detection
@@ -507,11 +511,19 @@ static void settings_window_content(void *user_data) {
AppState *app = (AppState *)user_data;
ui_label("SettingsLblTheme", "Theme");
static const char *theme_options[] = { "Dark", "Light", "Solarized" };
static const char *theme_options[] = { "Dark", "Light" };
CLAY(CLAY_ID("SettingsThemeWrap"),
.layout = { .sizing = { .width = CLAY_SIZING_FIXED(uis(180)), .height = CLAY_SIZING_FIT() } }
) {
ui_dropdown("SettingsTheme", theme_options, 3, &app->settings_theme_sel);
ui_dropdown("SettingsTheme", theme_options, 2, &app->settings_theme_sel);
}
ui_label("SettingsLblAccent", "Accent Color");
static const char *accent_options[] = { "Blue", "Turquoise", "Orange", "Purple", "Pink", "Red", "Green" };
CLAY(CLAY_ID("SettingsAccentWrap"),
.layout = { .sizing = { .width = CLAY_SIZING_FIXED(uis(180)), .height = CLAY_SIZING_FIT() } }
) {
ui_dropdown("SettingsAccent", accent_options, 7, &app->accent_sel);
}
ui_checkbox("SettingsVsync", "V-Sync", &app->settings_vsync);
@@ -575,11 +587,11 @@ static void settings_window_content(void *user_data) {
.padding = { uip(12), uip(12), 0, 0 },
.childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
},
.backgroundColor = Clay_Color{50, 50, 50, 255},
.backgroundColor = g_theme.disabled_bg,
.cornerRadius = CLAY_CORNER_RADIUS(uis(3))
) {
static Clay_TextElementConfig disabled_text = {};
disabled_text.textColor = Clay_Color{100, 100, 100, 255};
disabled_text.textColor = g_theme.disabled_text;
disabled_text.fontSize = FONT_SIZE_NORMAL;
disabled_text.wrapMode = CLAY_TEXT_WRAP_NONE;
CLAY_TEXT(CLAY_STRING("Play Test Tone"), &disabled_text);
@@ -705,6 +717,34 @@ static void do_frame(AppState *app) {
g_ui_scale = app->ui_scale;
renderer_set_font_scale(app->renderer, app->ui_scale);
// Handle theme change
if (app->settings_theme_sel != app->settings_theme_prev) {
ui_set_theme(app->settings_theme_sel);
ui_set_accent(app->accent_sel); // reapply accent on new base theme
app->settings_theme_prev = app->settings_theme_sel;
// Refresh all text configs with new theme colors
g_text_config_normal.textColor = g_theme.text;
g_text_config_title.textColor = g_theme.text;
g_text_config_dim.textColor = g_theme.text_dim;
ui_widgets_theme_changed();
// Update renderer clear color to match theme
renderer_set_clear_color(app->renderer,
g_theme.bg_dark.r / 255.f, g_theme.bg_dark.g / 255.f, g_theme.bg_dark.b / 255.f);
}
// Handle accent change
if (app->accent_sel != app->accent_prev) {
ui_set_accent(app->accent_sel);
app->accent_prev = app->accent_sel;
g_text_config_normal.textColor = g_theme.text;
g_text_config_title.textColor = g_theme.text;
g_text_config_dim.textColor = g_theme.text_dim;
ui_widgets_theme_changed();
}
// Update text configs when scale changes
if (g_text_config_normal.fontSize != FONT_SIZE_NORMAL) {
g_text_config_normal.fontSize = FONT_SIZE_NORMAL;
@@ -760,7 +800,7 @@ int main(int argc, char **argv) {
AudioEngine *audio = audio_create(platform_get_native_handle(window));
// Initialize UI (Clay)
ui_init_theme();
ui_set_theme(0);
UI_Context *ui = ui_create((F32)w, (F32)h);
ui_set_measure_text_fn(ui, renderer_measure_text, renderer);
init_text_configs();