Custom colors prop support (#3708)

* support for custom colors in `ui.colors`

* docs for custom colors

* code review

* add missing type annotation

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>

nicegui/elements/colors.js

@@ -1,8 +1,24 @@
 export default {
   mounted() {
     for (let name in this.$props) {
+      if (name === "customColors") continue;
       document.body.style.setProperty("--q-" + name.replace("_", "-"), this.$props[name]);
     }
+    if (this.customColors) {
+      let customCSS = "";
+      for (let customColor in this.customColors) {
+        const colorName = customColor.replaceAll("_", "-");
+        const colorVar = "--q-" + colorName;
+        document.body.style.setProperty(colorVar, this.customColors[customColor]);
+        customCSS += `.text-${colorName} { color: var(${colorVar}) !important; }\n`;
+        customCSS += `.bg-${colorName} { background-color: var(${colorVar}) !important; }\n`;
+      }
+      const style = document.createElement("style");
+      style.innerHTML = customCSS;
+      style.dataset.niceguiCustomColors = "";
+      document.head.querySelectorAll("[data-nicegui-custom-colors]").forEach((el) => el.remove());
+      document.getElementsByTagName("head")[0].appendChild(style);
+    }
   },
   props: {
     primary: String,
@@ -14,5 +30,6 @@ export default {
     negative: String,
     info: String,
     warning: String,
+    customColors: Object,
   },
 };

nicegui/elements/colors.py

@@ -1,4 +1,5 @@
 from ..element import Element
+from .mixins.color_elements import QUASAR_COLORS
 
 
 class Colors(Element, component='colors.js'):
@@ -12,7 +13,8 @@ class Colors(Element, component='colors.js'):
                  positive: str = '#21ba45',
                  negative: str = '#c10015',
                  info: str = '#31ccec',
-                 warning: str = '#f2c037') -> None:
+                 warning: str = '#f2c037',
+                 **custom_colors: str) -> None:
         """Color Theming
 
         Sets the main colors (primary, secondary, accent, ...) used by `Quasar <https://quasar.dev/style/theme-builder>`_.
@@ -26,6 +28,7 @@ class Colors(Element, component='colors.js'):
         :param negative: Negative color (default: "#c10015")
         :param info: Info color (default: "#31ccec")
         :param warning: Warning color (default: "#f2c037")
+        :param custom_colors: Custom color definitions for branding (needs ``ui.colors`` to be called before custom color is ever used)
         """
         super().__init__()
         self._props['primary'] = primary
@@ -37,4 +40,6 @@ class Colors(Element, component='colors.js'):
         self._props['negative'] = negative
         self._props['info'] = info
         self._props['warning'] = warning
+        self._props['customColors'] = custom_colors
+        QUASAR_COLORS.update({name.replace('_', '-') for name in custom_colors})
         self.update()

website/documentation/content/colors_documentation.py

@@ -12,4 +12,17 @@ def main_demo() -> None:
     b2 = ui.button('Gray', on_click=lambda: [b.classes(replace='!bg-[#555]') for b in [b1, b2]])
 
 
+@doc.demo('Custom colors', '''
+    You can add custom color definitions for branding.
+    In this case, `ui.colors` must be called before the custom color is ever used.
+''')
+def custom_color_demo() -> None:
+    from random import randint
+
+    ui.colors(brand='#424242')
+    ui.label('This is your custom brand color').classes('text-brand')
+    ui.button('Randomize', color='brand',
+              on_click=lambda: ui.colors(brand=f'#{randint(0, 0xffffff):06x}'))
+
+
 doc.reference(ui.colors)