improve dark mode integration

README.md

@@ -59,12 +59,12 @@ You can call `ui.run()` with optional arguments for some high-level configuratio
 - `port` (default: `8080`)
 - `title` (default: `'NiceGUI'`)
 - `favicon` (default: `'favicon.ico'`)
+- `dark`: whether to use Quasar's dark mode (default: `False`, use `None` for "auto" mode)
 - `reload`: automatically reload the ui on file changes (default: `True`)
 - `show`: automatically open the ui in a browser tab (default: `True`)
 - `uvicorn_logging_level`: logging level for uvicorn server (default: `'warning'`)
-- `interactive`: used internally when run in interactive Python shell (default: `False`)
 - `main_page_classes`: configure Quasar classes of main page (default: `q-ma-md column items-start`)
-- `dark`: Quasar dark mode support (values: `True`, `False` and `"auto"`) (default: `False`)
+- `interactive`: used internally when run in interactive Python shell (default: `False`)
 
 ## Docker
 

main.py

@@ -425,11 +425,16 @@ with example(lifecycle):
     ui.on_startup(counter())
 
 with example(ui.page):
-    with ui.page('/other_page') as other:
+    with ui.page('/other_page'):
         ui.label('Welcome to the other side')
         ui.link('Back to main page', '/')
 
+    with ui.page('/dark_page', dark=True):
+        ui.label('Welcome to the dark side')
+        ui.link('Back to main page', '/')
+
     ui.link('Visit other page', '/other_page')
+    ui.link('Visit dark page', '/dark_page')
 
 
 with example(ui.open):

nicegui/config.py

@@ -1,4 +1,5 @@
 from pydantic import BaseModel
+from typing import Optional
 import inspect
 import ast
 import os
@@ -10,12 +11,12 @@ class Config(BaseModel):
     port: int = 8080
     title: str = 'NiceGUI'
     favicon: str = 'favicon.ico'
-    dark: str = False 
+    dark: Optional[bool] = False
     reload: bool = True
     show: bool = True
     uvicorn_logging_level: str = 'warning'
-    interactive: bool = False
     main_page_classes: str = 'q-ma-md column items-start'
+    interactive: bool = False
 
 
 excluded_endings = (

nicegui/elements/page.py

@@ -5,24 +5,31 @@ from ..globals import config, page_stack, view_stack
 
 class Page(jp.QuasarPage):
 
-    def __init__(self, route: str, title: Optional[str] = None, favicon: Optional[str] = None,
+    def __init__(self,
+                 route: str,
+                 title: Optional[str] = None,
+                 favicon: Optional[str] = None,
+                 dark: Optional[bool] = ...,
                  classes: str = 'q-ma-md column items-start',
                  css: str = HtmlFormatter().get_style_defs('.codehilite'),
-                 dark: Optional[str] = False):
+                 ):
         """Page
 
         Creates a new page at the given path.
 
-        :param route: the route of the new page. All paths must start with '/', otherwise an error occurs.
+        :param route: route of the new page (path must start with '/')
+        :param title: optional page title
+        :param favicon: optional favicon
+        :param dark: whether to use Quasar's dark mode (defaults to `dark` argument of `run` command)
+        :param classes: tailwind classes for the container div (default: `'q-ma-md column items-start'`)
+        :param css: CSS definitions
         """
         super().__init__()
 
         self.delete_flag = False
         self.title = title or config.title
         self.favicon = favicon or config.favicon
-
-        # Dark support: For quasar.html we have to deliver a true boolean for "False", else we can deliver a string "True" or "auto"
-        self.dark = False if (dark or config.dark) == "False" else (dark or config.dark)
+        self.dark = dark if dark is not ... else config.dark
         self.tailwind = True  # use Tailwind classes instead of Quasars
         self.css = css
         self.head_html += '''

nicegui/run.py

@@ -1,3 +1,4 @@
+from typing import Optional
 import inspect
 import sys
 import webbrowser
@@ -17,11 +18,11 @@ def run(self, *,
         port: int = 8080,
         title: str = 'NiceGUI',
         favicon: str = 'favicon.ico',
+        dark: Optional[bool] = False,
         reload: bool = True,
         show: bool = True,
         uvicorn_logging_level: str = 'warning',
         main_page_classes: str = 'q-ma-md column items-start',
-        dark: str = False,
         ):
 
     if globals.config.interactive or reload == False:  # NOTE: if reload == True we already started uvicorn above

nicegui/static/templates/quasar.html

@@ -100,8 +100,8 @@
         console.log('Quasar Version ' + Quasar.version);
         {% if page_options.dark %}
             Quasar.Dark.set(true);
-	{% endif %}
-        {% if page_options.dark == "auto" %}
+        {% endif %}
+        {% if page_options.dark == None %}
             Quasar.Dark.set("auto");
         {% endif %}
     </script>