Fixing CSS for Updater GUI VM Name Labels

Fixes QubesOS/qubes-issues#9236

qubes_config/widgets/gtk_utils.py

@@ -192,7 +192,7 @@ def load_theme(widget: Gtk.Widget, light_theme_path: Optional[str] = None,
                dark_theme_path: Optional[str] = None,
                package_name: Optional[str] = None,
                light_file_name: Optional[str] = None,
-               dark_file_name: Optional[str] = None):
+               dark_file_name: Optional[str] = None) -> Gtk.CssProvider:
     """
     Load a dark or light theme to current screen, based on widget's
     current (system) defaults.
@@ -203,6 +203,7 @@ def load_theme(widget: Gtk.Widget, light_theme_path: Optional[str] = None,
     :param package_name: name of the package
     :param light_file_name: name of the css file with light theme
     :param dark_file_name: name of the css file with dark theme
+    Returns used CSS provider; it can be safely discarded if unused.
     """
     if not light_theme_path and light_file_name:
         assert package_name
@@ -222,6 +223,7 @@ def load_theme(widget: Gtk.Widget, light_theme_path: Optional[str] = None,
     provider.load_from_path(path)
     Gtk.StyleContext.add_provider_for_screen(
         screen, provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
+    return provider
 
 
 def is_theme_light(widget):

qui/styles/qubes-colors-dark.css

@@ -41,3 +41,4 @@
 @define-color blue-label #4363d8;
 @define-color purple-label #911eb4;
 @define-color black-label #ffffff;
+@define-color custom-label #ffffff;

qui/styles/qubes-colors-light.css

@@ -40,4 +40,5 @@
 @define-color gray-label #555555;
 @define-color blue-label #0E2276;
 @define-color purple-label #3F0C46;
-@define-color black-label #000000;
+@define-color black-label #000000;
+@define-color custom-label #000000;

qui/styles/qubes-widgets-base.css

@@ -45,6 +45,10 @@ label {
     color: @black-label;
 }
 
+.qube-box-custom-label {
+    color: @custom-label;
+}
+
 .group_title {
     font-weight: 400;
     font-size: 150%;

qui/updater/updater.py

@@ -15,6 +15,7 @@
 from qui.updater.updater_settings import Settings, OverriddenSettings
 from qui.updater.summary_page import SummaryPage
 from qui.updater.intro_page import IntroPage
+import qui.updater.utils
 
 gi.require_version('Gtk', '3.0')  # isort:skip
 from gi.repository import Gtk, Gdk, Gio  # isort:skip
@@ -93,10 +94,11 @@ def perform_setup(self, *_args, **_kwargs):
             "button_cancel")
         self.cancel_button.connect("clicked", self.cancel_clicked)
 
-        load_theme(widget=self.main_window,
+        self.EffectiveCssProvider = load_theme(widget=self.main_window,
                    package_name='qui',
                    light_file_name='qubes-updater-light.css',
                    dark_file_name='qubes-updater-dark.css')
+        qui.updater.utils.SetEffectiveCssProvider(self.EffectiveCssProvider)
 
         self.header_label: Gtk.Label = self.builder.get_object("header_label")
 

qui/updater/utils.py

@@ -135,10 +135,22 @@ class QubeClass(Enum):
     AppVM = 3
     DispVM = 4
 
+__effective_css_provider__: Gtk.CssProvider = None
+
+def SetEffectiveCssProvider(CssProvider: Gtk.CssProvider) -> None:
+    global __effective_css_provider__
+    __effective_css_provider__ = CssProvider
 
 def label_color_theme(color: str) -> str:
+    global __effective_css_provider__
     widget = Gtk.Label()
-    widget.get_style_context().add_class(f'qube-box-{color}')
+    if __effective_css_provider__ == None:
+        # Replicating the old behaviour. Both forward and backward compatible
+        widget.get_style_context().add_class(f'qube-box-{color}')
+    elif f'.qube-box-{color}' in __effective_css_provider__.to_string():
+        widget.get_style_context().add_class(f'qube-box-{color}')
+    else:
+        widget.get_style_context().add_class('qube-box-custom-label')
     gtk_color = widget.get_style_context().get_color(Gtk.StateFlags.NORMAL)
     color_rgb = ast.literal_eval(gtk_color.to_string()[3:])
     color_hex = '#{:02x}{:02x}{:02x}'.format(*color_rgb)