fix(core): branding css cannot override PatternFly styles with :root …

…selector Fix #787
hawtio · Feb 21, 2024 · db6e857 · db6e857
1 parent 470a6cb
commit db6e857
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/app/public/branding-example.css b/app/public/branding-example.css
@@ -3,8 +3,27 @@
 .pf-c-login,
 .pf-c-about-modal-box__hero {
   background-image: url(img/background.svg) !important;
+  background-size: cover;
 }
 
 #hawtio-header-brand .pf-c-brand {
   height: 50px;
 }
+
+/* Example of global style overrides:
+:root {
+  --pf-global--primary-color--100: #b21054;
+  --pf-global--primary-color--200: #b24e78;
+  --pf-global--primary-color--light-100: #b24e78;
+  --pf-global--primary-color--dark-100: #b21054;
+  --pf-global--active-color--100: #b21054;
+  --pf-global--active-color--200: #b24e78;
+  --pf-global--active-color--300: #b24e78;
+  --pf-global--active-color--400: #b24e78;
+  --pf-global--link--Color: #b21054;
+  --pf-global--link--Color--hover: #b24e78;
+  --pf-v5-global--primary-color--100: #b21054;
+  --pf-v5-global--primary-color--200: #b24e78;
+  --pf-v5-global--link--Color: var(--pf-v5-global--danger-color--100);
+}
+*/
diff --git a/packages/hawtio/src/core/config-manager.ts b/packages/hawtio/src/core/config-manager.ts
@@ -179,7 +179,8 @@ class ConfigManager {
       applied = true
     }
     if (branding.css) {
-      this.updateHref('#branding', branding.css)
+      // Branding css should be pushed to last to override the builtin PatternFly styles
+      this.updateHref('#branding', branding.css, true)
       applied = true
     }
     if (branding.favicon) {
@@ -189,11 +190,15 @@ class ConfigManager {
     return applied
   }
 
-  private updateHref(id: string, path: string): void {
-    log.info('Updating href for', id, '-', path)
+  private updateHref(id: string, path: string, moveToLast: boolean = false): void {
+    log.info('Updating href for', id, '-', path, moveToLast)
     const elm = $(id)
     elm.prop('disabled', true)
     elm.attr({ href: path })
+    if (moveToLast) {
+      elm.remove()
+      $('head').append(elm)
+    }
     elm.prop('disabled', false)
   }