fix: further improve coloring for different themes

Uses the correct `textual` color for the ansi colors.
Adjusts the terminal CSS to better handle light themes.
Adds an option to manually specify that the `terminal_derived_theme` is
a `light` theme.

Author: kainctl

docs/customization.md

@@ -1,6 +1,6 @@
 # Customization
 
-As eluded to in the [Getting Started section](./index.md),
+As alluded to in the [Getting Started section](./index.md),
 `isd` is _very_ configurable.
 Almost _all_ keybindings and commands are configurable!
 During start-up `isd` will derive the settings from a global, a local configuration file and environment variables.
@@ -68,6 +68,7 @@ Just jump to the sections that sound interesting:
 - [Journal Pager](#journal-pager)
 - [Journal Pager Arguments](#journal-pager-arguments)
 - [Theme](#theme)
+- [terminal-derived-theme dark/light toggle](#darklight-terminal-derived-theme-mode)
 - [Layout](#layout)
 - [Keybindings](#keybindings)
     - [Generic Keybindings](#generic-keybindings)
@@ -186,20 +187,28 @@ These values can be adjusted according to personal preference.
 You can _temporarily_ view the themes via the `Change theme` command.
 But to persist the changes you _must_ update the configuration file.
 
-<!-- If you are familiar with theming your terminal via -->
-<!-- [ansi escape codes](https://github.com/tinted-theming/home) -->
-<!-- you --> 
+### Dark/Light `terminal-derived-theme` Mode
+
+{{ config_block(11) }}
+
+Assumes that the `terminal_derived_theme` is a `dark` theme by default.
+Only set this value to `False` if your terminal derived theme
+is `light`. There could be a different `light_terminal_derived_theme`
+option but since most users use a dark theme, I opted for an additional configuration option.
+I am hoping that this is less confusing than the alternative `light/dark_terminal_derived_theme`.
+Especially, since the color adjustments are minor.
+If you set this option, please let me know!
 
 ### Layout
 
 `isd` allows you to customize the layout.
 Currently, the relative heights between the search results and preview widgets
 can be adjusted:
 
-{{ config_block(11) }}
-
 {{ config_block(12) }}
 
+{{ config_block(13) }}
+
 By default the preview widget is about twice as tall as the search results widget.
 
 ### Keybindings
@@ -231,25 +240,25 @@ for keybindings:
 
 #### Generic Keybindings
 
-{{ config_block(13) }}
+{{ config_block(14) }}
 
 See [Keybindings](#keybindings) for more general information.
 
 #### Main Keybindings
 
-{{ config_block(14) }}
+{{ config_block(15) }}
 
 See [Keybindings](#keybindings) for more general information.
 
 #### Navigation Keybindings
 
-{{ config_block(15) }}
+{{ config_block(16) }}
 
 See [Keybindings](#keybindings) for more general information.
 
 #### `systemctl` Keybindings
 
-{{ config_block(16) }}
+{{ config_block(17) }}
 
 This allows you to configure the `systemctl` commands and keybindings.
 It is important to note that the `command` key may contain spaces (like `edit --runtime`)
@@ -273,21 +282,21 @@ the [shell injection section](security.md/#shell-injection).
 
 ### Pager Arguments
 
-{{ config_block(17) }}
+{{ config_block(18) }}
 
 If you have to customize the pager arguments for a common pager,
 please open an issue!
 
 ### Journal Pager Arguments
 
-{{ config_block(18) }}
+{{ config_block(19) }}
 
 If you have to customize the pager arguments for a common pager,
 please open an issue!
 
 ### Maximum Preview Lines
 
-{{ config_block(19) }}
+{{ config_block(20) }}
 
 This value can mainly be configured if opening the journal preview
 window takes too long. Though, it should usually not be required

src/isd_tui/derive_terminal_theme.py

@@ -83,10 +83,12 @@ def query_foreground_color() -> Optional[str]:
     return parse_rgb(response)
 
 
-def derive_textual_theme() -> Optional[Theme]:
+def derive_textual_theme(is_dark: bool = True) -> Optional[Theme]:
     """
     Derive a textual theme by quering the current terminal
     via OSC escape codes.
+    By default, assume that the resulting `Theme` is a dark theme (`is_dark`).
+    If it is a `dark` or `light` theme cannot be derived from the terminal itself.
 
     Here, we assume that an iTerm2 color scheme (https://github.com/mbadolato/iTerm2-Color-Schemes) is used.
     This function may return `None` if the theme could not be derived.
@@ -124,4 +126,5 @@ def derive_textual_theme() -> Optional[Theme]:
         surface=bg,
         panel=iterm_colors[8],
         boost=iterm_colors[0],
+        dark=True,
     )

src/isd_tui/dom.tcss

@@ -69,42 +69,45 @@ Preview:focus {
   background: $boost 20%;
 }
 
-
-#unit-selection>.selection-list--button {
-  background: $boost 50% !important;
+CustomSelectionList>.option-list--separator {
+  background: $primary;
 }
 
-#unit-selection>.option-list--separator {
-  background: $primary;
+CustomSelectionList:dark>.option-list--option-highlighted {
+  background: $surface-lighten-1;
+}
+CustomSelectionList:light>.option-list--option-highlighted {
+  background: $surface-darken-1;
 }
 
-#unit-selection>.option-list--option-hover {
-  background: $boost 50%;
+CustomSelectionList:dark>.option-list--option-hover {
+  background: $surface-lighten-1 50%;
+}
+CustomSelectionList:light>.option-list--option-hover {
+  background: $surface-darken-1 75%;
 }
 
-/* Even if it isn't in focus, keep the highlight up */
-OptionList>.option-list--option-highlighted {
-  background: $primary 25%;
+/* Button options */
+CustomSelectionList:focus>.selection-list--button-highlighted,
+CustomSelectionList>.selection-list--button-highlighted,
+CustomSelectionList>.selection-list--button-selected-highlighted {
+  color: $accent;
+  background: $accent;
 }
 
+CustomSelectionList>.selection-list--button {
+  background: $boost 50% !important;
+}
 
-#unit-selection>.selection-list--button {
+CustomSelectionList>.selection-list--button {
   color: $primary;
   background: $primary;
 }
 
-#unit-selection:focus>.selection-list--button,
-#unit-selection>.selection-list--button-selected,
-#unit-selection:focus>.selection-list--button-selected,
-{
-color: $primary;
-background: $accent;
-}
-
-#unit-selection:focus>.selection-list--button-highlighted,
-#unit-selection>.selection-list--button-highlighted,
-#unit-selection>.selection-list--button-selected-highlighted {
-  color: $accent;
+CustomSelectionList:focus>.selection-list--button,
+CustomSelectionList>.selection-list--button-selected,
+CustomSelectionList:focus>.selection-list--button-selected {
+  color: $primary;
   background: $accent;
 }
 
@@ -129,4 +132,4 @@ MainScreen OptionList {
 
 * {
   scrollbar-size: 0 1;
-}
+}

src/isd_tui/isd.py

@@ -836,6 +836,16 @@ class Settings(BaseSettings):
         default=Theme("textual-dark"), description="The theme of the application."
     )
 
+    terminal_derived_theme_is_dark: bool = Field(
+        default=True,
+        description=dedent("""\
+            This option is used to set whether the
+            `terminal_derived_theme` is a `dark` (default) or `light` theme.
+            This theme information is used to tune some colors
+            to ensure good legibility of text in different widgets.
+        """),
+    )
+
     search_results_height_fraction: PositiveInt = Field(
         default=1, description="Relative height compared to preview height."
     )
@@ -1278,10 +1288,18 @@ def render_state(
 
         text = Text(unit)
         if highlight_indices is not None and len(highlight_indices) > 0:
-            text.stylize("dim")
             for idx in highlight_indices:
-                text.stylize(Style(dim=False, bold=True), start=idx, end=idx + 1)
+                text.stylize(
+                    Style(bold=True),
+                    start=idx,
+                    end=idx + 1,
+                )
 
+        # One limitation is that `style` passes colors like:
+        # `auto 75%` for the _muted_ text.
+        # If the style is simply "injected" as a string, nothing
+        # "bad" happens, as it will be evaluated later.
+        # But it means that I cannot call `Style.parse` here.
         return Text.assemble(prefix, " ", text, style=style)
 
 
@@ -2493,11 +2511,15 @@ async def refresh_selection(self) -> None:
         match_dicts = self.search_results
         # get the relevant color values from the theme.
         vars = self.app.get_css_variables()
+        # Should NOT be `success-text` as this color is used
+        # to render text that sits ON TOP of a widget with
+        # a `success` color! But I am rendering it on a plain
+        # background, so I _should_ select the `success` color.
         render_state_colors = {
-            "color_success": vars["text-success"],
-            "color_warn": vars["text-warning"],
-            "color_error": vars["text-error"],
-            "color_different": vars["text-warning"],
+            "color_success": vars["success"],
+            "color_warn": vars["warning"],
+            "color_error": vars["error"],
+            "color_different": vars["warning"],
             "color_inactive": vars["text-muted"],
         }
         matches = [
@@ -2518,6 +2540,7 @@ async def refresh_selection(self) -> None:
             Selection(
                 prompt=self.unit_to_state_dict[unit].render_state(
                     unit,
+                    highlight_indices=None,
                     **render_state_colors,
                 ),
                 value=unit,
@@ -2829,6 +2852,17 @@ def get_default_system_commands_subset(
                 self.action_show_help_panel,
             )
 
+    async def on_theme_changed(self, event):
+        """
+        Manually subscribed to a theme change via the
+        signal handler in `on_mount`.
+        Ensures that the `selection` and `preview` is updated with the
+        new theme as well.
+        """
+        if isinstance(self.screen, MainScreen):
+            await self.screen.refresh_selection()
+            self.screen.refresh_preview()
+
     def action_stop(self) -> None:
         """
         Calls the `stop` function of the `MainScreen` and exists.
@@ -2845,7 +2879,9 @@ def on_mount(self) -> None:
         t = self.settings.theme
         if t == "terminal-derived-theme":
             with self.app.suspend():
-                derived_theme = derive_textual_theme()
+                derived_theme = derive_textual_theme(
+                    is_dark=self.settings.terminal_derived_theme_is_dark
+                )
                 if derived_theme is not None:
                     self.register_theme(derived_theme)
                     self.theme = t
@@ -2875,6 +2911,8 @@ def on_mount(self) -> None:
                 timeout=90,
             )
             error_log_file.write_text(error_text)
+
+        self.theme_changed_signal.subscribe(self, self.on_theme_changed)
         self.push_screen("main")
 
         if self.startup_count % 100 == 0: