maxamundsen/autosample
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update theme to look gooder

Browse Source
This commit is contained in:
Max Amundsen
2026-03-04 00:36:18 -05:00
parent af33cf268a
commit b01fa2261a
3 changed files with 53 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/main.cpp
View File

@@ -134,12 +134,17 @@ struct AppState {
static void build_browser_panel(B32 show) {
if (!show) return;
Clay_Color bp_top = g_theme.bg_medium;
Clay_Color bp_bot = {(float)Max((int)bp_top.r-8,0), (float)Max((int)bp_top.g-8,0), (float)Max((int)bp_top.b-8,0), 255};
CustomGradientData *bp_grad = alloc_gradient(bp_top, bp_bot);
CLAY(CLAY_ID("BrowserPanel"),
.layout = {
.sizing = { .width = CLAY_SIZING_FIXED(uis(200)), .height = CLAY_SIZING_GROW() },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = g_theme.bg_medium,
.backgroundColor = bp_top,
.custom = { .customData = bp_grad },
.border = { .color = g_theme.border, .width = { .right = 1 } }
) {
{
@@ -167,12 +172,17 @@ static void build_browser_panel(B32 show) {
}
static void build_main_panel(AppState *app) {
Clay_Color mp_top = g_theme.bg_light;
Clay_Color mp_bot = {(float)Max((int)mp_top.r-8,0), (float)Max((int)mp_top.g-8,0), (float)Max((int)mp_top.b-8,0), 255};
CustomGradientData *mp_grad = alloc_gradient(mp_top, mp_bot);
CLAY(CLAY_ID("MainPanel"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = g_theme.bg_light
.backgroundColor = mp_top,
.custom = { .customData = mp_grad }
) {
{
S32 sel = 0;
@@ -462,12 +472,17 @@ static void build_main_panel(AppState *app) {
static void build_right_panel(AppState *app) {
static const char *right_tabs[] = { "Properties", "MIDI Devices" };
Clay_Color rp_top = g_theme.bg_medium;
Clay_Color rp_bot = {(float)Max((int)rp_top.r-8,0), (float)Max((int)rp_top.g-8,0), (float)Max((int)rp_top.b-8,0), 255};
CustomGradientData *rp_grad = alloc_gradient(rp_top, rp_bot);
CLAY(CLAY_ID("RightPanel"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = g_theme.bg_medium
.backgroundColor = rp_top,
.custom = { .customData = rp_grad }
) {
ui_tab_bar("RightTabs", right_tabs, 2, &app->right_panel_tab);
@@ -660,12 +675,17 @@ static void build_right_panel(AppState *app) {
static void build_log_panel(B32 show) {
if (!show) return;
Clay_Color lp_top = g_theme.bg_medium;
Clay_Color lp_bot = {(float)Max((int)lp_top.r-8,0), (float)Max((int)lp_top.g-8,0), (float)Max((int)lp_top.b-8,0), 255};
CustomGradientData *lp_grad = alloc_gradient(lp_top, lp_bot);
CLAY(CLAY_ID("LogPanel"),
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(uis(180)) },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
.backgroundColor = g_theme.bg_medium,
.backgroundColor = lp_top,
.custom = { .customData = lp_grad },
.border = { .color = g_theme.border, .width = { .top = 1 } }
) {
{

56
src/ui/ui_core.cpp
View File

@@ -27,51 +27,51 @@ void ui_set_theme(S32 theme_id) {
switch (theme_id) {
default:
case 0: // Dark
g_theme.bg_dark = Clay_Color{ 30, 30, 33, 255};
g_theme.bg_medium = Clay_Color{ 41, 41, 43, 255};
g_theme.bg_light = Clay_Color{ 51, 51, 56, 255};
g_theme.bg_lighter = Clay_Color{ 56, 56, 61, 255};
g_theme.border = Clay_Color{ 56, 56, 61, 255};
g_theme.text = Clay_Color{224, 224, 224, 255};
g_theme.text_dim = Clay_Color{112, 112, 112, 255};
g_theme.bg_dark = Clay_Color{ 26, 26, 26, 255};
g_theme.bg_medium = Clay_Color{ 36, 36, 36, 255};
g_theme.bg_light = Clay_Color{ 46, 46, 46, 255};
g_theme.bg_lighter = Clay_Color{ 54, 54, 54, 255};
g_theme.border = Clay_Color{ 52, 52, 52, 255};
g_theme.text = Clay_Color{220, 220, 220, 255};
g_theme.text_dim = Clay_Color{105, 105, 105, 255};
g_theme.accent = Clay_Color{ 87, 138, 176, 255};
g_theme.accent_hover = Clay_Color{102, 153, 191, 255};
g_theme.button_text = Clay_Color{224, 224, 224, 255};
g_theme.disabled_bg = Clay_Color{ 50, 50, 50, 255};
g_theme.disabled_text = Clay_Color{100, 100, 100, 255};
g_theme.title_bar = Clay_Color{ 26, 26, 28, 255};
g_theme.scrollbar_bg = Clay_Color{ 26, 26, 28, 255};
g_theme.scrollbar_grab = Clay_Color{ 61, 61, 66, 255};
g_theme.disabled_bg = Clay_Color{ 44, 44, 44, 255};
g_theme.disabled_text = Clay_Color{ 90, 90, 90, 255};
g_theme.title_bar = Clay_Color{ 22, 22, 22, 255};
g_theme.scrollbar_bg = Clay_Color{ 22, 22, 22, 255};
g_theme.scrollbar_grab = Clay_Color{ 58, 58, 58, 255};
g_theme.shadow = Clay_Color{ 0, 0, 0, 30};
g_theme.tab_active_top = Clay_Color{ 70, 120, 160, 255};
g_theme.tab_active_bottom= Clay_Color{ 30, 55, 80, 255};
g_theme.tab_inactive = Clay_Color{ 45, 45, 48, 255};
g_theme.tab_inactive_hover= Clay_Color{ 55, 55, 60, 255};
g_theme.tab_inactive = Clay_Color{ 40, 40, 40, 255};
g_theme.tab_inactive_hover= Clay_Color{ 50, 50, 50, 255};
g_theme.tab_text = Clay_Color{240, 240, 240, 255};
g_theme.corner_radius = 4.0f;
break;
case 1: // Light
g_theme.bg_dark = Clay_Color{210, 210, 215, 255};
g_theme.bg_medium = Clay_Color{230, 230, 233, 255};
g_theme.bg_light = Clay_Color{242, 242, 245, 255};
g_theme.bg_lighter = Clay_Color{248, 248, 250, 255};
g_theme.border = Clay_Color{190, 190, 195, 255};
g_theme.text = Clay_Color{ 30, 30, 35, 255};
g_theme.text_dim = Clay_Color{120, 120, 130, 255};
g_theme.bg_dark = Clay_Color{195, 193, 190, 255};
g_theme.bg_medium = Clay_Color{212, 210, 207, 255};
g_theme.bg_light = Clay_Color{225, 223, 220, 255};
g_theme.bg_lighter = Clay_Color{232, 230, 227, 255};
g_theme.border = Clay_Color{178, 176, 173, 255};
g_theme.text = Clay_Color{ 35, 33, 30, 255};
g_theme.text_dim = Clay_Color{115, 113, 108, 255};
g_theme.accent = Clay_Color{ 50, 110, 170, 255};
g_theme.accent_hover = Clay_Color{ 65, 125, 185, 255};
g_theme.button_text = Clay_Color{255, 255, 255, 255};
g_theme.disabled_bg = Clay_Color{195, 195, 200, 255};
g_theme.disabled_text = Clay_Color{150, 150, 155, 255};
g_theme.title_bar = Clay_Color{220, 220, 225, 255};
g_theme.scrollbar_bg = Clay_Color{220, 220, 225, 255};
g_theme.scrollbar_grab = Clay_Color{180, 180, 185, 255};
g_theme.disabled_bg = Clay_Color{185, 183, 180, 255};
g_theme.disabled_text = Clay_Color{145, 143, 140, 255};
g_theme.title_bar = Clay_Color{202, 200, 197, 255};
g_theme.scrollbar_bg = Clay_Color{202, 200, 197, 255};
g_theme.scrollbar_grab = Clay_Color{168, 166, 163, 255};
g_theme.shadow = Clay_Color{ 0, 0, 0, 18};
g_theme.tab_active_top = Clay_Color{ 70, 130, 180, 255};
g_theme.tab_active_bottom= Clay_Color{ 50, 100, 150, 255};
g_theme.tab_inactive = Clay_Color{218, 218, 222, 255};
g_theme.tab_inactive_hover= Clay_Color{205, 205, 210, 255};
g_theme.tab_inactive = Clay_Color{205, 203, 200, 255};
g_theme.tab_inactive_hover= Clay_Color{195, 193, 190, 255};
g_theme.tab_text = Clay_Color{255, 255, 255, 255};
g_theme.corner_radius = 4.0f;
break;

2
src/ui/ui_widgets.cpp
View File

@@ -1332,7 +1332,7 @@ S32 ui_tab_bar(const char *id, const char **labels, S32 count, S32 *selected) {
CLAY(row_eid,
.layout = {
.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() },
.padding = { 0, 0, uip(4), 0 },
.padding = { 0, 0, 0, 0 },
.layoutDirection = CLAY_LEFT_TO_RIGHT,
},
.backgroundColor = g_theme.bg_medium,