AF-VCD · colton123e · Sep 14, 2025 · Sep 14, 2025 · Sep 14, 2025 · Sep 14, 2025
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,11 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+
+    <meta name="theme-color" content="#14161A" />
+    <!-- Let the UA style built-in controls for both schemes; prefer dark first -->
+    <meta name="color-scheme" content="dark light" />
+
     <meta
       name="description"
       content="Web site created using create-react-app"
@@ -25,6 +29,53 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>AF Bullet Shaping Tool</title>
+
+    <!-- Dark-first default; flips if data-theme="light" -->
+    <style>
+      html, body { background: #14161A; color: #f2f3f5; }
+      html[data-theme="light"], html[data-theme="light"] body {
+        background: #ffffff; color: #111111;
+      }
+    </style>
+
+    <!-- Apply saved manual theme before React/CSS loads (no flash) -->
+    <script>
+      (function () {
+        try {
+          var docEl = document.documentElement;
+          var stored = localStorage.getItem('theme'); // 'light' | 'dark' | 'system' | null
+          var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+          // Decide which colors to paint immediately
+          var chosen = (stored === 'light' || stored === 'dark')
+            ? stored
+            : (prefersDark ? 'dark' : 'light');
+
+          // If the user explicitly chose light/dark, set the data attribute now.
+          if (stored === 'light' || stored === 'dark') {
+            docEl.setAttribute('data-theme', stored);
+          } else {
+            docEl.removeAttribute('data-theme'); // system
+          }
+
+          // Paint background/text to avoid any flash
+          var bg = chosen === 'dark' ? '#14161A' : '#ffffff';
+          var fg = chosen === 'dark' ? '#f2f3f5' : '#111111';
+          docEl.style.background = bg;
+          docEl.style.color = fg;
+          if (document.body) {
+            document.body.style.background = bg;
+            document.body.style.color = fg;
+          }
+
+          // Keep the browser UI (address bar) in sync
+          var metaTheme = document.querySelector('meta[name="theme-color"]');
+          if (metaTheme) metaTheme.setAttribute('content', bg);
+        } catch (e) {
+          /* no-op */
+        }
+      })();
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Bullets/Bullet.js b/src/components/Bullets/Bullet.js
@@ -12,7 +12,6 @@ function Bullet({
   const canvasRef = useRef(null);
   const [outputTextLines, setOutputTextLines] = useState(() => [" "]);
 
-  const [color, setColor] = useState("inherit");
   const [loading, setLoading] = useState(false);
   const [optimStatus, setOptimStatus] = useState(STATUS.NOT_OPT);
   const [rendering, setBulletRendering] = useState({ textLines: [""] });
@@ -67,15 +66,12 @@ function Bullet({
   }, [rendering, enableOptim, text, widthPxAdjusted]);
 
   //color effect
-  useEffect(() => {
-    if (loading) {
-      setColor("silver");
-    } else if (optimStatus === STATUS.FAILED_OPT) {
-      setColor("red");
-    } else {
-      setColor("black");
-    }
-  }, [loading, outputTextLines, optimStatus]);
+  // choose a theme-aware class for text color
+  const statusClass = loading
+    ? "is-loading"
+    : optimStatus === STATUS.FAILED_OPT
+    ? "has-text-danger"
+    : "";
 
   // the style properties help lock the canvas in the same spot and make it essentially invisible.
   //whitespace: pre-wrap is essential as it allows javascript string line breaks to appear properly.
@@ -91,9 +87,9 @@ function Bullet({
         }}
       />
       <div
+        className={statusClass}
         style={{
           minHeight: height,
-          color: color,
           display: "flex",
           flexDirection: "column",
         }}

diff --git a/src/components/Toolbars/Thesaurus.js b/src/components/Toolbars/Thesaurus.js
@@ -104,7 +104,7 @@ class SynonymViewer extends PureComponent {
 
     return (
       <div className="card">
-        <header className="card-header has-background-light	is-shadowless">
+        <header className="card-header	is-shadowless">
           <div className="card-header-title">
             <span>Thesaurus{this.props.word ? ":" : ""}</span>
             {this.props.word ? header : ""}
@@ -125,7 +125,6 @@ class SynonymViewer extends PureComponent {
 }
 
 class SynonymList extends PureComponent {
-
   render() {
     return (
       <div>
@@ -141,7 +140,11 @@ class SynonymList extends PureComponent {
                   otherAbbrs={otherAbbrs}
                 />
                 <a className="icon" onMouseDown={handleCardClick(word, this)}>
-                  <FontAwesomeIcon icon={faPlus} size="xs" color="#51cf66" />
+                  <FontAwesomeIcon
+                    icon={faPlus}
+                    size="xs"
+                    className="thesaurus-plus"
+                  />
                 </a>
               </span>
             );

diff --git a/src/components/Toolbars/Toolbars.js b/src/components/Toolbars/Toolbars.js
@@ -1,9 +1,18 @@
+import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
 import ImportTools from "./ImportTools";
 import SaveTools from "./SaveTools";
 // form width, space optimization, select text
-function OutputTools({ onOptimChange, enableOptim, onWidthUpdate, width, onHighlightChange, handleEnableHighlight, enableHighlight }) {
+function OutputTools({
+  onOptimChange,
+  enableOptim,
+  onWidthUpdate,
+  width,
+  onHighlightChange,
+  handleEnableHighlight,
+  enableHighlight,
+}) {
   const widthAWD = 202.321;
   const widthEPR = 202.321;
   const widthOPR = 201.041;
@@ -50,28 +59,30 @@ function OutputTools({ onOptimChange, enableOptim, onWidthUpdate, width, onHighl
             OPR
           </a>
         </div>
-        </div>
-        <a
-          className={
-            "control button is-dark" + (enableOptim ? "" : "is-outlined")
-          }
-          onClick={onOptimChange}
-          id="enableOptim"
-        >
-          Auto-Space
-        </a>
-        <a
-          className={
-            "control button is-dark" +
-            (enableHighlight ? "is-success" : "is-outlined")
-          }
-          onClick={() => { onHighlightChange(); handleEnableHighlight() }}
-          id="enableHighlight"
-        >
-          Show Duplicates
-        </a>
-
       </div>
+      <a
+        className={
+          "control button is-dark" + (enableOptim ? "" : "is-outlined")
+        }
+        onClick={onOptimChange}
+        id="enableOptim"
+      >
+        Auto-Space
+      </a>
+      <a
+        className={
+          "control button is-dark" +
+          (enableHighlight ? "is-success" : "is-outlined")
+        }
+        onClick={() => {
+          onHighlightChange();
+          handleEnableHighlight();
+        }}
+        id="enableHighlight"
+      >
+        Show Duplicates
+      </a>
+    </div>
   );
 }
 // normalize spaces
@@ -83,17 +94,47 @@ function InputTools({ onTextNorm }) {
   );
 }
 
-function Logo() {
+function ThemeSelector() {
+  const [theme, setTheme] = React.useState(
+    () => localStorage.getItem("theme") || "system"
+  );
+
+  React.useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "system") {
+      root.removeAttribute("data-theme"); // defer to prefers-color-scheme
+      localStorage.removeItem("theme");
+    } else {
+      root.setAttribute("data-theme", theme);
+      localStorage.setItem("theme", theme);
+    }
+  }, [theme]);
+
   return (
-    <h1 className="title">
-      <span className="logo">AF </span>
-      <span className="logo">Bull</span>et
-      <span className="logo"> Sh</span>aping &amp;
-      <span className="logo"> i</span>teration
-      <span className="logo"> t</span>ool
-    </h1>
+    <div className="field has-addons is-align-items-center">
+      <span className="control">
+        <span className="button is-static">Theme</span>
+      </span>
+      <span className="control">
+        <div className="select">
+          <select
+            aria-label="Theme"
+            value={theme}
+            onChange={(e) => setTheme(e.target.value)}
+          >
+            <option value="system">System</option>
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+          </select>
+        </div>
+      </span>
+    </div>
   );
 }
+
+function Logo() {
+  return <h1 className="title">AF Bullet Shaping &amp; Iteration Tool</h1>;
+}
 function ThesaurusTools({ onHide }) {
   return (
     <a
@@ -111,7 +152,11 @@ function ThesaurusTools({ onHide }) {
 }
 function DocumentTools(props) {
   return (
-    <nav className="navbar" role="navigation" aria-label="main navigation">
+    <nav
+      className="navbar is-wrap"
+      role="navigation"
+      aria-label="main navigation"
+    >
       <div className="navbar-start">
         <div className="navbar-item">
           <SaveTools getSavedSettings={props.getSavedSettings} />
@@ -140,6 +185,9 @@ function DocumentTools(props) {
         <div className="navbar-item">
           <ThesaurusTools onHide={props.onThesaurusHide} />
         </div>
+        <div className="navbar-item">
+          <ThemeSelector />
+        </div>
       </div>
     </nav>
   );