containers / podman-desktop

Podman Desktop is the best free and open source tool to work with Containers and Kubernetes for developers. Get an intuitive and user-friendly interface to effortlessly build, manage, and deploy containers and Kubernetes — all from your desktop.
https://podman-desktop.io
Apache License 2.0
4.68k stars 296 forks source link

Light mode for terminals #7545

Closed deboer-tim closed 2 months ago

deboer-tim commented 3 months ago

Is your enhancement related to a problem? Please describe

We use terminals in many places, they should all support light mode.

Describe the solution you'd like

Define any missing colors in the color registry and move all terminals to use them.

Describe alternatives you've considered

No response

Additional context

No response

deboer-tim commented 3 months ago

Related: #7596

cdrage commented 3 months ago

For this issue, https://github.com/containers/podman-desktop/issues/7596 is regarding the editor but this issue is with regards to the terminal.

I'm assuming it'd make sense for custom terminal / editor themes to go in first, so that with light mode it could just be changing the configuration value of the theme for terminal / editor when the user toggles light / dark?

deboer-tim commented 3 months ago

For this issue, #7596 is regarding the editor but this issue is with regards to the terminal.

I'm assuming it'd make sense for custom terminal / editor themes to go in first, so that with light mode it could just be changing the configuration value of the theme for terminal / editor when the user toggles light / dark?

Probably? There might be a quicker path to (only) get light terminal/editor working, but agree it would be better to be able to point to theme.

cdrage commented 2 months ago

After some discussion with @deboer-tim on slack, maybe we should make this configureable as a Terminal Settings option in PD.

For example.. a user may want Podman Desktop to be light mode, but for readability have their terminals be dark.

I've created some preliminary code here: https://github.com/cdrage/podman-desktop/tree/terminal-theme

Here are the screenshots / video:

https://github.com/user-attachments/assets/311aafc2-823c-4f5a-90ed-fed6dc3e5b5a

Screenshot 2024-07-22 at 2 34 20 PM

@deboer-tim @ekidneyrh

What do you think about renaming this issue / making this a feature instead of a light mode support fix? So we may have terminals themes configurable.

deboer-tim commented 2 months ago

The issue was opened b/c we need light terminals, but I'm fine if we rename and deliver 'more' as long as it doesn't impact getting initial light mode too much.

And yes, I agree that some users will want to have (e.g.) light mode with dark terminals, and having terminal themes is semi-independent and useful by itself.

It feels like it needs a 'Follow Appearance setting' (likely the default) that would select the terminal theme based on the appearance setting.

Looking at the preliminary branch, I wonder in terms of technical delivery if this should be similar to/use the color registry, i.e. you can extend Podman Desktop with either regular themes or terminal themes using the same mechanism.

ekidneyrh commented 2 months ago

Do we know if the terminal we use atm follows a set colour scheme and where I could find it in the code?

+1 to the 'Follow Appearance setting' suggestion.

cdrage commented 2 months ago

@ekidneyrh @deboer-tim

Thank you two for your insight! I'm going to split this up into multiple issues so we can tackle this in smaller pieces / multiple PR's.

  1. Initial implementation (this issue)
  2. Have terminal theme "follow" appearance setting. We will need to make sure that we only "follow" ONLY if the user has not yet set the setting manually? (https://github.com/containers/podman-desktop/issues/8190)
  3. Refactor terminal technical debt (#8174)
cdrage commented 2 months ago

Do we know if the terminal we use atm follows a set colour scheme and where I could find it in the code?

+1 to the 'Follow Appearance setting' suggestion.

I have extracted the default colours from xterm.js and put it here: https://github.com/cdrage/podman-desktop/commit/0a57902055cfd96ca9482c9486ee592d768c3b28#diff-e67540f322a92657454ed7f3e2fbfeb3008024f4a2f4dbef9b0915b880bc9b1fR104 in order to keep track of the colour scheme. I'll have a PR up today