egui Theming: Custom Colors, Rounding & Spacing | Rust GUI Ep 26
1views
009:21
T
Taught by Celeste AI - AI Coding Coach
View on YouTubeDescription
Build a Theme Editor with live preview of custom dark/light themes, accent colors, rounding, and spacing in
egui! Learn Visuals, Style, ctx.set_style(), Rounding, and Color32.
Student code: https://github.com/GoCelesteAI/egui_theming_styles/tree/main
What You'll Learn:
- Visuals::dark() and Visuals::light() for base themes
- visuals.selection.bg_fill for custom accent color
- ctx.style().clone() to modify the current style
- style.spacing.item_spacing for widget spacing
- Rounding::same() and corner_radius for rounded widgets
- ctx.set_style() to apply changes every frame
- Color32::from_rgb() for accent color conversion
- color_edit_button_rgb for color picking
- SidePanel with theme controls + CentralPanel with live preview
- Slider, checkbox, and button widgets responding to theme
Timestamps:
0:00 Intro
0:12 App Preview
0:22 What We're Building
0:54 Create Project & Cargo.toml
1:26 main.rs — App Entry Point
2:06 app.rs — MyApp Struct with Theme Fields
2:46 Default Implementation
3:18 impl App — Visuals Dark/Light Toggle
3:52 Custom Accent Color with Color32
4:24 Style Clone, Spacing & Rounding
5:06 ctx.set_style() to Apply Theme
5:32 SidePanel — Theme Controls
6:22 CentralPanel — Preview Widgets
7:02 cargo build & Neo-tree Browse
7:26 App Demo
8:18 Recap
8:58 Next Episode
Series: Learn egui in Neovim
Part of a 36-episode series teaching Rust GUI development with egui, coded entirely in Neovim with Neo-tree.
Tags: egui, rust, gui, theming, styles, visuals, dark mode, custom colors, rounding, spacing, tutorial,
neovim, theme editor, set_style
Tags
eguirustguithemingstylesvisualsdark modecustom colorsroundingspacingtutorialneovimtheme editorset_style