initstring · initstring · Dec 25, 2025 · Dec 25, 2025 · Dec 25, 2025 · Dec 25, 2025
diff --git a/docs/dev/STYLE.md b/docs/dev/STYLE.md
@@ -8,19 +8,20 @@ Structure and Naming (source of truth)
 - Path aliases: `@features/*`, `@server/*`, `@lib/*`, `@components/*`, and `@/*` are configured in `tsconfig.json` — prefer these over deep relative imports.
 - Naming: keep existing file names for now; future cleanup will normalize React component filenames to kebab-case and utilities to camelCase. Avoid renaming during structural moves.
 
-A concise, enforceable guide to keep the UI polished, consistent, and performant. Themes are neutral, dense, and modern — not neon or blurry.
+A concise, enforceable guide to keep the UI polished, consistent, and performant. Themes are neutral, dense, and modern — using a Professional Blue accent for clarity.
 
 Principles
 
-- Purposeful contrast: dark, cool neutrals with a restrained accent.
+- Purposeful contrast: deep neutral blacks (Zinc) or clean whites (Slate); restrained Blue accent.
+- Binary System: Strict Light vs. Dark modes. No confusing sub-themes.
 - No blur by default: crisp 1px borders; use blur only on overlays if needed.
 - Compact density: smaller paddings, tight grids, minimal chrome.
 - Consistent states: same focus, hover, and success/failure treatments everywhere.
 - Progressive rollout: tokens → primitives → pages.
 
 Canonical Surfaces & Cards
 
-- Page surface: `--surface-0` (neutral background).
+- Page surface: `--surface-0` (Zinc-950 or White).
 - List/content cards: `Card variant="default"` with 1px border. Hover = subtle border/ring, not darker fill.
 - Overlays/modals: `Card variant="elevated"` only, stronger surface and shadow.
 - Content inside modals: use neutral cards/containers; avoid nested elevated cards to prevent double-elevation.
@@ -29,16 +30,18 @@ Canonical Surfaces & Cards
 Design Tokens (CSS variables)
 Define tokens once and reference them everywhere. Do not bake colors directly into components.
 
-- Accent: `--color-accent-rgb`, `--color-accent` (for focus, selected, executed outlines).
+- Accent: `--color-accent` (Blue 500/600). Used for focus, active states, and selection.
 - Surfaces: `--surface-0/1/2` mapped to `--color-surface` and `--color-surface-elevated`.
-- Text: `--text-primary`, `--text-secondary`, `--text-muted`.
-- Status: `--status-success/warn/error/info` fg/bg pairs.
-- Borders/Focus: `--border-rgb`, `--ring`.
+- Text: `--text-primary` (Zinc-200 / Slate-900), `--text-secondary`, `--text-muted`.
+- Status: `--status-success/warn/error/info` fg/bg pairs. Distinct from Accent.
+- Borders/Focus: `--border-rgb`, `--ring` (matches Accent).
 - Legacy matrix tokens were removed; use the accent and surface variables above.
 
-Theme presets
+Theme configuration
 
-- `theme-modern-teal`, `theme-modern-blue`, `theme-modern-ember` applied on `<html>`; LocalStorage-backed toggle on dashboard.
+- Strict `light` and `dark` modes managed via `next-themes`.
+- Toggle available in sidebar (Sun/Moon).
+- Exports automatically inherit the active theme (WYSIWYG).
 
 Component Standards
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "lucide-react": "^0.555.0",
     "next": "^15.5.7",
     "next-auth": "5.0.0-beta.30",
+    "next-themes": "^0.4.6",
     "pino": "^9.14.0",
     "react": "~19.2.1",
     "react-dom": "~19.2.1",

diff --git a/src/app/(protected-routes)/analytics/trends/page.tsx b/src/app/(protected-routes)/analytics/trends/page.tsx
@@ -91,7 +91,7 @@ export default function TrendsPage() {
                 dataKey="preventionRate"
                 name="Prevention Rate"
                 title="Prevention Rate Trends"
-                color="var(--color-warning)"
+                color="var(--color-accent)"
                 icon={Shield}
               />
               <RateTrendChart

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import "@/styles/globals.css";
 
 import { type Metadata } from "next";
-import { Geist } from "next/font/google";
 import { SessionProvider } from "next-auth/react";
 
 import { TRPCReactProvider } from "@/trpc/react";
@@ -14,6 +13,10 @@ export const metadata: Metadata = {
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
+
+import { Geist } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+
 const geist = Geist({
   subsets: ["latin"],
   variable: "--font-geist-sans",
@@ -23,18 +26,21 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" suppressHydrationWarning className={`${geist.variable} theme-modern-teal`}>
-      <body>
-        <TRPCReactProvider>
-          <SessionProvider>
-            <SidebarProvider>
-              <AppLayout>
-                <main className="min-h-screen">{children}</main>
-              </AppLayout>
-            </SidebarProvider>
-          </SessionProvider>
-        </TRPCReactProvider>
+    <html lang="en" suppressHydrationWarning>
+      <body className={geist.variable}>
+        <ThemeProvider attribute="data-theme" defaultTheme="dark" enableSystem={false}>
+          <TRPCReactProvider>
+            <SessionProvider>
+              <SidebarProvider>
+                <AppLayout>
+                  <main className="min-h-screen">{children}</main>
+                </AppLayout>
+              </SidebarProvider>
+            </SessionProvider>
+          </TRPCReactProvider>
+        </ThemeProvider>
       </body>
     </html>
+
   );
 }
diff --git a/src/features/analytics/components/attack-matrix/attack-matrix.tsx b/src/features/analytics/components/attack-matrix/attack-matrix.tsx
@@ -67,7 +67,7 @@ export default function AttackMatrix() {
   }, [metrics, opsOnly, split, subIndex, usedSubs, subMetrics]);
   if (isLoading) return <div className="flex justify-center items-center h-64 text-[var(--color-text-secondary)]">Loading technique metrics...</div>;
   return (
-    <Card ref={cardRef}>
+    <Card ref={cardRef} data-export-unbounded>
       <CardContent className="space-y-3">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <Segmented

diff --git a/src/features/shared/layout/sidebar-nav.tsx b/src/features/shared/layout/sidebar-nav.tsx
@@ -7,6 +7,7 @@ import { useSession } from "next-auth/react";
 import { UserRole } from "@prisma/client";
 // Theme toggle now lives inside the UserMenu dropdown
 import { useSidebar } from "@features/shared/layout/sidebar-context";
+import { Shield } from "lucide-react";
 import { UserMenu } from "./user-menu";
 
 interface NavItem {
@@ -81,7 +82,7 @@ const navigation: NavItem[] = [
         label: "Data",
         href: "/settings/data",
       },
-      
+
     ],
   },
 ];
@@ -106,7 +107,7 @@ export function SidebarNav() {
   const isParentActive = (item: NavItem): boolean => {
     if (pathname === item.href) return true;
     if (item.children) {
-      return item.children.some(child => 
+      return item.children.some(child =>
         isParentActive(child) || pathname === child.href
       );
     }
@@ -132,11 +133,11 @@ export function SidebarNav() {
           className={`
             flex items-center justify-between px-3 py-2 text-sm rounded-[var(--radius-md)] transition-all duration-200 cursor-pointer
             ${depth > 0 ? 'ml-' + (depth * 4) : ''}
-            ${active 
-              ? 'bg-[var(--color-accent)]/20 text-[var(--color-accent)] border-l-2 border-[var(--color-accent)] -ml-[2px]' 
+            ${active
+              ? 'bg-[var(--color-accent)]/20 text-[var(--color-accent)] border-l-2 border-[var(--color-accent)] -ml-[2px]'
               : parentActive
-              ? 'text-[var(--color-text-primary)]'
-              : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-elevated)]'
+                ? 'text-[var(--color-text-primary)]'
+                : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-elevated)]'
             }
           `}
           onClick={() => {
@@ -146,7 +147,7 @@ export function SidebarNav() {
           }}
         >
           {item.href ? (
-            <Link 
+            <Link
               href={item.href}
               className="flex items-center gap-3 flex-1"
               onClick={(e) => hasChildren && e.stopPropagation()}
@@ -191,7 +192,7 @@ export function SidebarNav() {
   if (!session) return null;
 
   return (
-    <div 
+    <div
       className={`
         ${isCollapsed ? 'w-16' : 'w-64'} 
         h-screen bg-[var(--color-surface)] border-r border-[var(--color-border)] 
@@ -202,7 +203,7 @@ export function SidebarNav() {
       <div className="p-4 border-b border-[var(--color-border)]">
         <div className="flex items-center justify-between">
           <Link href="/" className={`flex items-center ${isCollapsed ? 'justify-center' : 'gap-2'}`}>
-            <div className="w-6 h-6 bg-gradient-to-br from-[var(--color-accent)] to-[var(--color-accent-muted)] rounded-[var(--radius-sm)] flex-shrink-0" />
+            <Shield className="w-8 h-8 text-[var(--color-accent)] fill-[var(--color-accent)]/10" />
             {!isCollapsed && (
               <span className="text-xl font-bold text-[var(--color-text-primary)]">RTAP</span>
             )}

diff --git a/src/features/shared/layout/theme-toggle.tsx b/src/features/shared/layout/theme-toggle.tsx
@@ -1,81 +1,38 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/button";
-
-type ThemeKey = "theme-modern-teal" | "theme-modern-blue" | "theme-modern-ember";
-
-const THEMES: { key: ThemeKey; label: string }[] = [
-  { key: "theme-modern-teal", label: "Teal" },
-  { key: "theme-modern-blue", label: "Blue" },
-  { key: "theme-modern-ember", label: "Ember" },
-];
+import { Sun, Moon } from "lucide-react";
 
 export function ThemeToggle({ variant = "full" as "full" | "compact" }: { variant?: "full" | "compact" }) {
-  const [theme, setTheme] = useState<ThemeKey>("theme-modern-teal");
-
-  // Apply theme to <html> and persist
-  const apply = (key: ThemeKey) => {
-    setTheme(key);
-    if (typeof document !== 'undefined') {
-      const root = document.documentElement;
-      ["theme-modern","theme-modern-teal","theme-modern-blue","theme-modern-ember"].forEach(c => root.classList.remove(c));
-      root.classList.add(key);
-    }
-    if (typeof localStorage !== 'undefined') {
-      localStorage.setItem('rtap.theme', key);
-    }
-  };
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
 
-  // Load stored theme on mount and apply immediately
   useEffect(() => {
-    const stored = (typeof window !== 'undefined' && (localStorage.getItem('rtap.theme') as ThemeKey | null)) ?? null;
-    const initial = stored && THEMES.some(t => t.key === stored) ? stored : "theme-modern-teal";
-    apply(initial);
+    setMounted(true);
   }, []);
 
-  if (variant === "compact") {
-    // A tiny button that cycles themes on click
-    const nextTheme = () => {
-      if (THEMES.length === 0) return;
-      const idxRaw = THEMES.findIndex(t => t.key === theme);
-      const idx = idxRaw >= 0 ? idxRaw : 0;
-      const next = THEMES[(idx + 1) % THEMES.length];
-      if (next) apply(next.key);
-    };
-    return (
-      <Button
-        variant="ghost"
-        size="sm"
-        aria-label="Toggle theme"
-        title="Toggle theme"
-        onClick={nextTheme}
-      >
-        <span
-          className="inline-block w-3.5 h-3.5 rounded-full border"
-          style={{ background: 'var(--ring)', borderColor: 'var(--color-border)' }}
-        />
-      </Button>
-    );
-  }
+  if (!mounted) return null;
+
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
 
   return (
-    <div className="inline-flex items-center rounded-md border border-[var(--color-border)] overflow-hidden">
-      {THEMES.map((t, i) => {
-        const selected = theme === t.key;
-        return (
-          <Button
-            key={t.key}
-            variant="ghost"
-            size="sm"
-            className={`rounded-none ${i === 0 ? 'rounded-l-md' : ''} ${i === THEMES.length - 1 ? 'rounded-r-md' : ''} ${selected ? 'ring-2 ring-[var(--ring)]' : ''}`}
-            aria-pressed={selected}
-            onClick={() => apply(t.key)}
-          >
-            {t.label}
-          </Button>
-        );
-      })}
-    </div>
+    <Button
+      variant="ghost"
+      size="sm"
+      aria-label="Toggle theme"
+      title={theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
+      onClick={toggleTheme}
+    >
+      {theme === "light" ? (
+        <Sun className="h-4 w-4" />
+      ) : (
+        <Moon className="h-4 w-4" />
+      )}
+      {variant === "full" && <span className="ml-2">{theme === "light" ? "Light" : "Dark"}</span>}
+    </Button>
   );
 }
diff --git a/src/lib/exportImage.ts b/src/lib/exportImage.ts
@@ -75,6 +75,7 @@ function applyExportDirectivesInPlace(root: HTMLElement) {
     applyStyleOverride(element, "max-width", "none", "important", overrides);
     applyStyleOverride(element, "height", "auto", "important", overrides);
     applyStyleOverride(element, "overflow", "visible", "important", overrides);
+    applyStyleOverride(element, "min-width", "fit-content", "important", overrides);
   });
 
   visible.forEach((element) => {