Skip to content

Support light mode in the Rerun viewer #3058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
edulecom opened this issue Aug 21, 2023 · 3 comments
Open

Support light mode in the Rerun viewer #3058

edulecom opened this issue Aug 21, 2023 · 3 comments
Assignees
Labels
📺 re_viewer affects re_viewer itself ui concerns graphical user interface
Milestone

Comments

@edulecom
Copy link

Hello,

I'm playing with .\rerun\crates\re_ui\examples\re_ui_example.rs and I'm trying to change the theme to light.
I have added only one line in the fn update:

    egui::TopBottomPanel::bottom("bottom_panel")
        .frame(self.re_ui.bottom_panel_frame())
        .show_animated(egui_ctx, self.bottom_panel, |ui| {
            ui.strong("Bottom panel");
            egui::widgets::global_dark_light_mode_buttons(ui); // this line is added
        });  

Effect is strange: only central panel applies the theme. It can be seen in an attached video.
Any help would very appreciated.

2023-08-21.16-20-55.mp4
@edulecom edulecom added other Generated by the "Other" issue template 👀 needs triage This issue needs to be triaged by the Rerun team labels Aug 21, 2023
@Wumpf
Copy link
Member

Wumpf commented Aug 22, 2023

The out of the box theme settings are bound to not work properly in rerun as we sadly change a lot of the theming colors in Rerun on-the-fly. At least I suspect that's what's most of the issue here.

That said, (re)adding a light mode is something we want to do eventually.
Are you just trying out things or is a Rerun light theme something you'd like to have as well?

@edulecom
Copy link
Author

Thank you for your response. I'm currently in the process of developing an app using re_ui, and while the absence of a light mode isn't a critical issue, having that feature would certainly be a welcome addition.

@Wumpf Wumpf changed the title setting light mode Support light mode in re_ui/re_viewer Sep 10, 2023
@Wumpf Wumpf added ui concerns graphical user interface 📺 re_viewer affects re_viewer itself and removed other Generated by the "Other" issue template 👀 needs triage This issue needs to be triaged by the Rerun team labels Sep 10, 2023
@abey79 abey79 changed the title Support light mode in re_ui/re_viewer Support light mode in the Rerun viewer Dec 5, 2024
abey79 added a commit that referenced this issue Dec 6, 2024
### Related

* Part of/related to #3133
* Part of #3058

### What

This PR refactors the design token as follows:

- All colors from `design_tokens.json` are now loaded in a big table at
startup.
- Colors are now referred to using the new the `ColorToken`, which is
basically an index into this table.
- Removed all of the color aliases stuff. This was only partially used
and very cumbersome to update. The `design_token.rs` file is the _de
facto_ source of truth of semantic aliasing for colors.
emilk added a commit that referenced this issue May 13, 2025
### Related
* Prepare for #3058
* Broken out from #9953

### What
Prepare to support different design token structs for light mode and
dark mode.
emilk added a commit that referenced this issue May 13, 2025
### Related
* Prepare for #3058
* Broken out from #9953

### What
In most places where we have both an icon and some text, make the icon
color match the text color.

Part of this is making sure all icons are full white.

This is gonna make light mode much easier to implement.

The differences in the snapshot tests are minor.
grtlr pushed a commit that referenced this issue May 13, 2025
### Related
* Prepare for #3058
* Broken out from #9953

### What
Prepare to support different design token structs for light mode and
dark mode.
grtlr pushed a commit that referenced this issue May 13, 2025
### Related
* Prepare for #3058
* Broken out from #9953

### What
In most places where we have both an icon and some text, make the icon
color match the text color.

Part of this is making sure all icons are full white.

This is gonna make light mode much easier to implement.

The differences in the snapshot tests are minor.
@emilk emilk added this to the 0.24.0 milestone May 14, 2025
@emilk
Copy link
Member

emilk commented May 14, 2025

Most of the work has landed in #9953 but there are a few things left to do:

  • Feature-complete:
    • Fix table headers (e.g. catalogs)
    • Fix breadcrumbs ui
  • Stabilization
    • Remove the experimental warning
    • Switch the default theme to follow the system
    • Add light mode snapshot tests
    • Make sure ThemePreference is saved/restored properly

emilk added a commit that referenced this issue May 14, 2025
### Related
* Closes #9793 which this PR is
based on
* Does most of #3058

<img width="265" alt="image"
src="https://github.com/user-attachments/assets/606b2876-33da-473e-9bec-7b02e617af30"
/>

## How
Via a plethora of ugly hacks:

* Added a new `design_tokens_light.json`
* A bunch of `match theme` statements here and there

## TODO
* [x] Break out unrelated refactor commits
* [x] Fix selection color
* [x] Fix text color of selected list item
* [x] Add a warning about it being experimental

## Future work
* Fix table headers (e.g. catalogs)
* Check all other colors
* Add light mode snapshot tests

---------

Co-authored-by: gavrelina <[email protected]>
@emilk emilk self-assigned this May 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📺 re_viewer affects re_viewer itself ui concerns graphical user interface
Projects
None yet
Development

No branches or pull requests

3 participants