some fixes for the theme toggle

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-icons": "^5.5.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -2897,6 +2898,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

public/manifest.json

@@ -17,7 +17,7 @@
     "64x64": "/icon64.png"
   },
   "environment": {
-    "webViewBackgroundColor": "#1a1a1a",
+    "webViewBackgroundColor": "#121212",
     "capabilities": ["chat", "dice"],
     "extras": ["colorStyles"]
   }

src/components/CharacterSheet.css

@@ -542,6 +542,16 @@ button:active {
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
 }
 
+.theme-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5rem;
+}
+
 body {
     background: var(--ts-background-primary, var(--background-color));
     transition: background-color 0.3s ease;

src/components/ThemeToggle.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
-import { useTheme } from '../contexts/ThemeContext';
+import {FaMoon, FaSun} from "react-icons/fa";
+import {useTheme} from '../contexts/ThemeContext';
 
 const ThemeToggle: React.FC = () => {
-    const { theme, toggleTheme } = useTheme();
+    const {theme, toggleTheme} = useTheme();
 
     return (
-        <button
-            className="theme-toggle"
-            onClick={toggleTheme}
-            title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
-        >
-            {theme === 'light' ? '🌙' : '☀️'}
+        <button className="theme-toggle" onClick={toggleTheme}>
+            {theme === 'light' ? <FaMoon className="theme-icon"/> :
+                <FaSun className="theme-icon"/>}
         </button>
     );
 };
 
-export default ThemeToggle;
+export default ThemeToggle;