Add dark mode

modules/gui/__init__.py

@@ -1,10 +1,11 @@
 import os
 import platform
-from tkinter import Tk, ttk
+from ttkthemes import ThemedTk
 from typing import TYPE_CHECKING
 
 import PIL.Image
 import PIL.ImageTk
+import darkdetect
 
 from modules.console import console
 from modules.context import context
@@ -24,7 +25,8 @@
 
 class PokebotGui:
     def __init__(self, main_loop: callable, on_exit: callable):
-        self.window = Tk(className="PokeBot")
+        theme = "equilux" if darkdetect.isDark() else "clam"
+        self.window = ThemedTk(className="PokeBot", theme=theme)
         self._current_screen = None
         self._main_loop = main_loop
         self._on_exit = on_exit
@@ -37,14 +39,6 @@ def __init__(self, main_loop: callable, on_exit: callable):
         self.window.bind("<KeyPress>", self._handle_key_down_event)
         self.window.bind("<KeyRelease>", self._handle_key_up_event)
 
-        style = ttk.Style()
-        style.theme_use("default")
-        style.map(
-            "Accent.TButton",
-            foreground=[("!active", "white"), ("active", "white"), ("pressed", "white")],
-            background=[("!active", "green"), ("active", "darkgreen"), ("pressed", "green")],
-        )
-
         self._apply_key_config()
 
         self._create_profile_screen = CreateProfileScreen(

modules/gui/create_profile_screen.py

@@ -1,5 +1,6 @@
 import re
-from tkinter import Tk, ttk, StringVar
+from tkinter import ttk, StringVar
+from ttkthemes import ThemedTk
 from typing import Union
 
 import plyer
@@ -13,7 +14,7 @@
 
 
 class CreateProfileScreen:
-    def __init__(self, window: Tk, enable_profile_selection_screen: callable, run_profile: callable):
+    def __init__(self, window: ThemedTk, enable_profile_selection_screen: callable, run_profile: callable):
         self.window = window
         self.enable_profile_selection_screen = enable_profile_selection_screen
         self.run_profile = run_profile

modules/gui/emulator_controls.py

@@ -1,5 +1,6 @@
 import tkinter.font
-from tkinter import Tk, ttk
+from tkinter import ttk
+from ttkthemes import ThemedTk
 from typing import Union
 
 from modules.console import console
@@ -11,7 +12,7 @@
 
 
 class EmulatorControls:
-    def __init__(self, window: Tk):
+    def __init__(self, window: ThemedTk):
         self.window = window
         self.last_known_bot_mode = context.bot_mode
 
@@ -167,6 +168,12 @@ def set_emulation_speed(speed: int) -> None:
 
     def _add_settings_controls(self, row: int, column: int):
         group = ttk.Frame(self.frame)
+        style = ttk.Style()
+        style.map(
+            "Accent.TButton",
+            foreground=[("!active", "white"), ("active", "white"), ("pressed", "white")],
+            background=[("!active", "purple1"), ("active", "purple3"), ("pressed", "purple1")],
+        )
         group.grid(row=row, column=column, sticky="W")
 
         ttk.Label(group, text="Other Settings:").grid(row=0, columnspan=2, sticky="W")
@@ -236,7 +243,7 @@ def on_video_output_click(self, click_location: tuple[int, int], scale: int):
 
 
 class DebugEmulatorControls(EmulatorControls):
-    def __init__(self, window: Tk):
+    def __init__(self, window: ThemedTk):
         super().__init__(window)
         self.debug_frame: Union[ttk.Frame, None] = None
         self.debug_notebook: ttk.Notebook

modules/gui/emulator_screen.py

@@ -1,4 +1,5 @@
-from tkinter import Tk, Button, PhotoImage
+from tkinter import Button, PhotoImage
+from ttkthemes import ThemedTk
 
 import PIL.Image
 import PIL.ImageTk
@@ -10,7 +11,7 @@
 
 
 class EmulatorScreen:
-    def __init__(self, window: Tk):
+    def __init__(self, window: ThemedTk):
         self.window = window
         self.frame: Union[ttk.Frame, None] = None
         self.canvas: Union[Canvas, None] = None

modules/gui/load_state_window.py

@@ -2,7 +2,8 @@
 import re
 import time
 from pathlib import Path
-from tkinter import Tk, ttk, Toplevel, Canvas, PhotoImage, TclError
+from tkinter import ttk, Toplevel, Canvas, PhotoImage, TclError
+from ttkthemes import ThemedTk
 
 import PIL.Image
 import PIL.ImageDraw
@@ -13,7 +14,7 @@
 
 
 class LoadStateWindow:
-    def __init__(self, window: Tk):
+    def __init__(self, window: ThemedTk):
         state_directory = context.profile.path / "states"
         if not state_directory.is_dir():
             return

modules/gui/select_profile_screen.py

@@ -1,12 +1,13 @@
 from datetime import datetime, date
-from tkinter import Tk, ttk
+from tkinter import ttk
+from ttkthemes import ThemedTk
 from typing import Union
 
 from modules.profiles import Profile, list_available_profiles
 
 
 class SelectProfileScreen:
-    def __init__(self, window: Tk, enable_profile_creation_screen: callable, run_profile: callable):
+    def __init__(self, window: ThemedTk, enable_profile_creation_screen: callable, run_profile: callable):
         self.window = window
         self.enable_profile_creation_screen = enable_profile_creation_screen
         self.run_profile = run_profile
@@ -35,6 +36,12 @@ def disable(self) -> None:
 
     def _add_header_and_controls(self, row: int = 0) -> None:
         header = ttk.Frame(self.frame)
+        style = ttk.Style()
+        style.map(
+            "Accent.TButton",
+            foreground=[("!active", "white"), ("active", "white"), ("pressed", "white")],
+            background=[("!active", "green"), ("active", "darkgreen"), ("pressed", "green")],
+        )
         header.grid(row=row, sticky="NEW")
         header.columnconfigure(0, weight=1)
 

modules/web/index.html

@@ -17,18 +17,10 @@
     <div id="screen_connection_lost">Connection Lost.<br/>Retrying&hellip;</div>
     <!-- Theme dropdown list -->
     <label for="themeSelector">Select Theme:</label>
-    <select id="themeSelector" onchange="changeTheme()">
+    <select id="themeSelector" onchange="changeTheme()"></select>
         <option value="0">Dark Theme</option>
         <option value="1">Light Theme</option>
-        <option value="2">Dark Green Theme</option>
-        <option value="3">Dark Blue Theme</option>
-        <option value="4">Dark Red Theme</option>
-        <option value="5">Black Theme</option>
-        <option value="6">Black Green Theme</option>
-        <option value="7">Black Blue Theme</option>
-        <option value="8">Black Red Theme</option>
-		<option value="random">Random Theme</option>
-    </select>
+
     <button onclick="window.open('/docs','_blank')">API Documentation</button>
 
     <div id="first_row">
@@ -604,46 +596,31 @@ <h2>Current Encounter</h2>
             context.stroke();
         }
 
-        const themes = [{
-            '--background-color': '#333',
-            '--text-color': '#fff',
-            '--background-image': 'none'
-        }, {
-            '--background-color': '#fff',
-            '--text-color': '#333',
-            '--background-image': 'none'
-        }, {
-            '--background-color': '#333',
-            '--text-color': '#00ff22',
-            '--background-image': 'none'
-        }, {
-            '--background-color': '#333',
-            '--text-color': '#0040ff',
-            '--background-image': 'none'
-        }, {
-            '--background-color': '#333',
-            '--text-color': '#f50505',
-            '--background-image': 'none'
-        }, {
-            '--background-color': '#000000',
-            '--text-color': '#fff',
-            '--background-image': 'none'
-        }, {
-            '--background-color': '#000000',
-            '--text-color': '#00ff22',
-            '--background-image': 'none'
-        }, {
-            '--background-color': '#000000',
-            '--text-color': '#0613c9',
-            '--background-image': 'none'
-        }, {
-            '--background-color': '#000000',
-            '--text-color': '#f50505',
-            '--background-image': 'none'
-        }, ];
-
+        const themes = [
+            {
+                name: "Dark Theme",
+                '--background-color': '#333',
+                '--text-color': '#fff',
+                '--background-image': 'none'
+            },
+            {
+                name: "Light Theme",
+                '--background-color': '#fff',
+                '--text-color': '#333',
+                '--background-image': 'none'
+            }
+        ];
         let currentThemeIndex = 0;
 
+        // Populate the dropdown with theme names
+        const themeSelector = document.getElementById('themeSelector');
+        themes.forEach((theme, index) => {
+            const option = document.createElement('option');
+            option.value = index.toString();
+            option.textContent = theme.name;
+            themeSelector.appendChild(option);
+        });
+
         // Check if a theme preference is stored in localStorage
         const storedThemeIndex = localStorage.getItem('themeIndex');
         if (storedThemeIndex !== null && !isNaN(storedThemeIndex)) {
@@ -653,44 +630,18 @@ <h2>Current Encounter</h2>
         // Apply the theme on initial load
         applyTheme(themes[currentThemeIndex]);
 
-        function toggleTheme() {
-            currentThemeIndex = (currentThemeIndex + 1) % themes.length;
-            applyTheme(themes[currentThemeIndex]);
-
-            // Save the selected theme index to localStorage
-            localStorage.setItem('themeIndex', currentThemeIndex.toString());
-        }
-
+        // Function to change the theme
         function changeTheme() {
-            const themeSelector = document.getElementById('themeSelector');
-            const selectedTheme = themeSelector.value;
-
-            if (selectedTheme === 'random') {
-                // Generate two random colors for the background and text
-                const randomBackgroundColor = getRandomColor();
-                const randomTextColor = getRandomColor();
-
-                const randomTheme = {
-                    '--background-color': randomBackgroundColor,
-                    '--text-color': randomTextColor,
-                    '--background-image': 'none'
-                };
+            const selectedTheme = themes[themeSelector.value];
 
-                applyTheme(randomTheme);
-            } else {
-                const selectedThemeIndex = parseInt(selectedTheme, 10);
-                const predefinedTheme = themes[selectedThemeIndex];
+            // Save the selected theme index to localStorage
+            localStorage.setItem('themeIndex', themeSelector.value);
 
-                applyTheme(predefinedTheme);
+            for (const property in selectedTheme) {
+                if (property !== 'name') {
+                    document.documentElement.style.setProperty(property, selectedTheme[property]);
+                }
             }
-
-            // Save the selected theme to localStorage
-            localStorage.setItem('themeIndex', selectedTheme.toString());
-        }
-
-        function getRandomColor() {
-            // Generate a random hex color code
-            return '#' + Math.floor(Math.random() * 16777215).toString(16);
         }
 
         function applyTheme(theme) {

pokebot.py

@@ -29,8 +29,7 @@ def on_exit() -> None:
             if gui is not None and gui.window is not None:
                 gui.window.withdraw()
 
-            print("")
-            input("Press Enter to close...")
+            input("\nPress Enter to close...")
 
 
 atexit.register(on_exit)

requirements.py

@@ -33,6 +33,8 @@
     "apispec~=6.3.0",
     "apispec-webframeworks~=0.5.2",
     "flask-swagger-ui~=4.11.1",
+    "ttkthemes~=3.2.2",
+    "darkdetect~=0.8.0",
 ]
 
 if platform.system() == "Windows":