feat: Add Light Mode Switching

.gitignore

@@ -35,6 +35,9 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# local UI sandbox (throwaway preview harness — never commit)
+/src/app/sandbox/
+
 # config
 .local*config*.json
 .test-config.json
@@ -52,4 +55,6 @@ e2e/playwright-report/
 /public/ironrdp-pkg/
 /public/netbird.wasm
 .idea
-src/.local-config*
+src/.local-config*
+# local mock data (throwaway preview — never commit)
+/src/utils/mockData.ts

package.json

@@ -76,7 +76,6 @@
     "lodash": "4.18.1",
     "lucide-react": "^0.566.0",
     "next": "16.1.7",
-    "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^19.2.4",
     "react-chartjs-2": "^5.3.0",

src/app/(dashboard)/control-center/page.tsx

@@ -33,6 +33,7 @@ import {
   MessageSquareShareIcon,
   NetworkIcon,
 } from "lucide-react";
+import { useTheme } from "@/contexts/ThemeProvider";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
@@ -87,6 +88,8 @@ function ControlCenterView() {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const reactFlow = useReactFlow();
+  const { resolvedTheme } = useTheme();
+  const isLight = resolvedTheme === "light";
   const [layoutInitialized, setLayoutInitialized] = useState(false);
   const [forceLayoutChange, setForceLayoutChange] = useState(false);
   const { loggedInUser } = useLoggedInUser();
@@ -2055,9 +2058,13 @@ function ControlCenterView() {
             fitView={false}
             maxZoom={DEFAULT_MAX_ZOOM}
             minZoom={DEFAULT_MIN_ZOOM}
-            colorMode={"dark"}
+            colorMode={isLight ? "light" : "dark"}
           >
-            <Background bgColor={"#181a1d"} gap={20} color={"#717171"} />
+            <Background
+              bgColor={isLight ? "#f8fafb" : "#181a1d"}
+              gap={20}
+              color={isLight ? "#9aa5ad" : "#717171"}
+            />
           </ReactFlow>
         </PeersProvider>
       </div>

src/app/(dashboard)/group/page.tsx

@@ -115,7 +115,7 @@ const GroupDetailsName = () => {
             >
               <div
                 className={cn(
-                  "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
+                  "flex h-8 w-8 items-center justify-center gap-2 text-nb-gray-300 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer",
                   !isAllowedToRename &&
                     "opacity-40 cursor-not-allowed pointer-events-none",
                 )}

src/app/(dashboard)/peer/page.tsx

@@ -268,7 +268,7 @@ const PeerHeader = () => {
                   <ModalTrigger>
                     <div
                       className={
-                        "flex h-8 w-8 items-center justify-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
+                        "flex h-8 w-8 items-center justify-center gap-2 text-nb-gray-400 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
                       }
                     >
                       <PencilIcon size={16} />
@@ -838,7 +838,7 @@ function EditableValue({
       <span>{value}</span>
       {canEdit && (
         <button
-          className="flex w-7 h-7 items-center justify-center gap-2 text-nb-gray-400 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
+          className="flex w-7 h-7 items-center justify-center gap-2 text-nb-gray-400 hover:text-nb-gray-100 transition-all hover:bg-nb-gray-800/60 rounded-md cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
             onEdit();

src/app/(dashboard)/team/user/page.tsx

@@ -178,7 +178,7 @@ function UserOverview({ user, initialGroups }: Readonly<Props>) {
             <div className={"flex items-center gap-3"}>
               <div
                 className={
-                  "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+                  "w-10 h-10 rounded-full relative flex items-center justify-center text-nb-gray-100 uppercase text-md font-medium bg-nb-gray-900"
                 }
                 style={
                   isServiceUser

src/app/globals.css

@@ -5,20 +5,73 @@
 :root {
     --toasts-before: 0;
     --lift: 1;
+
+    /* nb-gray INVERTED ramp (light mode) — space-separated RGB channels.
+       High stops are surfaces (near-white), low stops are text (near-black).
+       DEFAULT (the app background) sits slightly below white so white
+       inputs, buttons and cards stand in front of it. */
+    --nb-gray-DEFAULT: 245 247 249;
+    --nb-gray-50: 24 26 29;
+    --nb-gray-100: 31 33 36;
+    --nb-gray-200: 46 50 56;
+    --nb-gray-250: 54 59 64;
+    --nb-gray-300: 71 78 87;
+    --nb-gray-350: 83 93 103;
+    --nb-gray-400: 97 110 121;
+    --nb-gray-500: 124 137 148;
+    --nb-gray-600: 143 156 168;
+    --nb-gray-700: 203 210 214;
+    --nb-gray-800: 223 227 230;
+    --nb-gray-850: 231 234 236;
+    --nb-gray-900: 236 238 240;
+    --nb-gray-910: 238 240 242;
+    --nb-gray-920: 241 243 244;
+    --nb-gray-925: 243 245 246;
+    --nb-gray-930: 244 246 247;
+    --nb-gray-935: 246 248 249;
+    --nb-gray-940: 248 250 251;
+    --nb-gray-950: 251 252 252;
+    --nb-gray-960: 255 255 255;
+}
+
+.dark {
+    /* nb-gray ORIGINAL ramp (dark mode) */
+    --nb-gray-DEFAULT: 24 26 29;
+    --nb-gray-50: 244 246 247;
+    --nb-gray-100: 228 231 233;
+    --nb-gray-200: 203 210 214;
+    --nb-gray-250: 183 192 198;
+    --nb-gray-300: 163 173 181;
+    --nb-gray-350: 143 156 168;
+    --nb-gray-400: 124 137 148;
+    --nb-gray-500: 97 110 121;
+    --nb-gray-600: 83 93 103;
+    --nb-gray-700: 71 78 87;
+    --nb-gray-800: 63 68 75;
+    --nb-gray-850: 54 59 64;
+    --nb-gray-900: 46 50 56;
+    --nb-gray-910: 43 47 51;
+    --nb-gray-920: 37 40 45;
+    --nb-gray-925: 30 33 35;
+    --nb-gray-930: 37 40 44;
+    --nb-gray-935: 31 33 36;
+    --nb-gray-940: 28 30 33;
+    --nb-gray-950: 24 26 29;
+    --nb-gray-960: 22 24 27;
 }
 
 html{
     @apply bg-nb-gray;
 }
 
 h1 {
-    @apply text-2xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;
+    @apply text-2xl font-medium text-nb-gray-100 my-1;
 }
 h2 {
-    @apply text-xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;
+    @apply text-xl font-medium text-nb-gray-100 my-1;
 }
 p {
-    @apply font-light tracking-wide text-gray-700 dark:text-zinc-50 text-sm;
+    @apply font-light tracking-wide text-nb-gray-200 text-sm;
 }
 
 .p-default {
@@ -103,7 +156,7 @@ p {
 }
 
 .timescape input:focus {
-    @apply bg-nb-gray-700 text-white rounded py-1 px-0.5 border-0 outline-0;
+    @apply bg-nb-gray-700 text-nb-gray-50 rounded py-1 px-0.5 border-0 outline-0;
 }
 
 /**

src/app/invite/page.tsx

@@ -111,7 +111,7 @@ function InviteAcceptContent() {
                 <Clock className="w-8 h-8 text-yellow-500" />
               </div>
             </div>
-            <h1 className="text-2xl font-semibold text-white mb-2">
+            <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
               Too Many Requests
             </h1>
             <Paragraph className="text-nb-gray-400 text-base">
@@ -138,7 +138,7 @@ function InviteAcceptContent() {
               <AlertCircle className="w-8 h-8 text-red-500" />
             </div>
           </div>
-          <h1 className="text-2xl font-semibold text-white mb-2">
+          <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
             Invalid Invite
           </h1>
           <Paragraph className="text-nb-gray-400 text-base">
@@ -166,7 +166,7 @@ function InviteAcceptContent() {
               <CheckCircle2 className="w-8 h-8 text-green-500" />
             </div>
           </div>
-          <h1 className="text-2xl font-semibold text-white mb-2">
+          <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
             Account Created!
           </h1>
           <Paragraph className="text-nb-gray-400">
@@ -194,7 +194,7 @@ function InviteAcceptContent() {
               <AlertCircle className="w-8 h-8 text-yellow-500" />
             </div>
           </div>
-          <h1 className="text-2xl font-semibold text-white mb-2">
+          <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
             Invite Expired
           </h1>
           <Paragraph className="text-nb-gray-400">
@@ -221,7 +221,7 @@ function InviteAcceptContent() {
         </div>
 
         <div className="text-center mb-8">
-          <h1 className="text-2xl font-semibold text-white mb-2">
+          <h1 className="text-2xl font-semibold dark:text-white text-nb-gray-900 mb-2">
             Welcome to NetBird
           </h1>
           <p className="dark:text-nb-gray-400 text-nb-gray-500 text-base">
@@ -235,7 +235,7 @@ function InviteAcceptContent() {
               <User2 className="w-5 h-5 text-nb-gray-400" />
             </div>
             <div>
-              <div className="text-white font-medium">{inviteInfo.name}</div>
+              <div className="dark:text-white text-nb-gray-900 font-medium">{inviteInfo.name}</div>
               <div className="text-nb-gray-400 text-sm flex items-center gap-1">
                 <Mail className="w-3 h-3" />
                 {inviteInfo.email}

src/components/Badge.tsx

@@ -17,21 +17,43 @@ const variants = cva("", {
       blue: [
         "bg-sky-100 border-sky-500 text-sky-800 border border-transparent",
       ],
-      blueDark: ["bg-sky-900 border-sky-500 text-white border"],
-      "blue-darker": ["bg-sky-900 border-sky-500 text-white border"],
-      red: ["bg-red-950/40 border-red-500 border text-red-500"],
-      purple: ["bg-purple-950/50 border-purple-500 border text-purple-500"],
-      yellow: ["bg-yellow-950 border-yellow-500 border text-yellow-400"],
-      gray: ["bg-nb-gray-930/60 border-nb-gray-800/40 text-nb-gray-300 border"],
-      lightGray: ["bg-nb-gray-910  text-nb-gray-200 border border-nb-gray-900"],
+      blueDark: [
+        "bg-sky-100 border-sky-500 text-sky-800 border dark:bg-sky-900 dark:text-white",
+      ],
+      "blue-darker": [
+        "bg-sky-100 border-sky-500 text-sky-800 border dark:bg-sky-900 dark:text-white",
+      ],
+      red: [
+        "bg-red-100 border-red-500 border text-red-700 dark:bg-red-950/40 dark:text-red-500",
+      ],
+      purple: [
+        "bg-purple-100 border-purple-500 border text-purple-700 dark:bg-purple-950/50 dark:text-purple-500",
+      ],
+      yellow: [
+        "bg-yellow-100 border-yellow-500 border text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400",
+      ],
+      gray: [
+        "bg-white border-nb-gray-700 text-nb-gray-300 border",
+        "dark:bg-nb-gray-930/60 dark:border-nb-gray-800/40",
+      ],
+      lightGray: [
+        "bg-white border-nb-gray-700 text-nb-gray-200 border",
+        "dark:bg-nb-gray-910 dark:border-nb-gray-900",
+      ],
       grayer: [
-        "bg-nb-gray-900/40 border-nb-gray-800/40 text-nb-gray-300 border",
+        "bg-white border-nb-gray-700 text-nb-gray-300 border",
+        "dark:bg-nb-gray-900/40 dark:border-nb-gray-800/40",
       ],
       "gray-ghost": [
-        "bg-nb-gray-900 border-nb-gray-800 text-nb-gray-300 border border-nb-gray-800/50",
+        "bg-white border-nb-gray-700 text-nb-gray-300 border",
+        "dark:bg-nb-gray-900 dark:border-nb-gray-800/50",
+      ],
+      green: [
+        "bg-green-100 border-green-500 border text-green-700 dark:bg-green-950 dark:text-green-400",
+      ],
+      netbird: [
+        "bg-netbird-100 border-netbird-500 border text-netbird-700 dark:bg-netbird-950 dark:text-netbird-500",
       ],
-      green: ["bg-green-950 border-green-500 border text-green-400"],
-      netbird: ["bg-netbird-950 border-netbird-500 border text-netbird-500"],
     },
     size: {
       default: "text-[0.75rem] py-1.5 px-3",
@@ -40,17 +62,17 @@ const variants = cva("", {
     hover: {
       none: [],
       blue: ["hover:bg-sky-200"],
-      purple: ["hover:bg-purple-950/40"],
-      yellow: ["hover:bg-yellow-950/40"],
-      blueDark: ["hover:bg-sky-800"],
-      "blue-darker": ["hover:bg-sky-800"],
-      red: ["hover:bg-red-950/40"],
+      purple: ["hover:bg-purple-200 dark:hover:bg-purple-950/40"],
+      yellow: ["hover:bg-yellow-200 dark:hover:bg-yellow-950/40"],
+      blueDark: ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      "blue-darker": ["hover:bg-sky-200 dark:hover:bg-sky-800"],
+      red: ["hover:bg-red-200 dark:hover:bg-red-950/40"],
       gray: ["hover:bg-nb-gray-900"],
       lightGray: ["hover:bg-nb-gray-900"],
       grayer: ["hover:bg-nb-gray-900"],
       "gray-ghost": ["hover:bg-nb-gray-800 cursor-pointer"],
-      green: ["hover:bg-green-950/50"],
-      netbird: ["hover:bg-netbird-950/50"],
+      green: ["hover:bg-green-200 dark:hover:bg-green-950/50"],
+      netbird: ["hover:bg-netbird-200 dark:hover:bg-netbird-950/50"],
     },
   },
 });