introduce ui.dark to control dark mode

nicegui/elements/dark.js

@@ -0,0 +1,19 @@
+export default {
+  mounted() {
+    this.update();
+  },
+  updated() {
+    this.update();
+  },
+  methods: {
+    update() {
+      Quasar.Dark.set(this.value === null ? "auto" : this.value);
+      tailwind.config.darkMode = this.auto ? "media" : "class";
+      if (this.value) document.body.classList.add("dark");
+      else document.body.classList.remove("dark");
+    },
+  },
+  props: {
+    value: Boolean,
+  },
+};

nicegui/elements/dark.py

@@ -0,0 +1,22 @@
+from typing import Optional
+
+from ..dependencies import register_component
+from .mixins.value_element import ValueElement
+
+register_component('dark', __file__, 'dark.js')
+
+
+class Dark(ValueElement):
+    VALUE_PROP = 'value'
+
+    def __init__(self, value: Optional[bool] = False) -> None:
+        super().__init__(tag='dark', value=value, on_value_change=None)
+
+    def turn_on(self) -> None:
+        self.value = True
+
+    def turn_off(self) -> None:
+        self.value = False
+
+    def auto(self) -> None:
+        self.value = None

nicegui/templates/index.html

@@ -189,11 +189,11 @@
       {{ vue_scripts | safe }}
       {{ js_imports | safe }}
 
-      const dark = {{ dark }};
-      Quasar.Dark.set(dark === None ? "auto" : dark);
+      const dark_mode = {{ dark }};
+      Quasar.Dark.set(dark_mode === None ? "auto" : dark);
       {% if tailwind %}
-      if (dark !== None) tailwind.config.darkMode = "class";
-      if (dark === True) document.body.classList.add("dark");
+      if (dark_mode !== None) tailwind.config.darkMode = "class";
+      if (dark_mode === True) document.body.classList.add("dark");
       {% endif %}
 
       app.mount("#app");

nicegui/ui.py

@@ -16,6 +16,7 @@ from .elements.color_input import ColorInput as color_input
 from .elements.color_picker import ColorPicker as color_picker
 from .elements.colors import Colors as colors
 from .elements.column import Column as column
+from .elements.dark import Dark as dark
 from .elements.date import Date as date
 from .elements.dialog import Dialog as dialog
 from .elements.expansion import Expansion as expansion