start to adjust website for dark mode

main.py

@@ -108,7 +108,7 @@ async def index_page(client: Client) -> None:
     add_header()
 
     with ui.row().classes('w-full h-screen items-center gap-8 pr-4 no-wrap into-section'):
-        svg.face(half=True).classes('stroke-black w-[200px] md:w-[230px] lg:w-[300px]')
+        svg.face(half=True).classes('stroke-black dark:stroke-white w-[200px] md:w-[230px] lg:w-[300px]')
         with ui.column().classes('gap-4 md:gap-8 pt-32'):
             title('Meet the *NiceGUI*.')
             subtitle('And let any browser be the frontend of your Python code.') \
@@ -244,8 +244,8 @@ async def index_page(client: Client) -> None:
                     .classes('text-white text-2xl md:text-3xl font-medium')
                 ui.html('Fun-Fact: This whole website is also coded with NiceGUI.') \
                     .classes('text-white text-lg md:text-xl')
-            ui.link('Documentation', '/documentation') \
-                .classes('rounded-full mx-auto px-12 py-2 text-white bg-white font-medium text-lg md:text-xl')
+            ui.link('Documentation', '/documentation').style('color: black !important') \
+                .classes('rounded-full mx-auto px-12 py-2 bg-white font-medium text-lg md:text-xl')
 
     with ui.column().classes('w-full p-8 lg:p-16 max-w-[1600px] mx-auto'):
         link_target('examples', '-50px')
@@ -286,7 +286,7 @@ async def index_page(client: Client) -> None:
             example_link('Lightbox', 'A thumbnail gallery where each image can be clicked to enlarge')
             example_link('ROS2', 'Using NiceGUI as web interface for a ROS2 robot')
 
-    with ui.row().classes('bg-primary w-full min-h-screen mt-16'):
+    with ui.row().classes('dark-box min-h-screen mt-16'):
         link_target('why')
         with ui.column().classes('''
                 max-w-[1600px] m-auto
@@ -367,4 +367,4 @@ async def documentation_page_more(name: str, client: Client) -> None:
     await client.connected()
     await ui.run_javascript(f'document.title = "{name} • NiceGUI";', respond=False)
 
-ui.run(uvicorn_reload_includes='*.py, *.css, *.html')
+ui.run(uvicorn_reload_includes='*.py, *.css, *.html', dark=None)

website/example_card.py

@@ -8,7 +8,7 @@ def create() -> None:
         with ui.card().style(r'clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)') \
                 .classes('pb-16 no-shadow'), ui.row().classes('no-wrap'):
             with ui.column().classes('items-center'):
-                svg.face().classes('w-16 mx-6 stroke-black stroke-2') \
+                svg.face().classes('w-16 mx-6 stroke-black dark:stroke-gray-100 stroke-2') \
                     .on('click', lambda _: output.set_text("That's my face!"), [])
                 ui.button('Click me!', on_click=lambda: output.set_text('Clicked')).classes('w-full')
                 ui.input('Text', value='abc', on_change=lambda e: output.set_text(e.value))
@@ -16,8 +16,8 @@ def create() -> None:
                 ui.switch('Switch', on_change=lambda e: output.set_text('Switched on' if e.value else 'Switched off'))
 
             with ui.column().classes('items-center'):
-                output = ui.label('Try it out!') \
-                    .classes('w-44 my-6 h-8 text-xl text-grey-9 overflow-hidden text-ellipsis text-center')
+                output = ui.label('Try it out!').classes(
+                    'w-44 my-6 h-8 text-xl text-gray-800 dark:text-gray-200 overflow-hidden text-ellipsis text-center')
                 ui.slider(min=0, max=100, value=50, step=0.1, on_change=lambda e: output.set_text(e.value)) \
                     .style('width: 150px; margin-bottom: 2px')
                 with ui.row():
@@ -34,8 +34,8 @@ def create_narrow() -> None:
                 .classes('pb-16 no-shadow'), ui.row().classes('no-wrap'):
             with ui.column().classes('items-center'):
                 svg.face().classes('w-16 mx-6 stroke-black stroke-2').on('click', lambda _: output.set_text("That's my face!"))
-                output = ui.label('Try it out!') \
-                    .classes('w-44 my-6 h-8 text-xl text-grey-9 overflow-hidden text-ellipsis text-center')
+                output = ui.label('Try it out!').classes(
+                    'w-44 my-6 h-8 text-xl text-gray-800 dark:text-gray-200 overflow-hidden text-ellipsis text-center')
                 ui.button('Click me!', on_click=lambda: output.set_text('Clicked')).classes('w-full')
                 ui.input('Text', value='abc', on_change=lambda e: output.set_text(e.value))
 

website/static/style.css

@@ -4,6 +4,10 @@ body {
   overflow-x: hidden;
   background-color: #f8f8f8;
   font-family: "Fira Sans", Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --q-dark-page: #222;
+}
+html:has(.body--dark) {
+  background-color: #222;
 }
 .browser-window {
   font-family: Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -46,6 +50,12 @@ a:active:not(.browser-window *) {
   background-color: #5898d4d0;
   backdrop-filter: blur(5px);
 }
+.body--dark .q-header {
+  background-color: #3e6a94;
+}
+.body--dark .q-header.fade {
+  background-color: #3e6a94d0;
+}
 
 .scroll-indicator:after {
   content: "";
@@ -61,6 +71,10 @@ a:active:not(.browser-window *) {
   animation: sdb04 1.5s infinite;
   transition-timing-function: ease;
 }
+.body--dark .scroll-indicator:after {
+  border-left: 3px solid #bbb;
+  border-bottom: 3px solid #bbb;
+}
 @-webkit-keyframes sdb04 {
   0% {
     -webkit-transform: rotate(-45deg) translate(0, 0);
@@ -109,6 +123,9 @@ dl.docinfo p {
   background-color: #5898d4;
   width: 100%;
 }
+.body--dark .dark-box {
+  background-color: #3e6a94;
+}
 
 @media only screen and (min-width: 1024px) {
   html {

website/style.py

@@ -35,8 +35,8 @@ def example_link(title: str, description: str) -> None:
     with ui.link(target=f'https://github.com/zauberzeug/nicegui/tree/main/examples/{name}/{filename}') \
             .classes('bg-[#5898d420] p-4 self-stretch rounded flex flex-col gap-2') \
             .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)'):
-        ui.label(title).classes(replace='text-black font-bold')
-        ui.markdown(description).classes(replace='text-black bold-links arrow-links')
+        ui.label(title).classes(replace='font-bold')
+        ui.markdown(description).classes(replace='bold-links arrow-links')
 
 
 def features(icon: str, title: str, items: List[str]) -> None:
@@ -49,5 +49,5 @@ def features(icon: str, title: str, items: List[str]) -> None:
 
 def side_menu() -> ui.left_drawer:
     return ui.left_drawer() \
-        .classes('column no-wrap gap-1 bg-[#eee] mt-[-20px] px-8 py-20') \
+        .classes('column no-wrap gap-1 bg-[#eee] dark:bg-[#1b1b1b] mt-[-20px] px-8 py-20') \
         .style('height: calc(100% + 20px) !important')