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
@@ -53,4 +56,6 @@ playwright-report*.zip
 /public/ironrdp-pkg/
 /public/netbird.wasm
 .idea
-src/.local-config*
+src/.local-config*
+# local mock data (throwaway preview — never commit)
+/src/utils/mockData.ts

src/app/(dashboard)/(cloud)/integrations/page.tsx

@@ -60,7 +60,7 @@ export default function Integrations() {
             (!isNetBirdCloud() && (permission?.settings?.read ?? false))
           }
         >
-          <div className={"border-l border-nb-gray-930 w-full"}>
+          <div className={"w-full"}>
             <IdentityProviderTab />
             <SSOTab />
             <EventStreamingTab />

src/app/(dashboard)/agent-network/configuration/page.tsx

@@ -68,7 +68,7 @@ export default function AgentNetworkConfigurationPage() {
           <GroupsProvider>
             <PeersProvider>
               <AIProvidersProvider>
-                <div className={"border-l border-nb-gray-930 w-full"}>
+                <div className={"w-full"}>
                   <Tabs.Content
                     value={TAB_BUDGET_SETTINGS}
                     className={"w-full"}

src/app/(dashboard)/agent-network/providers/page.tsx

@@ -61,7 +61,7 @@ function EndpointBadge({ endpoint }: { endpoint: string }) {
       <button
         type={"button"}
         className={
-          "inline-flex items-center gap-1.5 rounded-md border border-nb-gray-700 bg-nb-gray-800/60 px-2.5 py-1.5 text-[11px] font-medium text-nb-gray-200 hover:bg-nb-gray-800 hover:text-white transition-colors shrink-0"
+          "inline-flex items-center gap-1.5 rounded-md border border-nb-gray-700 bg-nb-gray-800/60 px-2.5 py-1.5 text-[11px] font-medium text-nb-gray-300 dark:text-nb-gray-200 hover:bg-nb-gray-800 dark:hover:text-white transition-colors shrink-0"
         }
         onClick={() => copy("Endpoint copied to clipboard")}
         aria-label={"Copy endpoint"}
@@ -72,7 +72,7 @@ function EndpointBadge({ endpoint }: { endpoint: string }) {
       <button
         type={"button"}
         className={
-          "inline-flex items-center gap-1.5 rounded-md border border-nb-gray-700 bg-nb-gray-800/60 px-2.5 py-1.5 text-[11px] font-medium text-nb-gray-200 hover:bg-nb-gray-800 hover:text-white transition-colors shrink-0"
+          "inline-flex items-center gap-1.5 rounded-md border border-nb-gray-700 bg-nb-gray-800/60 px-2.5 py-1.5 text-[11px] font-medium text-nb-gray-300 dark:text-nb-gray-200 hover:bg-nb-gray-800 dark:hover:text-white transition-colors shrink-0"
         }
         onClick={() => setConnectOpen(true)}
         aria-label={"Agent config"}

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

@@ -15,6 +15,7 @@ import React, { useState } from "react";
 import { useSWRConfig } from "swr";
 import GroupsProvider from "@/contexts/GroupsProvider";
 import PeersProvider from "@/contexts/PeersProvider";
+import { useTheme } from "@/contexts/ThemeProvider";
 import PoliciesProvider from "@/contexts/PoliciesProvider";
 import { Network } from "@/interfaces/Network";
 import PageContainer from "@/layouts/PageContainer";
@@ -105,6 +106,8 @@ const PRO_OPTIONS = { hideAttribution: true };
 const DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: EMPTY_STATE_ZOOM };
 
 function ControlCenterCanvas() {
+  const { resolvedTheme } = useTheme();
+  const isLight = resolvedTheme === "light";
   const canvas = useCanvasState();
   const ui = useControlCenterUI();
   const draft = useDraft();
@@ -283,7 +286,7 @@ function ControlCenterCanvas() {
         onInit={stableOnInit}
         maxZoom={DEFAULT_MAX_ZOOM}
         minZoom={DEFAULT_MIN_ZOOM}
-        colorMode={"dark"}
+        colorMode={isLight ? "light" : "dark"}
         panOnDrag={canInteract}
         panOnScroll={draft.isSelectMode && !emptyState}
         zoomOnScroll={canInteract}
@@ -297,7 +300,11 @@ function ControlCenterCanvas() {
         selectionOnDrag={draft.isSelectMode && !emptyState}
         selectionMode={SelectionMode.Partial}
       >
-        <Background bgColor={"#181a1d"} gap={20} color={"#717171"} />
+        <Background
+          bgColor={isLight ? "#f8fafb" : "#181a1d"}
+          gap={20}
+          color={isLight ? "#9aa5ad" : "#717171"}
+        />
         <CanvasContextMenu onOpenChange={setContextMenuOpen} />
         <NodeContextMenu
           position={nodeContextMenuPos}

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

@@ -257,7 +257,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} />
@@ -741,7 +741,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)/settings/page.tsx

@@ -107,7 +107,7 @@ export default function NetBirdSettings() {
           page={"Settings"}
           hasAccess={permission?.billing?.read || permission?.settings?.read}
         >
-          <div className={"border-l border-nb-gray-930 w-full"}>
+          <div className={"w-full"}>
             {account && <AuthenticationTab account={account} />}
             {permission.setup_keys.read && <SetupKeysTab />}
             {account?.settings?.embedded_idp_enabled &&

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 {
@@ -95,7 +148,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;
 }
 
 .timescape .separator {

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/cloud/traffic-events/table/TrafficEventsDetailRow.tsx

@@ -143,7 +143,7 @@ const PolicyListItem = ({
         <Link href={`/access-control?id=${policy?.id}`}>
           <span
             className={
-              "flex gap-1 underline underline-offset-4 decoration-dotted text-nb-gray-100 hover:text-white"
+              "flex gap-1 underline underline-offset-4 decoration-dotted text-nb-gray-100 hover:text-nb-gray-50"
             }
           >
             {policy?.name}