Use Sun-Valley-ttk-theme by rdbende

Author: UnsignedArduino

main.py

@@ -16,8 +16,8 @@
 from TkZero.Menu import Menu, MenuCascade, MenuCommand, MenuSeparator, \
     MenuCheckbutton, MenuRadiobutton
 from TkZero.Progressbar import Progressbar, ProgressModes
-from TkZero.Vector import Position
 from TkZero.Scale import Scale
+from TkZero.Vector import Position
 
 from create_logger import create_logger
 from picam import RemotePiCam
@@ -38,6 +38,16 @@ def __init__(self):
         super().__init__()
         self.title = "Remote PiCam"
         self.resizable(False, False)
+        theme_path = Path.cwd() / "sun-valley.tcl"
+        self.has_theme = theme_path.exists()
+        if self.has_theme:
+            logger.info(f"Importing theme file {theme_path}")
+            self.tk.call("source", str(theme_path.expanduser().resolve()))
+            self.tk.call("set_theme", "light")
+        else:
+            logger.warning(f"{theme_path} does not exist, unable to set "
+                           f"theme!")
+
         self.create_gui()
         self.create_menu()
         self.on_close = self.close_window
@@ -77,9 +87,25 @@ def create_menu(self) -> None:
         self.effect_var.trace_add("write", self.update_effect_status)
         self.iso_var = tk.IntVar(self, value=0)
         self.iso_var.trace_add("write", self.update_iso_status)
+        self.dark_mode_var = tk.BooleanVar(self, value=False)
+        self.dark_mode_var.trace_add("write", self.toggle_theme)
         self.menu_bar = Menu(self, is_menubar=True, command=self.remake_menu)
         self.remake_menu()
 
+    def toggle_theme(self, *args) -> None:
+        """
+        Toggle the theme between light and dark mode.
+
+        :return: None.
+        """
+        if self.has_theme:
+            if not self.dark_mode_var.get():
+                logger.debug("Switching to light mode")
+                self.tk.call("set_theme", "light")
+            else:
+                logger.debug("Switching to dark mode")
+                self.tk.call("set_theme", "dark")
+
     def remake_menu(self) -> None:
         """
         Remake the menus.
@@ -158,10 +184,23 @@ def remake_menu(self) -> None:
             MenuCascade(label="Control", items=[
                 MenuCommand(label="Open pan-tilt control panel",
                             underline=14,
-                            enabled=self.cam.is_connected)
+                            enabled=self.cam.is_connected,
+                            command=self.open_pan_tilt_control_panel)
+            ]),
+            MenuCascade(label="View", items=[
+                MenuCheckbutton(label="Dark mode",
+                                variable=self.dark_mode_var,
+                                enabled=self.has_theme)
             ])
         ]
 
+    def open_pan_tilt_control_panel(self) -> None:
+        """
+        Open the pan-tilt control panel.
+
+        :return: None.
+        """
+
     def set_saturation(self) -> None:
         """
         Set the saturation of the stream.
@@ -387,7 +426,7 @@ def set_resolution(self) -> None:
         new_res_frame = Frame(self.res_window)
         new_res_frame.grid(row=0, column=0, columnspan=2)
         new_res_lbl = Label(new_res_frame, text="New resolution: ")
-        new_res_lbl.grid(row=0, column=0, padx=1, pady=1, sticky=tk.NW)
+        new_res_lbl.grid(row=0, column=0, padx=1, pady=1, sticky=tk.W)
         resolutions = self.cam.settings["resolution"]["available"]
         self.new_res_combobox = Combobox(new_res_frame, values=resolutions,
                                          width=30)

sun-valley.tcl

@@ -0,0 +1,88 @@
+# Copyright © 2021 rdbende <[email protected]>
+
+source [file join [file dirname [info script]] theme light.tcl]
+source [file join [file dirname [info script]] theme dark.tcl]
+
+option add *tearOff 0
+
+proc set_theme {mode} {
+	if {$mode == "dark"} {
+		ttk::style theme use "sun-valley-dark"
+
+		array set colors {
+		    -fg             "#ffffff"
+		    -bg             "#1c1c1c"
+		    -disabledfg     "#595959"
+		    -selectfg       "#ffffff"
+		    -selectbg       "#2f60d8"
+		}
+        
+        ttk::style configure . \
+            -background $colors(-bg) \
+            -foreground $colors(-fg) \
+            -troughcolor $colors(-bg) \
+            -focuscolor $colors(-selectbg) \
+            -selectbackground $colors(-selectbg) \
+            -selectforeground $colors(-selectfg) \
+            -insertwidth 1 \
+            -insertcolor $colors(-fg) \
+            -fieldbackground $colors(-selectbg) \
+            -font {"Segoe Ui" 10} \
+            -borderwidth 1 \
+            -relief flat
+
+        tk_setPalette \
+        	background [ttk::style lookup . -background] \
+            foreground [ttk::style lookup . -foreground] \
+            highlightColor [ttk::style lookup . -focuscolor] \
+            selectBackground [ttk::style lookup . -selectbackground] \
+            selectForeground [ttk::style lookup . -selectforeground] \
+            activeBackground [ttk::style lookup . -selectbackground] \
+            activeForeground [ttk::style lookup . -selectforeground]
+        
+        ttk::style map . -foreground [list disabled $colors(-disabledfg)]
+
+        option add *font [ttk::style lookup . -font]
+        option add *Menu.selectcolor $colors(-fg)
+        option add *Menu.background #2f2f2f
+    
+	} elseif {$mode == "light"} {
+		ttk::style theme use "sun-valley-light"
+
+		array set colors {
+		    -fg             "#202020"
+		    -bg             "#fafafa"
+		    -disabledfg     "#a0a0a0"
+		    -selectfg       "#ffffff"
+		    -selectbg       "#2f60d8"
+		}
+
+        ttk::style configure . \
+            -background $colors(-bg) \
+            -foreground $colors(-fg) \
+            -troughcolor $colors(-bg) \
+            -focuscolor $colors(-selectbg) \
+            -selectbackground $colors(-selectbg) \
+            -selectforeground $colors(-selectfg) \
+            -insertwidth 1 \
+            -insertcolor $colors(-fg) \
+            -fieldbackground $colors(-selectbg) \
+            -font {"Segoe Ui" 10} \
+            -borderwidth 0 \
+            -relief flat
+
+        tk_setPalette background [ttk::style lookup . -background] \
+            foreground [ttk::style lookup . -foreground] \
+            highlightColor [ttk::style lookup . -focuscolor] \
+            selectBackground [ttk::style lookup . -selectbackground] \
+            selectForeground [ttk::style lookup . -selectforeground] \
+            activeBackground [ttk::style lookup . -selectbackground] \
+            activeForeground [ttk::style lookup . -selectforeground]
+        
+        ttk::style map . -foreground [list disabled $colors(-disabledfg)]
+
+        option add *font [ttk::style lookup . -font]
+        option add *Menu.selectcolor $colors(-fg)
+        option add *Menu.background #e7e7e7
+	}
+}