From e8dc79f981b086409ea14e44aa2983c45710cb2f Mon Sep 17 00:00:00 2001
From: Dave Gallant <davegallant@proton.me>
Date: Sat, 14 Feb 2026 16:28:23 -0500
Subject: [PATCH] Update themes and match system

---
 index.html             |  16 +++-
 src/App.vue            | 171 ++++++++++++++++++++++++++++++++-------
 src/plugins/vuetify.js |  73 ++++++++++++-----
 src/theme.css          | 180 +++++++++++++++++++++++++++++++++++++++--
 4 files changed, 385 insertions(+), 55 deletions(-)
diff --git a/index.html b/index.html
index ade4a06..084e119 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-bs-theme="dark">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -38,6 +38,20 @@
       src="https://umami.davegallant.ca/script.js"
       data-website-id="59ffe8be-509a-471e-8cd6-a63c5b35b7aa"
     ></script>
+    
+    <!-- Theme detection script - runs before Vue loads to prevent flash of unstyled content -->
+    <script>
+      (function() {
+        // Check for saved theme preference or system preference
+        const savedTheme = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = savedTheme || (prefersDark ? 'dark' : 'light');
+        
+        // Apply theme to html element
+        document.documentElement.setAttribute('data-bs-theme', theme);
+        document.documentElement.setAttribute('data-theme', theme);
+      })();
+    </script>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index be1a5a3..321a5c0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,8 @@
 import axios from "axios";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import Loading from "vue-loading-overlay";
-import { install } from "@github/hotkey";
-import { ref, reactive } from "vue";
+import { ref } from "vue";
+import { useTheme } from 'vuetify';
 
 import "vue-loading-overlay/dist/css/index.css";
 
@@ -23,18 +22,87 @@ export default {
       loadingTooltip: {},
       tooltipPosition: { x: 0, y: 0 },
       isMobile: false,
+      currentTheme: 'dark',
+      mediaQueryListener: null,
+      vuetifyTheme: null,
+      darkModeQuery: null,
+      themeChangeHandler: null,
     };
   },
   mounted() {
     window.addEventListener("keydown", this.handleKeyDown);
     this.detectMobile();
     this.fetchDeals();
+    // Initialize theme on next tick to ensure Vuetify is ready
+    this.$nextTick(() => {
+      this.initializeTheme();
+      this.setupThemeListener();
+    });
   },
   beforeUnmount() {
     window.removeEventListener("keydown", this.handleKeyDown);
     window.removeEventListener("resize", this.detectMobile);
+    if (this.darkModeQuery && this.themeChangeHandler) {
+      this.darkModeQuery.removeEventListener('change', this.themeChangeHandler);
+    }
   },
   methods: {
+    initializeTheme() {
+      // Get Vuetify theme instance
+      this.vuetifyTheme = useTheme();
+
+      // If no saved preference, apply system preference now
+      const savedTheme = localStorage.getItem('vuetify-theme');
+      if (!savedTheme) {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = prefersDark ? 'dark' : 'light';
+        this.applyTheme(theme);
+      } else {
+        // Get current theme name from Vuetify
+        this.currentTheme = this.vuetifyTheme.global.name.value;
+      }
+    },
+    setupThemeListener() {
+      // Listen for system theme preference changes
+      const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+      this.mediaQueryListener = darkModeQuery;
+
+      // Use arrow function to preserve 'this' context
+      const themeChangeHandler = (e) => {
+        // Only auto-update theme if user hasn't set a preference manually
+        const savedTheme = localStorage.getItem('vuetify-theme');
+        if (!savedTheme) {
+          const newTheme = e.matches ? 'dark' : 'light';
+          console.log('System theme changed to:', newTheme);
+          this.applyTheme(newTheme);
+        }
+      };
+
+      darkModeQuery.addEventListener('change', themeChangeHandler);
+      // Store the handler so we can remove it later if needed
+      this.themeChangeHandler = themeChangeHandler;
+      this.darkModeQuery = darkModeQuery;
+    },
+    applyTheme(theme) {
+      // Get theme instance if not already stored
+      if (!this.vuetifyTheme) {
+        this.vuetifyTheme = useTheme();
+      }
+
+      // Apply theme using Vuetify's theme API
+      this.vuetifyTheme.global.name.value = theme;
+      this.currentTheme = theme;
+      localStorage.setItem('vuetify-theme', theme);
+      console.log('Theme applied:', theme);
+
+      // Also update data-bs-theme for any custom CSS that uses it
+      document.documentElement.setAttribute('data-bs-theme', theme === 'dark' ? 'dark' : 'light');
+    },
+    toggleTheme() {
+      const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
+      this.applyTheme(newTheme);
+    },
     detectMobile() {
       // Detect if device is mobile/tablet based on touch capability and screen size
       const hasTouch = () => {
@@ -46,11 +114,11 @@ export default {
           false
         );
       };
-      
+
       const isMobileScreen = () => {
         return window.innerWidth <= 1024;
       };
-      
+
       this.isMobile = hasTouch() || isMobileScreen();
       window.addEventListener("resize", this.detectMobile);
     },
@@ -171,21 +239,47 @@ export default {
     visibleHeaders() {
       const baseHeaders = [
         { title: "Deal", value: "title", align: "center" },
-        { title: "Score", value: "score", align: "center", sortable: true },
+        { title: "Score", value: "score", align: "center" },
       ];
-      
+
       // Only show Last Post column on desktop
       if (!this.isMobile) {
         baseHeaders.push({
           title: "Last Post",
           value: "last_post_time",
           align: "center",
-          sortable: true,
         });
       }
-      
+
       return baseHeaders;
     },
+    tooltipStyle() {
+      if (this.hoveredTopicId === null || !this.tooltipData[this.hoveredTopicId]) {
+        return {};
+      }
+      
+      let top = this.tooltipPosition.y + 10;
+      let left = this.tooltipPosition.x + 10;
+      
+      // Check if tooltip would go off bottom of screen
+      if (top > window.innerHeight - 200) {
+        // Position above the cursor instead
+        top = this.tooltipPosition.y - 200;
+      }
+      
+      // Check if tooltip would go off right side of screen
+      if (left > window.innerWidth - 420) {
+        // Position to the left of cursor instead
+        left = this.tooltipPosition.x - 420;
+      }
+      
+      return {
+        position: 'fixed',
+        left: Math.max(10, left) + 'px',
+        top: Math.max(10, top) + 'px',
+        zIndex: 9999,
+      };
+    },
   },
 };
 </script>
@@ -210,8 +304,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
         <v-data-table
           :headers="visibleHeaders"
           :items="filteredTopics"
-          :sort-by="sortColumn"
-          v-model:sortBy="sortBy"
+          :sort-by="sortBy"
           :items-per-page="50"
         >
           <template #item.title="{ item }">
@@ -252,12 +345,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
         <div
           v-if="hoveredTopicId !== null && tooltipData[hoveredTopicId]"
           class="deal-tooltip"
-          :style="{
-            position: 'fixed',
-            left: tooltipPosition.x + 10 + 'px',
-            top: tooltipPosition.y + 10 + 'px',
-            zIndex: 9999,
-          }"
+          :style="tooltipStyle"
         >
           <div class="tooltip-content">
             <div class="tooltip-header">{{ tooltipData[hoveredTopicId].topic.title }}</div>
@@ -313,20 +401,21 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
 }
 
 .tooltip-content {
-  background: #24283b;
-  border: 2px solid #a9b1d6;
+  background: var(--tooltip-bg);
+  border: 2px solid var(--tooltip-border);
   border-radius: 8px;
   padding: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   font-size: 13px;
-  color: #e0e0e0;
+  color: var(--text-primary);
   text-align: left;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
 
 .tooltip-header {
   font-weight: bold;
   font-size: 14px;
-  color: #d0d0d0;
+  color: var(--text-primary);
   margin-bottom: 8px;
   white-space: normal;
   word-wrap: break-word;
@@ -334,7 +423,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
 
 .tooltip-dealer {
   font-size: 12px;
-  color: #c0c0c0;
+  color: var(--text-secondary);
   margin-bottom: 8px;
 }
 
@@ -343,6 +432,7 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
   gap: 12px;
   margin-bottom: 8px;
   font-size: 12px;
+  color: var(--text-secondary);
 }
 
 .stat-item {
@@ -358,34 +448,57 @@ const sortBy = ref([{ key: "score", order: "desc" }]);
 .tooltip-description {
   margin-bottom: 8px;
   padding: 8px;
-  background: rgba(160, 160, 160, 0.1);
-  border-left: 2px solid #a9b1d6;
+  background: var(--bg-secondary);
+  border-left: 2px solid var(--tooltip-border);
   border-radius: 2px;
   font-size: 12px;
   white-space: normal;
   word-wrap: break-word;
   max-height: 60px;
   overflow-y: auto;
+  color: var(--text-primary);
 }
 
 .tooltip-first-post {
   margin-bottom: 8px;
   padding: 8px;
-  background: rgba(160, 160, 160, 0.1);
-  border-left: 2px solid #a9b1d6;
+  background: var(--bg-secondary);
+  border-left: 2px solid var(--tooltip-border);
   border-radius: 2px;
   font-size: 12px;
   white-space: normal;
   word-wrap: break-word;
   max-height: 60px;
   overflow-y: auto;
+  color: var(--text-primary);
 }
 
 .tooltip-times {
   font-size: 11px;
-  color: #b0b0b0;
-  border-top: 1px solid #555555;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border-color);
   padding-top: 8px;
   margin-top: 8px;
 }
+
+/* Filter input styling */
+:deep(.v-text-field) {
+  --v-field-border-color: #cccccc;
+}
+
+html[data-bs-theme="light"] :deep(.v-text-field) {
+  --v-field-border-color: #e8e8e8;
+}
+
+html[data-bs-theme="light"] :deep(.v-field__input) {
+  background-color: #fafafa !important;
+}
+
+html[data-bs-theme="light"] :deep(.v-field--focused .v-field__input) {
+  background-color: #ffffff !important;
+}
+
+html[data-bs-theme="dark"] :deep(.v-text-field) {
+  --v-field-border-color: #555555;
+}
 </style>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 0329d4e..29bec4e 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,35 +1,68 @@
 /**
  * plugins/vuetify.js
  *
- * Framework documentation: https://vuetifyjs.com`
+ * Framework documentation: https://vuetifyjs.com
  */
 
 // Styles
 import "@mdi/font/css/materialdesignicons.css";
 import "vuetify/styles";
 
-const tokyoNight = {
-  dark: true,
-  colors: {
-    background: "#1a1b26",
-    surface: "#24283b",
-    primary: "#7aa2f7",
-    secondary: "#b4f9f8",
-    accent: "#ff9e64",
-    error: "#f7768e",
-    info: "#2ac3de",
-    success: "#9ece6a",
-    warning: "#e0af68",
-  },
-};
-
 // Composables
 import { createVuetify } from "vuetify";
 
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
+const lightTheme = {
+  dark: false,
+  colors: {
+    background: "#ffffff",
+    surface: "#f5f5f5",
+    primary: "#1976d2",
+    secondary: "#424242",
+    accent: "#82b1ff",
+    error: "#f44336",
+    info: "#2196f3",
+    success: "#4caf50",
+    warning: "#ff9800",
+  },
+};
+
+const darkTheme = {
+  dark: true,
+  colors: {
+    background: "#1a1a1a",
+    surface: "#2a2a2a",
+    primary: "#5b9cf5",
+    secondary: "#a0a0a0",
+    accent: "#7aa2f7",
+    error: "#f87171",
+    info: "#60a5fa",
+    success: "#4ade80",
+    warning: "#facc15",
+  },
+};
+
+function getDefaultTheme() {
+  // Check for saved theme preference
+  const savedTheme = localStorage.getItem('vuetify-theme');
+  if (savedTheme) {
+    return savedTheme;
+  }
+
+  // Check system preference
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return prefersDark ? 'dark' : 'light';
+}
+
+// Create vuetify instance
+const vuetify = createVuetify({
   theme: {
-    defaultTheme: "tokyoNight",
-    themes: { tokyoNight },
+    defaultTheme: getDefaultTheme(),
+    themes: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
   },
 });
+
+// Export the vuetify instance so other parts of the app can access it
+export { vuetify as default };
\ No newline at end of file
diff --git a/src/theme.css b/src/theme.css
index 40f0fdd..c6f10b1 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -21,8 +21,81 @@
   direction: ltr;
 }
 
+/* Theme-aware CSS variables */
+:root {
+  /* Light theme (default) */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --border-color: #dee2e6;
+  --tooltip-bg: #f8f9fa;
+  --tooltip-border: #dee2e6;
+  --tooltip-text: #212529;
+  --link-color: #0d6efd;
+  --link-hover: #0b5ed7;
+  --link-visited: #6f42c1;
+  --footer-bg: #f8f9fa;
+  --footer-text: #212529;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2a2a2a;
+    --text-primary: #e0e0e0;
+    --text-secondary: #a0a0a0;
+    --border-color: #3a3a3a;
+    --tooltip-bg: #2a2a2a;
+    --tooltip-border: #444444;
+    --tooltip-text: #e0e0e0;
+    --link-color: #5b9cf5;
+    --link-hover: #60a5fa;
+    --link-visited: #888888;
+    --footer-bg: #1a1a1a;
+    --footer-text: #e0e0e0;
+  }
+}
+
+/* Support for explicit data-bs-theme attribute (Bootstrap override) */
+html[data-bs-theme="dark"] {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2a2a2a;
+  --text-primary: #e0e0e0;
+  --text-secondary: #a0a0a0;
+  --border-color: #3a3a3a;
+  --tooltip-bg: #2a2a2a;
+  --tooltip-border: #444444;
+  --tooltip-text: #e0e0e0;
+  --link-color: #e8e8e8;
+  --link-hover: #60a5fa;
+  --link-visited: #888888;
+  --footer-bg: #1a1a1a;
+  --footer-text: #e0e0e0;
+}
+
+html[data-bs-theme="light"] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --border-color: #dee2e6;
+  --tooltip-bg: #f8f9fa;
+  --tooltip-border: #dee2e6;
+  --tooltip-text: #212529;
+  --link-color: #333333;
+  --link-hover: #0b5ed7;
+  --link-visited: #6f42c1;
+  --footer-bg: #f8f9fa;
+  --footer-text: #212529;
+}
+
 body {
   max-width: 100%;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 html {
@@ -33,11 +106,12 @@ html {
 }
 
 footer {
-  background: #212529;
-  color: white;
+  background: var(--footer-bg);
+  color: var(--footer-text);
   padding: 3px;
   padding-right: 10px;
   padding-left: 10px;
+  border-top: 1px solid var(--border-color);
 }
 
 .footer-left {
@@ -49,6 +123,14 @@ footer {
 }
 
 .green-score {
+  color: rgb(34, 139, 34) !important;
+}
+
+html[data-bs-theme="light"] .green-score {
+  color: rgb(34, 139, 34) !important;
+}
+
+html[data-bs-theme="dark"] .green-score {
   color: rgb(158, 206, 106) !important;
 }
 
@@ -57,15 +139,16 @@ footer {
 }
 
 a {
-  color: var(--v-theme-primary);
+  color: var(--link-color);
+  transition: color 0.2s ease;
 }
 
 a:hover {
-  color: #d65d03;
+  color: var(--link-hover);
 }
 
 a:visited {
-  color: #53514f;
+  color: var(--link-visited);
 }
 
 @media (min-width: 769px) {
@@ -75,3 +158,90 @@ a:visited {
     font-size: 1.2rem;
   }
 }
+
+/* Tooltip theme support */
+.deal-tooltip {
+  pointer-events: none;
+  max-width: 400px;
+}
+
+.tooltip-content {
+  background: var(--tooltip-bg);
+  border: 2px solid var(--tooltip-border);
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-size: 13px;
+  color: var(--tooltip-text);
+  text-align: left;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.tooltip-header {
+  font-weight: bold;
+  font-size: 14px;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.tooltip-dealer {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+.tooltip-stats {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-item .material-symbols-outlined {
+  font-size: 16px;
+}
+
+.tooltip-description {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: var(--bg-secondary);
+  border-left: 2px solid var(--tooltip-border);
+  border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+  color: var(--text-primary);
+}
+
+.tooltip-first-post {
+  margin-bottom: 8px;
+  padding: 8px;
+  background: var(--bg-secondary);
+  border-left: 2px solid var(--tooltip-border);
+  border-radius: 2px;
+  font-size: 12px;
+  white-space: normal;
+  word-wrap: break-word;
+  max-height: 60px;
+  overflow-y: auto;
+  color: var(--text-primary);
+}
+
+.tooltip-times {
+  font-size: 11px;
+  color: var(--text-secondary);
+  border-top: 1px solid var(--border-color);
+  padding-top: 8px;
+  margin-top: 8px;
+}
\ No newline at end of file
