update ui.colors (not yet working)

nicegui/elements/colors.js

@@ -0,0 +1,17 @@
+export default {
+  template: '<span style="display:none"></span>',
+  mounted() {
+    for (let name in this.$props) {
+      document.body.style.setProperty("--q-" + name, this.$props[name]);
+    }
+  },
+  props: {
+    primary: String,
+    secondary: String,
+    accent: String,
+    positive: String,
+    negative: String,
+    info: String,
+    warning: String,
+  },
+};

nicegui/elements/colors.py

@@ -0,0 +1,29 @@
+from .. import vue
+from ..element import Element
+
+vue.register_component('colors', __file__, 'colors.js')
+
+
+class Colors(Element):
+
+    def __init__(self, *,
+                 primary='#1976d2',
+                 secondary='#26a69a',
+                 accent='#9c27b0',
+                 positive='#21ba45',
+                 negative='#c10015',
+                 info='#31ccec',
+                 warning='#f2c037'):
+        """Color Theming
+
+        Sets the main colors (primary, secondary, accent, ...) used by `Quasar <https://quasar.dev/>`_.
+        """
+        super().__init__('colors')
+        self._props['primary'] = primary
+        self._props['secondary'] = secondary
+        self._props['accent'] = accent
+        self._props['positive'] = positive
+        self._props['negative'] = negative
+        self._props['info'] = info
+        self._props['warning'] = warning
+        self.update()

nicegui/elements/old/colors.js

@@ -1,12 +0,0 @@
-Vue.component("colors", {
-  template: `<span v-bind:id="jp_props.id" style="display:none"></span>`,
-  mounted() {
-    var colors = this.$props.jp_props.options;
-    for (var color in colors) {
-      document.body.style.setProperty("--q-color-" + color, colors[color]);
-    }
-  },
-  props: {
-    jp_props: Object,
-  },
-});

nicegui/elements/old/colors.py

@@ -1,38 +0,0 @@
-from ..routes import add_dependencies
-from .custom_view import CustomView
-from .element import Element
-
-add_dependencies(__file__)
-
-
-class ColorsView(CustomView):
-
-    def __init__(self, primary, secondary, accent, positive, negative, info, warning):
-        super().__init__('colors',
-                         primary=primary,
-                         secondary=secondary,
-                         accent=accent,
-                         positive=positive,
-                         negative=negative,
-                         info=info,
-                         warning=warning)
-        self.initialize(temp=False)
-
-
-class Colors(Element):
-
-    def __init__(self, *,
-                 primary='#1976d2',
-                 secondary='#26a69a',
-                 accent='#9c27b0',
-                 positive='#21ba45',
-                 negative='#c10015',
-                 info='#31ccec',
-                 warning='#f2c037'):
-        """Color Theming
-
-        Sets the main colors (primary, secondary, accent, ...) used by `Quasar <https://quasar.dev/>`_.
-        """
-        super().__init__(ColorsView(primary, secondary, accent, positive, negative, info, warning))
-
-        self.update()

nicegui/ui.py

@@ -4,6 +4,7 @@ from .elements.card import Card as card
 from .elements.card import CardActions as card_actions
 from .elements.card import CardSection as card_section
 from .elements.checkbox import Checkbox as checkbox
+from .elements.colors import Colors as colors
 from .elements.column import Column as column
 from .elements.icon import Icon as icon
 from .elements.image import Image as image