improve dark color theme for demo windows

main.py

@@ -74,7 +74,7 @@ def add_header(menu: Optional[ui.left_drawer] = None) -> None:
         'Examples': '/#examples',
         'Why?': '/#why',
     }
-    dark_mode = ui.dark_mode().bind_value(app.storage.user, 'dark_mode')
+    dark_mode = ui.dark_mode(value=None).bind_value(app.storage.user, 'dark_mode')
     with ui.header() \
             .classes('items-center duration-200 p-0 px-4 no-wrap') \
             .style('box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)'):

website/demo.py

@@ -1,6 +1,6 @@
 import inspect
 import re
-from typing import Callable, Optional, Union
+from typing import Callable, Literal, Optional, Union
 
 import isort
 
@@ -8,20 +8,14 @@ from nicegui import ui
 
 from .intersection_observer import IntersectionObserver as intersection_observer
 
-PYTHON_BGCOLOR = '#00000010'
-PYTHON_COLOR = '#eef5fb'
-BASH_BGCOLOR = '#00000010'
-BASH_COLOR = '#e8e8e8'
-BROWSER_BGCOLOR = '#00000010'
-BROWSER_COLOR = '#ffffff'
+WindowType = Literal['python', 'bash', 'browser']
 
-
-uncomment_pattern = re.compile(r'^(\s*)# ?')
+UNCOMMENT_PATTERN = re.compile(r'^(\s*)# ?')
 
 
 def uncomment(text: str) -> str:
     """non-executed lines should be shown in the code examples"""
-    return uncomment_pattern.sub(r'\1', text)
+    return UNCOMMENT_PATTERN.sub(r'\1', text)
 
 
 def demo(f: Callable) -> Callable:
@@ -57,10 +51,6 @@ def demo(f: Callable) -> Callable:
     return f
 
 
-def _window_header(bgcolor: str) -> ui.row():
-    return ui.row().classes(f'w-full h-8 p-2 bg-[{bgcolor}]')
-
-
 def _dots() -> None:
     with ui.row().classes('gap-1 relative left-[1px] top-[1px]'):
         ui.icon('circle').classes('text-[13px] text-red-400')
@@ -68,43 +58,39 @@ def _dots() -> None:
         ui.icon('circle').classes('text-[13px] text-green-400')
 
 
-def _title(title: str) -> None:
-    ui.label(title).classes('text-sm text-gray-600 absolute left-1/2 top-[6px]').style('transform: translateX(-50%)')
-
-
-def _tab(content: Union[str, Callable], color: str, bgcolor: str) -> None:
-    with ui.row().classes('gap-0'):
-        with ui.label().classes(f'w-2 h-[24px] bg-[{color}]'):
-            ui.label().classes(f'w-full h-full bg-[{bgcolor}] rounded-br-[6px]')
-        with ui.row().classes(f'text-sm text-gray-600 px-6 py-1 h-[24px] rounded-t-[6px] bg-[{color}] items-center gap-2'):
-            if callable(content):
-                content()
-            else:
-                ui.label(content)
-        with ui.label().classes(f'w-2 h-[24px] bg-[{color}]'):
-            ui.label().classes(f'w-full h-full bg-[{bgcolor}] rounded-bl-[6px]')
-
-
-def window(color: str, bgcolor: str, *,
-           title: str = '', tab: Union[str, Callable] = '', classes: str = '') -> ui.column:
-    with ui.card().classes(f'no-wrap bg-[{color}] rounded-xl p-0 gap-0 {classes}') \
+def window(type: WindowType, *, title: str = '', tab: Union[str, Callable] = '', classes: str = '') -> ui.column:
+    bgcolor = ('#00000010', '#ffffff10')
+    color = {
+        'python': ('#eef5fb', '#2b323b'),
+        'bash': ('#e8e8e8', '#2b323b'),
+        'browser': ('#ffffff', '#181c21'),
+    }[type]
+    with ui.card().classes(f'no-wrap bg-[{color[0]}] dark:bg-[{color[1]}] rounded-xl p-0 gap-0 {classes}') \
             .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)'):
-        with _window_header(bgcolor):
+        with ui.row().classes(f'w-full h-8 p-2 bg-[{bgcolor[0]}] dark:bg-[{bgcolor[1]}]'):
             _dots()
             if title:
-                _title(title)
+                ui.label(title) \
+                    .classes('text-sm text-gray-600 dark:text-gray-400 absolute left-1/2 top-[6px]') \
+                    .style('transform: translateX(-50%)')
             if tab:
-                _tab(tab, color, bgcolor)
+                with ui.row().classes('gap-0'):
+                    with ui.label().classes(f'w-2 h-[24px] bg-[{color[0]}] dark:bg-[{color[1]}]'):
+                        ui.label().classes(f'w-full h-full bg-[{bgcolor[0]}] dark:bg-[{bgcolor[1]}] rounded-br-[6px]')
+                    with ui.row().classes(f'text-sm text-gray-600 dark:text-gray-400 px-6 py-1 h-[24px] rounded-t-[6px] bg-[{color[0]}] dark:bg-[{color[1]}] items-center gap-2'):
+                        tab() if callable(tab) else ui.label(tab)
+                    with ui.label().classes(f'w-2 h-[24px] bg-[{color[0]}] dark:bg-[{color[1]}]'):
+                        ui.label().classes(f'w-full h-full bg-[{bgcolor[0]}] dark:bg-[{bgcolor[1]}] rounded-bl-[6px]')
         return ui.column().classes('w-full h-full overflow-auto')
 
 
 def python_window(title: Optional[str] = None, *, classes: str = '') -> ui.card:
-    return window(PYTHON_COLOR, PYTHON_BGCOLOR, title=title or 'main.py', classes=classes).classes('p-2 python-window')
+    return window('python', title=title or 'main.py', classes=classes).classes('p-2 python-window')
 
 
 def bash_window(*, classes: str = '') -> ui.card:
-    return window(BASH_COLOR, BASH_BGCOLOR, title='bash', classes=classes).classes('p-2 bash-window')
+    return window('bash', title='bash', classes=classes).classes('p-2 bash-window')
 
 
 def browser_window(title: Optional[Union[str, Callable]] = None, *, classes: str = '') -> ui.card:
-    return window(BROWSER_COLOR, BROWSER_BGCOLOR, tab=title or 'NiceGUI', classes=classes).classes('p-4 browser-window')
+    return window('browser', tab=title or 'NiceGUI', classes=classes).classes('p-4 browser-window')

website/documentation.py

@@ -548,10 +548,6 @@ def create_full() -> None:
 
     load_demo(ui.run)
 
-    # HACK: switch color to white for the next demo
-    demo_BROWSER_BGCOLOR = demo.BROWSER_BGCOLOR
-    demo.BROWSER_BGCOLOR = '#ffffff'
-
     @text_demo('Native Mode', '''
         You can enable native mode for NiceGUI by specifying `native=True` in the `ui.run` function.
         To customize the initial window size and display mode, use the `window_size` and `fullscreen` parameters respectively.
@@ -575,8 +571,6 @@ def create_full() -> None:
         # ui.run(native=True, window_size=(400, 300), fullscreen=False)
         # END OF DEMO
         ui.button('enlarge', on_click=lambda: ui.notify('window will be set to 1000x700 in native mode'))
-    # HACK: restore color
-    demo.BROWSER_BGCOLOR = demo_BROWSER_BGCOLOR
 
     # Show a helpful workaround until issue is fixed upstream.
     # For more info see: https://github.com/r0x0r/pywebview/issues/1078