theme change

changed theme.css and ThemeToggle.jsx for new color and svg changes.

Author: Paebak

package-lock.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@theme-toggles/react": "^4.1.0",
     "bootstrap": "^5.3.3",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",

package.json

@@ -30,7 +30,6 @@ export default function App() {
 
           <div className="tile tile--right tile--cta">
             <div className="d-flex flex-column align-items-center text-center">
-              <div className="mb-2 fw-semibold">Appearance</div>
               <ThemeToggle />
             </div>
           </div>

src/App.jsx

@@ -1,7 +1,6 @@
-
 import React from "react";
-import { Button } from "react-bootstrap";
-import useColorMode from "../hooks/useColorMode";
+import { Around } from "@theme-toggles/react";
+import "@theme-toggles/react/css/Around.css";
 
 export default function ThemeToggle() {
   const [mode, setMode] = React.useState(
@@ -13,13 +12,16 @@ export default function ThemeToggle() {
     localStorage.setItem("theme", mode);
   }, [mode]);
 
+  const handleToggle = () => setMode(m => (m === "dark" ? "light" : "dark"));
+
   return (
-    <Button
-      variant={mode === "dark" ? "outline-light" : "outline-dark"}
-      size="sm"
-      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
-    >
-      {mode === "dark" ? "Light mode" : "Dark mode"}
-    </Button>
+    <Around
+      className="theme-toggle"
+      duration={750}
+      toggled={mode === "dark"}   // true = dark icon state
+      onToggle={handleToggle}
+      aria-label="Toggle theme"
+      title="Toggle theme"
+    />
   );
 }

src/components/ThemeToggle.jsx

@@ -27,17 +27,15 @@
 
   --bs-secondary-color: #4b5565;
   --bs-secondary-color-rgb: 75, 85, 101;
-
-  --github-watermark-fill: %2300000014;
 }
 
 /* DARK */
 :root[data-bs-theme="dark"] {
   --nf-gray-0: #0f1115;
-  --nf-gray-1: #13161c;
-  --nf-gray-2: #1a1f27;
-  --nf-gray-3: #232a35;
-  --nf-gray-7: #e8e9ee;
+  --nf-gray-1: #585a5e;
+  --nf-gray-2: #4c4f55;
+  --nf-gray-3: #4e5258;
+  --nf-gray-7: #5d5f69;
 
   --nf-green: #22c55e;
   --nf-green-600: #16a34a;
@@ -71,24 +69,30 @@ body { margin: 0; }
   min-height: 100vh;
   display: flex;
   justify-content: center;
+  padding: 20px;
   align-items: center;
-  padding: 16px;
 }
-
-.tile-grid{
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  grid-auto-rows: minmax(120px, auto);
-  width: 100%;
-  max-width: 1400px;
-  margin: 0 auto;
-  grid-auto-flow: dense;
+/* Keep the tile grid fixed at 2 columns max and centered */
+.tile-grid {
+display: grid;
+gap: 12px;
+grid-template-columns: repeat(2, minmax(0, 1fr)); /* fixed 2 columns */
+grid-auto-rows: minmax(120px, auto);
+width: 100%;
+max-width: 760px; /* same as your 2-col breakpoint width */
+margin: 0 auto; /* center the grid */
+justify-content: center; /* keep tiles centered horizontally */
+grid-auto-flow: dense;
 }
-@media (max-width: 1199.98px){ .tile-grid{ grid-template-columns: repeat(3, 1fr); max-width: 1000px; } }
-@media (max-width: 991.98px){  .tile-grid{ grid-template-columns: repeat(2, 1fr);  max-width: 760px; } }
-@media (max-width: 575.98px){  .tile-grid{ grid-template-columns: 1fr;       max-width: 560px; } }
 
+
+/* Responsive: single column for narrow screens */
+@media (max-width: 575.98px) {
+.tile-grid {
+grid-template-columns: 1fr;
+max-width: 560px;
+}
+}
 /* Base tile */
 .tile{
   background: var(--bs-tertiary-bg);
@@ -105,28 +109,20 @@ body { margin: 0; }
 }
 .tile:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.28); }
 
-/* CTA arrow bubble for ALL tiles (apply .tile--cta) */
-.tile--cta::after{
-  content: "";
-  position: absolute;
-  top: 12px; right: 12px;
-  width: 34px; height: 34px;
-  border-radius: 999px;
-  background: var(--nf-gray-7);
-  box-shadow: 0 2px 6px rgba(0,0,0,.25);
-}
+/* CTA arrow (bubble removed; arrow retained) */
+.tile--cta::after{ content: none !important; display: none !important; }
 .tile--cta::before{
   content: "";
   position: absolute;
-  top: 12px; right: 12px;
+  top: 12px; right: 15px;
   width: 34px; height: 34px;
   border-radius: 999px;
   display: grid; place-items: center;
   background:
     url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7v8' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
     center/18px 18px no-repeat;
+  filter: invert(1);
 }
-:root[data-bs-theme="dark"] .tile--cta::before{ filter: invert(1); }
 
 .tile--cta:hover{
   border-color: color-mix(in oklab, var(--nf-green) 60%, transparent);
@@ -143,40 +139,19 @@ body { margin: 0; }
 
 .tile--right{ align-items: center; justify-content: center; }
 
-/* Buttons inside tiles */
 .tile .btn{ padding: .35rem .75rem; }
 
-/* =========================
-   Hero / Blurb scale
-   ========================= */
-.hero-title{
-  font-weight: 700;
-  font-size: clamp(1.4rem, 2.5vw + .6rem, 2.2rem);
-  line-height: 1.25;
-  margin-bottom: .6rem;
-}
-.hero-copy{ opacity:.9; max-width:52ch; }
-.hero-blurb{
-  font-size: clamp(0.9rem, 1vw + 0.2rem, 1.05rem);
-  color: var(--bs-secondary-color);
-  font-weight: 400;
-  max-width: 65ch;
-  line-height: 1.5;
-  opacity: 0.95;
-}
-
 /* =========================
    GitHub Tile — solid + watermark (no gradient)
    ========================= */
 .tile--github{
   position: relative;
-  border: none;
+  border: 1px solid var(--bs-card-border-color);
   border-radius: 16px;
-  background-color: #1b1f23 !important; /* always dark to match brand */
   color: #fff !important;
   overflow: hidden;
   box-shadow: 0 8px 20px rgba(0,0,0,.35);
-  transition: transform .2s ease, box-shadow .2s ease;
+  transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease;
 }
 .tile--github:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
 
@@ -190,9 +165,43 @@ body { margin: 0; }
   opacity:.22;
   z-index:0;
 }
-.tile--github .tile-content,
-.tile--github .tile-icon{ position: relative; z-index: 1; }
+.tile--github .tile-content, .tile--github .tile-icon{ position: relative; z-index: 1; }
+
+/* =========================
+   Tile Overrides
+   ========================= */
+.tile { background: #000 !important; border-color: #000 !important; color: #fff; }
+.tile a { color: inherit; }
+.tile .tile-icon { color: inherit; }
 
-/* Arrow bubble size (used in App) */
-.icon-wrapper{ width:32px; height:32px; }
-.github-blurb{ font-size:.95rem; }
+.tile--cta:hover {
+  border-color: color-mix(in oklab, var(--nf-green) 60%, transparent);
+  box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 0 2px color-mix(in oklab, var(--nf-green) 35%, transparent);
+}
+.tile--github.tile--cta:hover {
+  box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 0 2px color-mix(in oklab, var(--nf-green) 35%, transparent);
+  border-color: color-mix(in oklab, var(--nf-green) 60%, transparent);
+}
+
+/* =========================
+   Minimalist Theme Toggle — SVG-only
+   ========================= */
+.theme-toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 52px;
+  height: 52px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.theme-toggle:hover { opacity: 0.85; transform: scale(1.05); }
+.theme-toggle svg { width: 46px; height: 46px; display: block; }
+.theme-toggle span, .tile-title, .appearance-label { display: none !important; }
+:root[data-bs-theme="dark"] .theme-toggle { color: #cee994; }
+:root[data-bs-theme="light"] .theme-toggle { color: #a3d1fecc; }
+.tile .theme-toggle { margin: auto; display: flex; justify-content: center; align-items: center; }
+/* Optional circular version */
+/* .theme-toggle { border-radius: 50%; background: rgba(255,255,255,0.05); } */