Update with dark theme / light theme

components/button.py

@@ -64,7 +64,9 @@ def button_toggle(
           align_items="center",
           display="flex",
           # Handle selected case
-          background=_SELECTED_BG if label == selected else "#FFF",
+          background=_SELECTED_BG
+          if label == selected
+          else me.theme_var("surface-container-lowest"),
           padding=_SELECTED_PADDING if label == selected else _PADDING,
           cursor="default" if label == selected else "pointer",
           # Handle single button case (should just use a button in this case)
@@ -77,14 +79,14 @@ def button_toggle(
         me.text(label)
 
 
-_SELECTED_BG = "#DEE2F9"
+_SELECTED_BG = me.theme_var("primary-container")
 
 _PADDING = me.Padding(left=15, right=15, top=10, bottom=10)
 _SELECTED_PADDING = me.Padding(left=15, right=15, top=5, bottom=5)
 
 _BORDER_RADIUS = "20px"
 
-_DEFAULT_BORDER_STYLE = me.BorderSide(width=1, color="#74777E", style="solid")
+_DEFAULT_BORDER_STYLE = me.BorderSide(width=1, color=me.theme_var("outline"), style="solid")
 _BORDER = me.Border(
   left=_DEFAULT_BORDER_STYLE, top=_DEFAULT_BORDER_STYLE, bottom=_DEFAULT_BORDER_STYLE
 )

components/card.py

@@ -62,9 +62,11 @@ def expanable_card(
 
 
 _DEFAULT_CARD_STYLE = me.Style(
-  background="#FFF",
+  background=me.theme_var("surface-container-lowest"),
   border_radius=10,
-  border=me.Border.all(me.BorderSide(width=1, color="#DEE2E6", style="solid")),
+  border=me.Border.all(
+    me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
+  ),
   padding=me.Padding.all(15),
   margin=me.Margin(bottom=15),
 )

components/dialog.py

@@ -17,7 +17,9 @@ def dialog(is_open: bool):
   """
   with me.box(
     style=me.Style(
-      background="rgba(0,0,0,0.4)",
+      background="rgba(0, 0, 0, 0.4)"
+      if me.theme_brightness() == "light"
+      else "rgba(255, 255, 255, 0.4)",
       display="block" if is_open else "none",
       height="100%",
       overflow_x="auto",
@@ -37,7 +39,7 @@ def dialog(is_open: bool):
     ):
       with me.box(
         style=me.Style(
-          background="#fff",
+          background=me.theme_var("surface-container-lowest"),
           border_radius=20,
           box_sizing="content-box",
           box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),

components/header.py

@@ -39,8 +39,14 @@ def header_section():
 
 
 _DEFAULT_STYLE = me.Style(
-  background="#F5F8FC",
-  border=me.Border.symmetric(vertical=me.BorderSide(width=1, style="solid", color="#DEE2E6")),
+  background=me.theme_var("surface-container"),
+  border=me.Border.symmetric(
+    vertical=me.BorderSide(
+      width=1,
+      style="solid",
+      color=me.theme_var("outline-variant"),
+    )
+  ),
   padding=me.Padding.all(10),
 )
 

components/sidebar.py

@@ -12,8 +12,10 @@ def icon_sidebar():
   """
   with me.box(
     style=me.Style(
-      background="#F5F8FC",
-      border=me.Border.symmetric(horizontal=me.BorderSide(width=1, style="solid", color="#DEE2E6")),
+      background=me.theme_var("surface-container"),
+      border=me.Border.symmetric(
+        horizontal=me.BorderSide(width=1, style="solid", color=me.theme_var("outline-variant"))
+      ),
       height="100%",
     )
   ):
@@ -31,7 +33,9 @@ def icon_menu_item(*, icon: str, tooltip: str, on_click: Callable | None = None,
     key=key,
     on_click=on_click,
     style=me.Style(
-      border=me.Border(bottom=me.BorderSide(width=1, color="#DEE2E6", style="solid")),
+      border=me.Border(
+        bottom=me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
+      ),
       cursor="pointer",
       padding=me.Padding.all(15),
     ),

dialogs/add_row.py

@@ -25,7 +25,10 @@ def add_row():
         mex.button(
           "Generate",
           on_click=on_click_generate_variables,
-          style=me.Style(background="#EBF1FD"),
+          style=me.Style(
+            background=me.theme_var("secondary-container"),
+            color=me.theme_var("on-secondary-container"),
+          ),
         )
       variable_names = set(parse_variables(state.prompt))
       with me.box(style=me.Style(display="flex", flex_direction="column")):

dialogs/prompt_variables.py

@@ -23,7 +23,10 @@ def prompt_variables():
         mex.button(
           "Generate",
           on_click=on_click_generate_variables,
-          style=me.Style(background="#EBF1FD"),
+          style=me.Style(
+            background=me.theme_var("secondary-container"),
+            color=me.theme_var("on-secondary-container"),
+          ),
         )
       variable_names = set(parse_variables(state.prompt))
       with me.box(style=me.Style(display="flex", flex_direction="column")):

eval_table.py

@@ -35,12 +35,20 @@ def prompt_eval_table(
           if avg_rating is not None:
             with me.tooltip(message="Average rating"):
               me.text(
-                f"{avg_rating:.2f}", style=me.Style(font_size=13, color="#666", text_align="center")
+                f"{avg_rating:.2f}",
+                style=me.Style(
+                  font_size=13, color=me.theme_var("on-surface-variant"), text_align="center"
+                ),
               )
         elif row["type"] == "variable":
-          me.text(row.get("header_2", ""), style=me.Style(font_size=13, color="#0063FF"))
+          me.text(
+            row.get("header_2", ""), style=me.Style(font_size=13, color=me.theme_var("primary"))
+          )
         else:
-          me.text(row.get("header_2", ""), style=me.Style(font_size=13, color="#aaa"))
+          me.text(
+            row.get("header_2", ""),
+            style=me.Style(font_size=13, color=me.theme_var("on-surface-variant")),
+          )
 
     # Render examples
     for row_index, example in enumerate(prompts[0].responses):
@@ -70,7 +78,11 @@ def prompt_eval_table(
                 with me.content_button(
                   key=f"run_{row['prompt'].version}_{response_index}_{selected_version_response_index}",
                   on_click=on_click_run,
-                  style=me.Style(background="#EBF1FD", border_radius="10"),
+                  style=me.Style(
+                    background=me.theme_var("secondary-container"),
+                    color=me.theme_var("on-secondary-container"),
+                    border_radius="10",
+                  ),
                 ):
                   with me.tooltip(message="Run prompt"):
                     me.icon("play_arrow")
@@ -159,30 +171,30 @@ def _calculate_avg_rating_from_prompt(prompt: Prompt) -> float | None:
   return None
 
 
-_BORDER_SIDE = me.BorderSide(width=1, style="solid", color="#DEE2E6")
+_BORDER_SIDE = me.BorderSide(width=1, style="solid", color=me.theme_var("outline-variant"))
 
 _HEADER_STYLE = me.Style(
-  background="#FFF",
+  background=me.theme_var("surface-container-lowest"),
   border=me.Border.all(_BORDER_SIDE),
-  color="#000",
+  color=me.theme_var("on-surface"),
   font_size=15,
   font_weight="bold",
   padding=me.Padding.all(10),
 )
 
 _INDEX_STYLE = me.Style(
-  background="#FFF",
+  background=me.theme_var("surface-container-lowest"),
   border=me.Border.all(_BORDER_SIDE),
-  color="#000",
+  color=me.theme_var("on-surface"),
   font_size=14,
   padding=me.Padding.all(10),
   text_align="center",
 )
 
 _MARKDOWN_BOX_STYLE = me.Style(
-  background="#FFF",
+  background=me.theme_var("surface-container-lowest"),
   border=me.Border.all(_BORDER_SIDE),
-  color="#000",
+  color=me.theme_var("on-surface"),
   font_size=14,
   padding=me.Padding.all(10),
   max_height=300,
@@ -191,8 +203,8 @@ _MARKDOWN_BOX_STYLE = me.Style(
 )
 
 _RATING_STYLE = me.Style(
-  background="#FFF",
+  background=me.theme_var("surface-container-lowest"),
   border=me.Border.all(_BORDER_SIDE),
-  color="#000",
+  color=me.theme_var("on-surface"),
   padding=me.Padding.all(10),
 )

main.py

@@ -43,7 +43,7 @@ def app():
 
   with me.box(
     style=me.Style(
-      background="#FDFDFD",
+      background=me.theme_var("surface-container-lowest"),
       display="grid",
       grid_template_columns="50fr 50fr 1fr",
       grid_template_rows="1fr 50fr",
@@ -111,7 +111,10 @@ def app():
           mex.button(
             "Generate prompt",
             disabled=bool(state.prompt),
-            style=me.Style(background="#EBF1FD"),
+            style=me.Style(
+              background=me.theme_var("secondary-container"),
+              color=me.theme_var("on-secondary-container"),
+            ),
             on_click=handlers.on_open_dialog,
             key="dialog_show_generate_prompt",
           )
@@ -266,6 +269,8 @@ def on_select_rating(e: me.SelectSelectionChangeEvent):
 # Style helpers
 
 _STYLE_INVISIBLE_TEXTAREA = me.Style(
+  background=me.theme_var("surface-container-lowest"),
+  color=me.theme_var("on-surface"),
   overflow_y="hidden",
   width="100%",
   outline="none",

tool_sidebar.py

@@ -55,10 +55,22 @@ def tool_sidebar():
     mex.icon_menu_item(
       icon="download",
       tooltip="Download prompt data",
-      key="dialog_show_download",
       on_click=on_click_download,
     )
 
+    mex.icon_menu_item(
+      icon="light_mode" if me.theme_brightness() == "dark" else "dark_mode",
+      tooltip="Switch to " + ("light mode" if me.theme_brightness() == "dark" else "dark mode"),
+      on_click=on_click_theme_brightness,
+    )
+
+
+def on_click_theme_brightness(e: me.ClickEvent):
+  if me.theme_brightness() == "light":
+    me.set_theme_mode("dark")
+  else:
+    me.set_theme_mode("light")
+
 
 def on_click_download(e: me.ClickEvent):
   state = me.state(State)