From 727dcddf371ef61cfa92108984e9c1d86fd3c325 Mon Sep 17 00:00:00 2001
From: Uwais <Uwaiskarolia1@gmail.com>
Date: Wed, 1 Jul 2026 14:34:59 +0200
Subject: [PATCH] Update cyberpunk theme: light mode overrides synced to dark
 mode colors

---
 Web_Backgrounds/cyberpunk-theme.css | 338 +++++++++++++++++++++++++---
 Web_Backgrounds/theme.json          |  40 ++--
 2 files changed, 321 insertions(+), 57 deletions(-)

diff --git a/Web_Backgrounds/cyberpunk-theme.css b/Web_Backgrounds/cyberpunk-theme.css
index 9c9e438..cc4b4cd 100644
--- a/Web_Backgrounds/cyberpunk-theme.css
+++ b/Web_Backgrounds/cyberpunk-theme.css
@@ -38,34 +38,38 @@
   --sidebar-ring: 330 100% 50%;
 }
 .light.theme-cyberpunk {
-  --background: 220 15% 96%;
-  --foreground: 240 30% 10%;
+  --background: 0 0% 98%;
+  --foreground: 240 10% 15%;
   --card: 0 0% 100%;
-  --card-foreground: 240 30% 10%;
+  --card-foreground: 240 10% 15%;
   --popover: 0 0% 100%;
-  --popover-foreground: 240 30% 10%;
-  --primary: 330 80% 48%;
+  --popover-foreground: 240 10% 15%;
+  --primary: 330 100% 50%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 180 80% 38%;
-  --secondary-foreground: 0 0% 100%;
-  --muted: 240 8% 92%;
-  --muted-foreground: 240 8% 48%;
-  --accent: 260 65% 52%;
+  --secondary: 180 100% 50%;
+  --secondary-foreground: 0 0% 0%;
+  --muted: 240 5% 94%;
+  --muted-foreground: 240 4% 48%;
+  --accent: 260 80% 60%;
   --accent-foreground: 0 0% 100%;
-  --destructive: 0 80% 55%;
+  --destructive: 0 84% 55%;
   --destructive-foreground: 0 0% 100%;
-  --border: 270 15% 84%;
-  --input: 240 8% 92%;
-  --ring: 330 80% 48%;
+  --success: 110 100% 50%;
+  --success-foreground: 0 0% 0%;
+  --warning: 30 100% 55%;
+  --warning-foreground: 0 0% 0%;
+  --border: 270 10% 88%;
+  --input: 240 5% 92%;
+  --ring: 330 100% 50%;
   --radius: 0.5rem;
   --sidebar: 0 0% 100%;
-  --sidebar-foreground: 240 30% 10%;
-  --sidebar-primary: 330 80% 48%;
+  --sidebar-foreground: 240 10% 15%;
+  --sidebar-primary: 330 100% 50%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 8% 92%;
-  --sidebar-accent-foreground: 240 30% 10%;
-  --sidebar-border: 270 15% 84%;
-  --sidebar-ring: 330 80% 48%;
+  --sidebar-accent: 240 5% 94%;
+  --sidebar-accent-foreground: 240 10% 15%;
+  --sidebar-border: 270 10% 88%;
+  --sidebar-ring: 330 100% 50%;
 }
 
 /* ============================================================================
@@ -89,11 +93,7 @@
   inset: 0;
   z-index: -1;
   pointer-events: none;
-  background:
-    repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255, 0, 127, 0.03) 59px, transparent 61px),
-    repeating-linear-gradient(0deg, transparent 0px, transparent 39px, rgba(0, 200, 255, 0.02) 39px, transparent 41px);
-  background-size: 200% 200%;
-  animation: cyberpunk-bg 50s ease-in-out infinite;
+  background: hsl(0, 0%, 98%);
 }
 
 @keyframes cyberpunk-bg {
@@ -106,12 +106,17 @@
 /* ============================================================================
    App Shell � Make the background transparent so body::before shows through
    ============================================================================ */
-.dark.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\] {
+.dark.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\],
+.light.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\] {
   background: transparent !important;
 }
-.dark.theme-cyberpunk .dark\:bg-\[\#0A0A0A\] {
+.dark.theme-cyberpunk .dark\:bg-\[\#0A0A0A\],
+.light.theme-cyberpunk .dark\:bg-\[\#0A0A0A\] {
   background: transparent !important;
 }
+.light.theme-cyberpunk .min-h-screen {
+  background: hsl(0, 0%, 98%) !important;
+}
 
 /* ============================================================================
    Top Navigation & Header Bar
@@ -152,24 +157,32 @@
 /* ============================================================================
    Page Header � Dashboard title
    ============================================================================ */
-.dark.theme-cyberpunk .border-l-4.border-\[\#C84B4B\] {
+.dark.theme-cyberpunk .border-l-4.border-\[\#C84B4B\],
+.light.theme-cyberpunk .border-l-4.border-\[\#C84B4B\] {
   border-left-color: hsl(330, 100%, 50%) !important;
 }
-.dark.theme-cyberpunk .dark\:border-\[\#FF1111\] {
+.dark.theme-cyberpunk .dark\:border-\[\#FF1111\],
+.light.theme-cyberpunk .dark\:border-\[\#FF1111\] {
   border-left-color: hsl(330, 100%, 50%) !important;
 }
 .dark.theme-cyberpunk .dark\:text-white.text-2xl.font-bold {
   color: hsl(0, 0%, 97%) !important;
   text-shadow: 0 0 6px rgba(255, 0, 127, 0.15);
 }
-.dark.theme-cyberpunk .dark\:text-\[\#AAAAAA\] {
+.light.theme-cyberpunk .text-2xl.font-bold {
+  color: hsl(220, 20%, 12%) !important;
+  font-weight: 800 !important;
+}
+.dark.theme-cyberpunk .dark\:text-\[\#AAAAAA\],
+.light.theme-cyberpunk .text-\[\#AAAAAA\] {
   color: hsl(240, 8%, 50%) !important;
 }
 
 /* ============================================================================
    Section Subtitles � "Pipeline Overview" / "Analytics"
    ============================================================================ */
-.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest {
+.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest,
+.light.theme-cyberpunk .text-xs.font-semibold.tracking-widest {
   color: hsl(240, 8%, 38%) !important;
   letter-spacing: 0.18em;
 }
@@ -257,7 +270,8 @@
    ============================================================================ */
 
 /* Pipeline Overview metric cards � semi-transparent glass + neon-pink glow border */
-.dark.theme-cyberpunk .group.h-full > .rounded-xl.border {
+.dark.theme-cyberpunk .group.h-full > .rounded-xl.border,
+.light.theme-cyberpunk .group.h-full > .rounded-xl.border {
   background: rgba(20, 20, 25, 0.75) !important;
   backdrop-filter: blur(10px) !important;
   border: 2px solid hsl(330, 100%, 50%) !important;
@@ -267,7 +281,8 @@
               0 -2px 8px rgba(255, 0, 127, 0.15),
               0 4px 24px rgba(0, 0, 0, 0.5) !important;
 }
-.dark.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
+.dark.theme-cyberpunk .group.h-full:hover > .rounded-xl.border,
+.light.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
   border-color: hsl(330, 100%, 55%) !important;
   box-shadow: 0 0 0 2px hsla(330, 100%, 50%, 0.5),
               0 0 20px rgba(255, 0, 127, 0.3),
@@ -277,13 +292,15 @@
 }
 
 /* Neon-pink top border strip on every card */
-.dark.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
+.dark.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm,
+.light.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
   background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
   box-shadow: 0 0 8px rgba(255, 0, 127, 0.3), 0 0 16px rgba(255, 0, 127, 0.1) !important;
 }
 
 /* Stat value � bright white with subtle glow */
-.dark.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
+.dark.theme-cyberpunk .text-3xl.font-bold.tracking-tight,
+.light.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
   color: hsl(0, 0%, 97%) !important;
   text-shadow: 0 0 8px rgba(255, 0, 127, 0.1);
 }
@@ -336,7 +353,8 @@
 }
 
 /* Bottom glow bar on cards */
-.dark.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
+.dark.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1,
+.light.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
   background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.25), transparent) !important;
 }
 
@@ -829,7 +847,10 @@
 ============================================================================ */
 .dark.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
 .dark.theme-cyberpunk [class*="bg-card"],
-.dark.theme-cyberpunk .rounded-xl.border.bg-card {
+.dark.theme-cyberpunk .rounded-xl.border.bg-card,
+.light.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
+.light.theme-cyberpunk [class*="bg-card"],
+.light.theme-cyberpunk .rounded-xl.border.bg-card {
   border-top: 2px solid hsl(330, 100%, 50%) !important;
   border-bottom: 2px solid hsl(330, 100%, 50%) !important;
   box-shadow: 0 4px 20px rgba(255, 0, 127, 0.15) !important;
@@ -929,6 +950,11 @@
 .dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest.uppercase {
   color: hsl(210, 20%, 88%) !important;
 }
+.light.theme-cyberpunk .text-xs.font-semibold.tracking-widest.uppercase {
+  color: hsl(220, 15%, 20%) !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.18em;
+}
 
 /* ============================================================================
    Pipeline Color Bars — Cyberpunk neon pink/cyan
@@ -969,3 +995,241 @@
   color: #1BB0CE !important;
   background: none !important;
 }
+
+/* Progress bar background track — light theme */
+.light.theme-cyberpunk .w-full.h-1\.5.bg-muted.rounded-full {
+  background: hsl(240, 5%, 90%) !important;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
+}
+/* Progress bar fill — red/faded-red → neon pink */
+.light.theme-cyberpunk .h-full.rounded-full.bg-gradient-to-r {
+  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
+  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3) !important;
+}
+/* Progress bar fill — blue → neon cyan */
+.light.theme-cyberpunk .h-full.rounded-full {
+  background: hsl(180, 100%, 50%) !important;
+}
+/* Percentage text above progress bars — dark slate */
+.light.theme-cyberpunk .text-sm.font-semibold {
+  color: hsl(220, 15%, 20%) !important;
+}
+
+/* ============================================================================
+   LIGHT THEME — Metric Card Icons & Indicator Lines Override
+   ============================================================================ */
+.light.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
+.light.theme-cyberpunk [class*="bg-card"],
+.light.theme-cyberpunk .rounded-xl.border.bg-card {
+  border-top: 2px solid hsl(330, 100%, 50%) !important;
+  border-bottom: 2px solid hsl(330, 100%, 50%) !important;
+  box-shadow: 0 4px 20px rgba(255, 0, 127, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
+  background: hsl(0, 0%, 100%) !important;
+}
+.light.theme-cyberpunk .group.h-full > .rounded-xl.border {
+  background: hsl(0, 0%, 100%) !important;
+  border: 2px solid hsl(330, 100%, 50%) !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(255, 0, 127, 0.1) !important;
+}
+.light.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
+  border-color: hsl(330, 100%, 55%) !important;
+  box-shadow: 0 4px 24px rgba(255, 0, 127, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+}
+.light.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
+  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.2) !important;
+}
+.light.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
+  color: hsl(240, 10%, 15%) !important;
+}
+.light.theme-cyberpunk .text-sm.font-medium.text-muted-foreground {
+  color: hsl(240, 4%, 48%) !important;
+}
+.light.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl {
+  background: hsla(330, 100%, 50%, 0.08) !important;
+}
+.light.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl svg.h-6 {
+  color: hsl(330, 100%, 50%) !important;
+}
+.light.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
+  background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.2), transparent) !important;
+}
+
+/* Pipeline accent lines — odd cards neon pink */
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
+  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
+}
+/* Pipeline accent lines — even cards neon cyan */
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
+  background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
+  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
+}
+/* Icon containers — odd neon pink, even neon cyan */
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
+  background: hsla(330, 100%, 50%, 0.12) !important;
+}
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
+  background: hsla(180, 100%, 50%, 0.1) !important;
+}
+/* Icon SVG colors — odd neon pink, even neon cyan */
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
+  color: hsl(330, 100%, 50%) !important;
+}
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
+  color: hsl(180, 100%, 50%) !important;
+}
+/* Bottom glow bars — odd neon pink, even neon cyan */
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
+  background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.3), transparent) !important;
+}
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
+  background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important;
+}
+.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
+  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
+}
+
+/* ============================================================================
+   LIGHT THEME — Donut Chart Segment Colors (mirrors dark mode)
+   ============================================================================ */
+.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(1) {
+  fill: hsl(285, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(189, 0, 255, 0.4));
+}
+.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(2) {
+  fill: hsl(186, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
+}
+.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(3) {
+  fill: hsl(51, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
+}
+.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(4) {
+  fill: hsl(110, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4));
+}
+.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(5) {
+  fill: hsl(340, 100%, 50%) !important;
+  filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.3));
+}
+
+/* Legend dots — match dark mode colors */
+.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1) .rounded-full {
+  background: hsl(285, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(189, 0, 255, 0.5) !important;
+}
+.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2) .rounded-full {
+  background: hsl(186, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
+}
+.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3) .rounded-full {
+  background: hsl(51, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
+}
+.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4) .rounded-full {
+  background: hsl(110, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
+}
+.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5) .rounded-full {
+  background: hsl(340, 100%, 50%) !important;
+  box-shadow: 0 0 8px rgba(255, 0, 85, 0.4) !important;
+}
+
+/* ============================================================================
+   LIGHT THEME — Bar Chart (mirrors dark mode)
+   ============================================================================ */
+.light.theme-cyberpunk svg rect[fill*="newLeadsGrad"] {
+  fill: hsl(330, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.5)) !important;
+  rx: 4;
+}
+.light.theme-cyberpunk svg rect[fill*="closedGrad"] {
+  fill: hsl(186, 100%, 50%) !important;
+  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)) !important;
+  rx: 4;
+}
+.light.theme-cyberpunk .items-start .gap-4 > :first-child .rounded-sm {
+  background: hsl(330, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(255, 0, 127, 0.7), 0 0 20px rgba(255, 0, 127, 0.25) !important;
+  border: 1px solid hsl(330, 100%, 60%) !important;
+}
+.light.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .rounded-sm {
+  background: hsl(186, 100%, 50%) !important;
+  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.2) !important;
+  border: 1px solid hsl(186, 100%, 55%) !important;
+}
+.light.theme-cyberpunk .items-start .gap-4 > :first-child .text-xs {
+  color: hsl(330, 100%, 65%) !important;
+  font-weight: 600;
+}
+.light.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .text-xs {
+  color: hsl(186, 100%, 60%) !important;
+  font-weight: 600;
+}
+
+/* ============================================================================
+   LIGHT THEME — Status Badges (mirrors dark mode neon pills)
+   ============================================================================ */
+.light.theme-cyberpunk [class*="bg-blue-500/10"] {
+  background: hsla(186, 100%, 50%, 0.12) !important;
+  color: hsl(186, 100%, 40%) !important;
+  border-color: hsla(186, 100%, 50%, 0.25) !important;
+  border-radius: 9999px !important;
+}
+.light.theme-cyberpunk [class*="bg-amber-500/10"] {
+  background: hsla(285, 100%, 50%, 0.12) !important;
+  color: hsl(285, 100%, 45%) !important;
+  border-color: hsla(285, 100%, 50%, 0.25) !important;
+  border-radius: 9999px !important;
+}
+.light.theme-cyberpunk [class*="bg-purple-500/10"] {
+  background: hsla(40, 100%, 55%, 0.12) !important;
+  color: hsl(40, 90%, 40%) !important;
+  border-color: hsla(40, 100%, 55%, 0.25) !important;
+  border-radius: 9999px !important;
+}
+.light.theme-cyberpunk [class*="bg-emerald-500/10"] {
+  background: hsla(350, 75%, 45%, 0.12) !important;
+  color: hsl(350, 75%, 40%) !important;
+  border-color: hsla(350, 75%, 45%, 0.25) !important;
+  border-radius: 9999px !important;
+}
+.light.theme-cyberpunk [class*="bg-zinc-500/10"] {
+  background: hsla(0, 0%, 40%, 0.08) !important;
+  color: hsl(0, 0%, 40%) !important;
+  border-color: hsla(0, 0%, 40%, 0.15) !important;
+  border-radius: 9999px !important;
+}
+.light.theme-cyberpunk .text-blue-600.dark\:text-blue-400 {
+  color: hsl(186, 100%, 40%) !important;
+}
+.light.theme-cyberpunk .text-amber-600.dark\:text-amber-400 {
+  color: hsl(285, 100%, 45%) !important;
+}
+.light.theme-cyberpunk .text-purple-600.dark\:text-purple-400 {
+  color: hsl(40, 90%, 40%) !important;
+}
+.light.theme-cyberpunk .text-emerald-600.dark\:text-emerald-400 {
+  color: hsl(350, 75%, 40%) !important;
+}
+.light.theme-cyberpunk .text-zinc-600.dark\:text-zinc-400 {
+  color: hsl(0, 0%, 40%) !important;
+}
+
+/* Status dots — light theme */
+.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-blue-500 {
+  background: hsl(186, 100%, 50%) !important;
+}
+.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-amber-500 {
+  background: hsl(285, 100%, 50%) !important;
+}
+.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-purple-500 {
+  background: hsl(40, 100%, 55%) !important;
+}
+.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-emerald-500 {
+  background: hsl(350, 75%, 45%) !important;
+}
+.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-zinc-500 {
+  background: hsl(0, 0%, 40%) !important;
+}
diff --git a/Web_Backgrounds/theme.json b/Web_Backgrounds/theme.json
index e84ec74..218c174 100644
--- a/Web_Backgrounds/theme.json
+++ b/Web_Backgrounds/theme.json
@@ -40,33 +40,33 @@
     },
     "light": {
       "colors": {
-        "background": "hsl(220, 15%, 96%)",
-        "foreground": "hsl(240, 30%, 10%)",
+        "background": "hsl(0, 0%, 98%)",
+        "foreground": "hsl(240, 10%, 15%)",
         "card": "hsl(0, 0%, 100%)",
-        "cardForeground": "hsl(240, 30%, 10%)",
+        "cardForeground": "hsl(240, 10%, 15%)",
         "popover": "hsl(0, 0%, 100%)",
-        "popoverForeground": "hsl(240, 30%, 10%)",
-        "primary": "hsl(330, 80%, 48%)",
+        "popoverForeground": "hsl(240, 10%, 15%)",
+        "primary": "hsl(330, 100%, 50%)",
         "primaryForeground": "hsl(0, 0%, 100%)",
-        "secondary": "hsl(180, 80%, 38%)",
-        "secondaryForeground": "hsl(0, 0%, 100%)",
-        "muted": "hsl(240, 8%, 92%)",
-        "mutedForeground": "hsl(240, 8%, 48%)",
-        "accent": "hsl(260, 65%, 52%)",
+        "secondary": "hsl(180, 100%, 50%)",
+        "secondaryForeground": "hsl(0, 0%, 0%)",
+        "muted": "hsl(240, 5%, 94%)",
+        "mutedForeground": "hsl(240, 4%, 48%)",
+        "accent": "hsl(260, 80%, 60%)",
         "accentForeground": "hsl(0, 0%, 100%)",
-        "destructive": "hsl(0, 80%, 55%)",
+        "destructive": "hsl(0, 84%, 55%)",
         "destructiveForeground": "hsl(0, 0%, 100%)",
-        "border": "hsl(270, 15%, 84%)",
-        "input": "hsl(240, 8%, 92%)",
-        "ring": "hsl(330, 80%, 48%)",
+        "border": "hsl(270, 10%, 88%)",
+        "input": "hsl(240, 5%, 92%)",
+        "ring": "hsl(330, 100%, 50%)",
         "sidebar": "hsl(0, 0%, 100%)",
-        "sidebarForeground": "hsl(240, 30%, 10%)",
-        "sidebarPrimary": "hsl(330, 80%, 48%)",
+        "sidebarForeground": "hsl(240, 10%, 15%)",
+        "sidebarPrimary": "hsl(330, 100%, 50%)",
         "sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
-        "sidebarAccent": "hsl(240, 8%, 92%)",
-        "sidebarAccentForeground": "hsl(240, 30%, 10%)",
-        "sidebarBorder": "hsl(270, 15%, 84%)",
-        "sidebarRing": "hsl(330, 80%, 48%)"
+        "sidebarAccent": "hsl(240, 5%, 94%)",
+        "sidebarAccentForeground": "hsl(240, 10%, 15%)",
+        "sidebarBorder": "hsl(270, 10%, 88%)",
+        "sidebarRing": "hsl(330, 100%, 50%)"
       }
     }
   },