migrations/egui
1
0
Fork 0
mirror of https://github.com/emilk/egui.git synced 2026-08-31 13:50:04 -04:00
Code Activity

Make Light & Dark Visuals Customizable When Following The System Theme (#4744)

Browse Source 
* Closes <https://github.com/emilk/egui/issues/4490>
* [x] I have followed the instructions in the PR template

---

Unfortunately, this PR contains a bunch of breaking changes because
`Context` no longer has one style, but two. I could try to add some of
the methods back if that's desired.

The most subtle change is probably that `style_mut` mutates both the
dark and the light style (which from the usage in egui itself felt like
the right choice but might be surprising to users).

I decided to deviate a bit from the data structure suggested in the
linked issue.
Instead of this:
```rust
pub theme: Theme, // Dark or Light
pub follow_system_theme: bool, // Change [`Self::theme`] based on `RawInput::system_theme`?
```

I decided to add a `ThemePreference` enum and track the current system
theme separately.
This has a couple of benefits:
* The user's theme choice is not magically overwritten on the next
frame.
* A widget for changing the theme preference only needs to know the
`ThemePreference` and not two values.
* Persisting the `theme_preference` is fine (as opposed to persisting
the `theme` field which may actually be the system theme).

The `small_toggle_button` currently only toggles between dark and light
(so you can never get back to following the system). I think it's easy
to improve on this in a follow-up PR :)
I made the function `pub(crate)` for now because it should eventually be
a method on `ThemePreference`, not `Theme`.

To showcase the new capabilities I added a new example that uses
different "accent" colors in dark and light mode:

<img
src="https://github.com/user-attachments/assets/0bf728c6-2720-47b0-a908-18bd250d15a6"
width="250" alt="A screenshot of egui's widget gallery demo in dark mode
using a purple accent color instead of the default blue accent">

<img
src="https://github.com/user-attachments/assets/e816b380-3e59-4f11-b841-8c20285988d6"
width="250" alt="A screenshot of egui's widget gallery demo in light
mode using a green accent color instead of the default blue accent">

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
This commit is contained in:
Tau Gärtli
2024-09-11 17:52:53 +02:00
committed by GitHub
parent f4697bc007
commit b5627c7d40
22 changed files with 382 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
crates/egui_demo_lib/src/demo/scrolling.rs
View File

@@ -1,6 +1,6 @@
use egui::{
pos2, scroll_area::ScrollBarVisibility, Align, Align2, Color32, DragValue, NumExt, Rect,
ScrollArea, Sense, Slider, Style, TextStyle, TextWrapMode, Ui, Vec2, Widget,
ScrollArea, Sense, Slider, TextStyle, TextWrapMode, Ui, Vec2, Widget,
};
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
@@ -119,9 +119,9 @@ impl ScrollAppearance {
visibility,
} = self;
let mut style: Style = (*ui.ctx().style()).clone();
let mut scroll = ui.ctx().style().spacing.scroll;
style.spacing.scroll.ui(ui);
scroll.ui(ui);
ui.add_space(8.0);
@@ -135,8 +135,7 @@ impl ScrollAppearance {
ui.add_space(8.0);
ui.ctx().set_style(style.clone());
ui.set_style(style);
ui.ctx().all_styles_mut(|s| s.spacing.scroll = scroll);
ui.separator();