chore: use color var in index.html

We should not hardcode a default text colour to white, especially in light mode. This is the (temporary) cause of many issues like containers#7708 where we hadn't yet set a light mode color so you get white on light. We don't have a 'default text color' and none of the existing palette entries fit, so I talked to Emma and decided to create a new variable. Unfortunately, even though this is a 'correct' change, setting it right now has the reverse problem: anything that is still missing light mode support will see the default text color change from white to dark and have problems on dark backgrounds. A quick test showed the following: - some forms (containers#7214) - containers#7727 - containers#7728 So we should not move this out of draft until most of these are fixed, and definitely not immediately before a release. In the meantime, it's handy to set this to something really obvious (e.g. amber) to see what still needs light mode support. Fixes containers#7724. Signed-off-by: Tim deBoer <git@tdeboer.ca>
deboer-tim · Jun 18, 2024 · 028536d · 028536d
1 parent a7b815c
commit 028536d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
@@ -228,6 +228,7 @@ export class ColorRegistry {
   }
 
   protected initColors(): void {
+    this.initDefault();
     this.initGlobalNav();
     this.initSecondaryNav();
     this.initTitlebar();
@@ -250,6 +251,16 @@ export class ColorRegistry {
     this.initStatusColors();
   }
 
+  protected initDefault(): void {
+    const def = 'default-';
+
+    // Global default colors
+    this.registerColor(`${def}text`, {
+      dark: colorPalette.white,
+      light: colorPalette.charcoal[900],
+    });
+  }
+
   protected initGlobalNav(): void {
     const glNav = 'global-nav-';
 

diff --git a/packages/renderer/index.html b/packages/renderer/index.html
@@ -6,8 +6,9 @@
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
     <title>Podman Desktop</title>
   </head>
-  <body class="overflow-hidden text-white">
+  <body class="overflow-hidden text-[var(--pd-default-text)]">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+