#783 add documentation

nicegui/elements/dark_mode.py

@@ -10,18 +10,37 @@ class DarkMode(ValueElement):
     VALUE_PROP = 'value'
 
     def __init__(self, value: Optional[bool] = False) -> None:
+        """Dark mode
+
+        You can use this element to enable, disable or toggle dark mode on the page.
+        The value `None` represents auto mode, which uses the client's system preference.
+
+        Note that this element overrides the `dark` parameter of the `ui.run` function and page decorators.
+
+        :param value: Whether dark mode is enabled. If None, dark mode is set to auto.
+        """
         super().__init__(tag='dark_mode', value=value, on_value_change=None)
 
     def enable(self) -> None:
+        """Enable dark mode."""
         self.value = True
 
     def disable(self) -> None:
+        """Disable dark mode."""
         self.value = False
 
     def toggle(self) -> None:
+        """Toggle dark mode.
+
+        This method will raise a ValueError if dark mode is set to auto.
+        """
         if self.value is None:
             raise ValueError('Cannot toggle dark mode when it is set to auto.')
         self.value = not self.value
 
     def auto(self) -> None:
+        """Set dark mode to auto.
+
+        This will use the client's system preference.
+        """
         self.value = None

website/documentation.py

@@ -258,6 +258,7 @@ def create_full() -> None:
 
     load_demo(ui.query)
     load_demo(ui.colors)
+    load_demo(ui.dark_mode)
 
     heading('Action')
 

website/more_documentation/dark_mode_documentation.py

@@ -0,0 +1,13 @@
+from nicegui import ui
+
+
+def main_demo() -> None:
+    dark = ui.dark_mode()
+    # ui.label('Switch mode:')
+    # ui.button('Dark', on_click=dark.enable)
+    # ui.button('Light', on_click=dark.disable)
+    # END OF DEMO
+    l = ui.label('Switch mode:')
+    c = l.parent_slot.parent
+    ui.button('Dark', on_click=lambda: (l.style('color: white'), c.style('background-color: var(--q-dark-page)')))
+    ui.button('Light', on_click=lambda: (l.style('color: default'), c.style('background-color: default')))