Merge pull request #11 from florianwittkamp/add_dark_mode_support

Add support for auto dark mode

README.md

@@ -64,6 +64,7 @@ You can call `ui.run()` with optional arguments for some high-level configuratio
 - `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`)
 
 ## Docker
 

nicegui/config.py

@@ -10,6 +10,7 @@ class Config(BaseModel):
     port: int = 8080
     title: str = 'NiceGUI'
     favicon: str = 'favicon.ico'
+    dark: str = False 
     reload: bool = True
     show: bool = True
     uvicorn_logging_level: str = 'warning'

nicegui/elements/page.py

@@ -7,7 +7,8 @@ class Page(jp.QuasarPage):
 
     def __init__(self, route: str, title: Optional[str] = None, favicon: Optional[str] = None,
                  classes: str = 'q-ma-md column items-start',
-                 css: str = HtmlFormatter().get_style_defs('.codehilite')):
+                 css: str = HtmlFormatter().get_style_defs('.codehilite'),
+                 dark: Optional[str] = False):
         """Page
 
         Creates a new page at the given path.
@@ -20,6 +21,8 @@ class Page(jp.QuasarPage):
         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.tailwind = True  # use Tailwind classes instead of Quasars
         self.css = css
         self.head_html += '''

nicegui/run.py

@@ -21,6 +21,7 @@ def run(self, *,
         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,6 +100,9 @@
         console.log('Quasar Version ' + Quasar.version);
         {% if page_options.dark %}
             Quasar.Dark.set(true);
+	{% endif %}
+        {% if page_options.dark == "auto" %}
+            Quasar.Dark.set("auto");
         {% endif %}
     </script>