mycontroller-org · jkandasa · Sep 19, 2026 · Sep 19, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@ Draft for **2.3.0** (`versions.txt`). Compared to [v2.2.0](https://github.com/my
 
 ### Changed
 
+- Console colour scheme is PatternFly **light**, **dark**, or **system** (follows the OS). Custom themes from the data repository (`labels.gui_theme`) are removed. The choice is stored in the browser (`localStorage` `mc-theme`). The header has a compact joined theme control and a locale dropdown (`🇬🇧 EN-UK`). Dark mode uses PatternFly tokens for labels, forms, topology, and widgets. Dashboard tiles no longer use a grey fill.
 - Release workflow builds host binaries (Go 1.27.1 in Actions) and copies only those binaries into Alpine 3.24 images on the same runner (no artifact upload/download). Images are pushed to GHCR, Quay, and Docker Hub as a single multi-arch `:${VERSION}` tag (no per-arch tags). `main` republishes the `development` pre-release by deleting and recreating it.
 - Policy **Import** uses `storage.Upsert` so `createdOn` / `modifiedOn` come from the backup file (same as other resources). Built-in policies are still skipped.
 - Built-in policies (admin / readwrite / readonly) are no longer rewritten on every start. `ModifiedOn` stays unless the code definition changed. Existing rows without `CreatedOn` are backfilled from `ModifiedOn` once.

diff --git a/docs/locales.md b/docs/locales.md
@@ -16,7 +16,7 @@ This document is the standing guide for **web-console translations**: how they l
 
 The UI uses `i18next` + `react-i18next` + `i18next-http-backend`. YAML is parsed with `js-yaml`. Detection order is Redux stored language, then the browser; unknown codes fall back to `en_GB`. Hyphens are normalized to underscores (`en-GB` → `en_GB`).
 
-Every registered language **must** have a YAML file with the **same keys** as `en_GB.yaml`. As of this writing that is **978 keys** (flat count, including nested `dialog.*`, `helper_text.*`, `error.*`, `opts.*`).
+Every registered language **must** have a YAML file with the **same keys** as `en_GB.yaml`. As of this writing that is **982 keys** (flat count, including nested `dialog.*`, `helper_text.*`, `error.*`, `opts.*`).
 
 ### Current languages
 

diff --git a/web-console/public/locales/de_DE.yaml b/web-console/public/locales/de_DE.yaml
@@ -941,7 +941,11 @@ telegram: Telegram
 temperature: Temperatur
 text: Text
 the_open_source_controller: The Open Source Controller
+theme: Design
 theme_color: Themenfarbe
+theme_dark: Dunkel
+theme_light: Hell
+theme_system: System
 thickness: Dicke
 threshold_mode: Schwellenmodus
 thresholds: Schwellenwerte

diff --git a/web-console/public/locales/en_GB.yaml b/web-console/public/locales/en_GB.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: Temperature
 text: Text
 the_open_source_controller: The Open Source Controller
+theme: Theme
 theme_color: Theme Colour
+theme_dark: Dark
+theme_light: Light
+theme_system: System
 thickness: Thickness
 threshold_mode: Threshold Mode
 thresholds: Thresholds

diff --git a/web-console/public/locales/en_US.yaml b/web-console/public/locales/en_US.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: Temperature
 text: Text
 the_open_source_controller: The Open Source Controller
+theme: Theme
 theme_color: Theme Color
+theme_dark: Dark
+theme_light: Light
+theme_system: System
 thickness: Thickness
 threshold_mode: Threshold Mode
 thresholds: Thresholds

diff --git a/web-console/public/locales/es_ES.yaml b/web-console/public/locales/es_ES.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: Temperatura
 text: Texto
 the_open_source_controller: The Open Source Controller
+theme: Tema
 theme_color: Color del tema
+theme_dark: Oscuro
+theme_light: Claro
+theme_system: Sistema
 thickness: Grosor
 threshold_mode: Modo de umbral
 thresholds: Umbrales

diff --git a/web-console/public/locales/fr_FR.yaml b/web-console/public/locales/fr_FR.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: Température
 text: Texte
 the_open_source_controller: The Open Source Controller
+theme: Thème
 theme_color: Couleur du thème
+theme_dark: Sombre
+theme_light: Clair
+theme_system: Système
 thickness: Épaisseur
 threshold_mode: Mode de seuil
 thresholds: Seuils

diff --git a/web-console/public/locales/he_IL.yaml b/web-console/public/locales/he_IL.yaml
@@ -941,7 +941,11 @@ telegram: Telegram
 temperature: טמפרטורה
 text: טקסט
 the_open_source_controller: The Open Source Controller
+theme: ערכת נושא
 theme_color: צבע ערכת נושא
+theme_dark: כהה
+theme_light: בהיר
+theme_system: מערכת
 thickness: עובי
 threshold_mode: מצב סף
 thresholds: ספים

diff --git a/web-console/public/locales/hi_IN.yaml b/web-console/public/locales/hi_IN.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: तापमान
 text: पाठ
 the_open_source_controller: The Open Source Controller
+theme: थीम
 theme_color: Theme रंग
+theme_dark: गहरा
+theme_light: हल्का
+theme_system: सिस्टम
 thickness: मोटाई
 threshold_mode: Threshold मोड
 thresholds: Threshold

diff --git a/web-console/public/locales/it_IT.yaml b/web-console/public/locales/it_IT.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: Temperatura
 text: Testo
 the_open_source_controller: The Open Source Controller
+theme: Tema
 theme_color: Colore del tema
+theme_dark: Scuro
+theme_light: Chiaro
+theme_system: Sistema
 thickness: Spessore
 threshold_mode: Modalità soglia
 thresholds: Soglie

diff --git a/web-console/public/locales/kn_IN.yaml b/web-console/public/locales/kn_IN.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: ತಾಪಮಾನ
 text: ಪಠ್ಯ
 the_open_source_controller: The Open Source Controller
+theme: ಥೀಮ್
 theme_color: Theme ಬಣ್ಣ
+theme_dark: ಗಾಢ
+theme_light: ತಿಳಿ
+theme_system: ಸಿಸ್ಟಂ
 thickness: ದಪ್ಪ
 threshold_mode: Threshold ವಿಧಾನ
 thresholds: Thresholdಗಳು

diff --git a/web-console/public/locales/ml_IN.yaml b/web-console/public/locales/ml_IN.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: താപനില
 text: വാചകം
 the_open_source_controller: The Open Source Controller
+theme: തീം
 theme_color: Theme നിറം
+theme_dark: ഇരുണ്ടത്
+theme_light: ഇളം
+theme_system: സിസ്റ്റം
 thickness: കനം
 threshold_mode: Threshold രീതി
 thresholds: Thresholdകൾ

diff --git a/web-console/public/locales/nl_NL.yaml b/web-console/public/locales/nl_NL.yaml
@@ -941,7 +941,11 @@ telegram: Telegram
 temperature: Temperatuur
 text: Tekst
 the_open_source_controller: The Open Source Controller
+theme: Thema
 theme_color: Themakleur
+theme_dark: Donker
+theme_light: Licht
+theme_system: Systeem
 thickness: Dikte
 threshold_mode: Drempelmodus
 thresholds: Drempels

diff --git a/web-console/public/locales/pl_PL.yaml b/web-console/public/locales/pl_PL.yaml
@@ -941,7 +941,11 @@ telegram: Telegram
 temperature: Temperatura
 text: Tekst
 the_open_source_controller: The Open Source Controller
+theme: Motyw
 theme_color: Kolor motywu
+theme_dark: Ciemny
+theme_light: Jasny
+theme_system: System
 thickness: Grubość
 threshold_mode: Tryb progu
 thresholds: Progi

diff --git a/web-console/public/locales/pt_PT.yaml b/web-console/public/locales/pt_PT.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: Temperatura
 text: Texto
 the_open_source_controller: The Open Source Controller
+theme: Tema
 theme_color: Cor do tema
+theme_dark: Escuro
+theme_light: Claro
+theme_system: Sistema
 thickness: Espessura
 threshold_mode: Modo de limiar
 thresholds: Limiares

diff --git a/web-console/public/locales/ro_RO.yaml b/web-console/public/locales/ro_RO.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: Temperatură
 text: Text
 the_open_source_controller: The Open Source Controller
+theme: Temă
 theme_color: Culoare temă
+theme_dark: Întunecat
+theme_light: Deschis
+theme_system: Sistem
 thickness: Grosime
 threshold_mode: Mod prag
 thresholds: Praguri

diff --git a/web-console/public/locales/ru_RU.yaml b/web-console/public/locales/ru_RU.yaml
@@ -941,7 +941,11 @@ telegram: Telegram
 temperature: Температура
 text: Текст
 the_open_source_controller: The Open Source Controller
+theme: Тема
 theme_color: Цвет темы
+theme_dark: Тёмная
+theme_light: Светлая
+theme_system: Система
 thickness: Толщина
 threshold_mode: Режим порога
 thresholds: Пороги

diff --git a/web-console/public/locales/ta_IN.yaml b/web-console/public/locales/ta_IN.yaml
@@ -941,7 +941,11 @@ telegram: Telegram
 temperature: வெப்பநிலை
 text: உரை
 the_open_source_controller: The Open Source Controller
+theme: தீம்
 theme_color: Theme நிறம்
+theme_dark: இருள்
+theme_light: வெளிர்
+theme_system: சிஸ்டம்
 thickness: தடிமன்
 threshold_mode: Threshold முறை
 thresholds: Threshold-கள்

diff --git a/web-console/public/locales/te_IN.yaml b/web-console/public/locales/te_IN.yaml
@@ -937,7 +937,11 @@ telegram: Telegram
 temperature: ఉష్ణోగ్రత
 text: వచనం
 the_open_source_controller: The Open Source Controller
+theme: థీమ్
 theme_color: Theme రంగు
+theme_dark: డార్క్
+theme_light: లైట్
+theme_system: సిస్టం
 thickness: మందం
 threshold_mode: Threshold విధానం
 thresholds: Thresholdలు

diff --git a/web-console/public/locales/zh_CN.yaml b/web-console/public/locales/zh_CN.yaml
@@ -941,7 +941,11 @@ telegram: Telegram
 temperature: 温度
 text: 文本
 the_open_source_controller: The Open Source Controller
+theme: 主题
 theme_color: 主题颜色
+theme_dark: 深色
+theme_light: 浅色
+theme_system: 系统
 thickness: 厚度
 threshold_mode: 阈值模式
 thresholds: 阈值

diff --git a/web-console/public/locales/zh_TW.yaml b/web-console/public/locales/zh_TW.yaml
@@ -941,7 +941,11 @@ telegram: Telegram
 temperature: 溫度
 text: 文字
 the_open_source_controller: The Open Source Controller
+theme: 主題
 theme_color: 主題顏色
+theme_dark: 深色
+theme_light: 淺色
+theme_system: 系統
 thickness: 厚度
 threshold_mode: 臨界值模式
 thresholds: 臨界值

diff --git a/web-console/src/App.js b/web-console/src/App.js
@@ -3,11 +3,13 @@ import { Provider } from "react-redux"
 import { PersistGate } from "redux-persist/integration/react"
 import IndexPage from "./Layout/IndexPage"
 import { persistor, store } from "./store/persister"
+import Theme from "./Theme/Theme"
 
 function App() {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
+        <Theme />
         <Suspense fallback={<div>Loading...</div>}>
           <IndexPage />
         </Suspense>

diff --git a/web-console/src/Components/BasePage/ListBase.scss b/web-console/src/Components/BasePage/ListBase.scss
@@ -2,6 +2,10 @@
   background-color: var(--pf-global--palette--blue-50);
 }
 
+:root:where(.pf-theme-dark) .table-row-selected {
+  background-color: var(--pf-global--BackgroundColor--300);
+}
+
 .mc-table [type="checkbox"] {
   cursor: pointer;
 }

diff --git a/web-console/src/Components/DataDisplay/Label.scss b/web-console/src/Components/DataDisplay/Label.scss
@@ -5,7 +5,7 @@
   /* background-color: #f2f7ff; */
   .key {
     display: inline-block;
-    color: #0303038c;
+    color: var(--pf-global--Color--200);
     min-width: 150px;
     padding-right: 5px;
   }
@@ -42,6 +42,7 @@
     --pf-c-label--BorderRadius: 0 2px 2px 0;
     --pf-c-label__content--before--BorderColor: #bee1f4;
     --pf-c-label--BackgroundColor: #bee1f4;
+    --pf-c-label__content--Color: #00659c;
     color: #00659c;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -50,12 +51,21 @@
 
   .label-value {
     --pf-c-label--BorderRadius: 0 2px 2px 0;
-    --pf-c-label__content--before--BorderColor: #7dc3e8;
-    --pf-c-label--BackgroundColor: #7dc3e8;
+    --pf-c-label__content--before--BorderColor: #0066cc;
+    --pf-c-label--BackgroundColor: #0066cc;
+    --pf-c-label__content--Color: #fff;
     color: #fff;
     padding-top: 4px;
 
     padding-bottom: 4px;
     margin-left: 0;
   }
+
+  .label-key .pf-c-label__content {
+    color: #00659c;
+  }
+
+  .label-value .pf-c-label__content {
+    color: #fff;
+  }
 }
diff --git a/web-console/src/Components/DataDisplay/Resource.scss b/web-console/src/Components/DataDisplay/Resource.scss
@@ -4,7 +4,7 @@
   overflow: hidden;
   .key {
     display: inline-block;
-    color: #0303038c;
+    color: var(--pf-global--Color--200);
     min-width: 125px;
     padding-right: 5px;
   }

diff --git a/web-console/src/Components/Form/Form.scss b/web-console/src/Components/Form/Form.scss
@@ -10,7 +10,7 @@
   .mc-form-header-label {
     font-size: var(--pf-global--FontSize--lg);
     font-style: normal;
-    color: #000000a0;
+    color: var(--pf-global--Color--200);
   }
 }
 
@@ -41,6 +41,6 @@
     --pf-l-split--m-gutter--MarginRight: 7px;
   }
   .field-title{
-    color: #000000a0;
+    color: var(--pf-global--Color--200);
   }
 }
diff --git a/web-console/src/Components/Graphs/Graphs.scss b/web-console/src/Components/Graphs/Graphs.scss
@@ -1,5 +1,5 @@
 .graph-title {
-  color: black;
+  color: var(--pf-global--Color--100);
   line-height: 1.4;
   margin: 0 0 10px 0;
   width: 100%;

diff --git a/web-console/src/Components/Selector/Selector.scss b/web-console/src/Components/Selector/Selector.scss
@@ -12,9 +12,9 @@
     padding: 10px;
     padding-right: 5px;
     padding-left: 10px;
-    color: var(--pf-global--palette--black-500);
+    color: var(--pf-global--Color--200);
     &:hover {
-      color: var(--pf-global--palette--black-600);
+      color: var(--pf-global--Color--100);
     }
   }
 

diff --git a/web-console/src/Components/Widgets/ControlPanel/Common/Common.scss b/web-console/src/Components/Widgets/ControlPanel/Common/Common.scss
@@ -1,5 +1,5 @@
 .mc-control-panel {
-  background-color: var(--mc-widget-background-color);
+  background-color: transparent;
   .text {
     float: left;
     cursor: pointer;
@@ -29,10 +29,10 @@
 }
 
 .mixed-ctl-input-field {
-  --pf-c-popover__content--BackgroundColor: #fff;
-  --pf-c-popover__arrow--BackgroundColor: #fff;
-  border: 1px solid #2124276e;
+  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  border: 1px solid var(--pf-global--BorderColor--100);
   .pf-c-popover__arrow {
-    border: 1px solid #2124276e;
+    border: 1px solid var(--pf-global--BorderColor--100);
   }
 }
diff --git a/web-console/src/Components/Widgets/ImagePanel/ImagePanel.scss b/web-console/src/Components/Widgets/ImagePanel/ImagePanel.scss
@@ -13,12 +13,12 @@
   }
 
   .value {
-    color: var(--pf-global--palette--black-850);
+    color: var(--pf-global--Color--100);
     font-size: 16px;
   }
 
   .value-timestamp {
-    color: var(--pf-global--palette--black-600);
+    color: var(--pf-global--Color--200);
     font-size: 14px;
     line-height: 0px;
   }