Themes Name changed

Web_Backgrounds/cyber2-theme.css

@@ -1,4 +1,4 @@
-.dark.theme-cyber {
+.dark.theme-cyber2 {
   --background: 240 30% 4%;
   --foreground: 180 50% 95%;
   --card: 240 25% 8%;
@@ -29,7 +29,7 @@
   --sidebar-ring: 280 80% 55%;
 }
 
-.light.theme-cyber {
+.light.theme-cyber2 {
   --background: 180 20% 96%;
   --foreground: 240 40% 10%;
   --card: 0 0% 100%;
@@ -60,17 +60,17 @@
   --sidebar-ring: 280 60% 50%;
 }
 
-.dark.theme-cyber body {
+.dark.theme-cyber2 body {
   background: transparent
     linear-gradient(135deg, rgba(0, 10, 20, 0.95), rgba(10, 0, 20, 0.9));
   position: relative;
 }
 
-.dark.theme-cyber body > div {
+.dark.theme-cyber2 body > div {
   background: transparent !important;
 }
 
-.dark.theme-cyber body::before {
+.dark.theme-cyber2 body::before {
   content: "";
   position: fixed;
   inset: 0;
@@ -82,7 +82,7 @@
   background-size: 40px 40px;
 }
 
-.dark.theme-cyber body::after {
+.dark.theme-cyber2 body::after {
   content: "";
   position: fixed;
   inset: 0;
@@ -104,7 +104,7 @@
   animation: neon-drift 20s ease-in-out infinite alternate;
 }
 
-.light.theme-cyber body::before {
+.light.theme-cyber2 body::before {
   content: "";
   position: fixed;
   inset: 0;
@@ -123,191 +123,191 @@
   100% { background-position: 0% 100%; opacity: 0.6; }
 }
 
-.dark.theme-cyber .text-glow {
+.dark.theme-cyber2 .text-glow {
   text-shadow: 0 0 10px hsl(180, 100%, 50%), 0 0 30px hsl(180, 100%, 50%), 0 0 60px rgba(0, 255, 255, 0.5);
 }
 
-.light.theme-cyber .text-glow {
+.light.theme-cyber2 .text-glow {
   text-shadow: 0 0 8px hsl(180, 100%, 40%), 0 0 20px hsl(180, 100%, 40%), 0 0 40px rgba(0, 200, 200, 0.3);
 }
 
-.dark.theme-cyber h1, .dark.theme-cyber h2, .dark.theme-cyber h3 {
+.dark.theme-cyber2 h1, .dark.theme-cyber2 h2, .dark.theme-cyber2 h3 {
   background: linear-gradient(135deg, hsl(180, 100%, 50%), hsl(280, 80%, 55%));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-.light.theme-cyber h1, .light.theme-cyber h2, .light.theme-cyber h3 {
+.light.theme-cyber2 h1, .light.theme-cyber2 h2, .light.theme-cyber2 h3 {
   background: linear-gradient(135deg, hsl(180, 100%, 35%), hsl(280, 60%, 45%));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-.dark.theme-cyber a {
+.dark.theme-cyber2 a {
   color: hsl(180, 100%, 55%);
   text-decoration: none;
   transition: color 0.2s;
 }
 
-.light.theme-cyber a {
+.light.theme-cyber2 a {
   color: hsl(180, 100%, 35%);
   text-decoration: none;
   transition: color 0.2s;
 }
 
-.dark.theme-cyber a:hover {
+.dark.theme-cyber2 a:hover {
   color: hsl(280, 80%, 60%);
   text-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
 }
 
-.light.theme-cyber a:hover {
+.light.theme-cyber2 a:hover {
   color: hsl(280, 60%, 50%);
 }
 
-.dark.theme-cyber blockquote {
+.dark.theme-cyber2 blockquote {
   border-left: 3px solid hsl(280, 80%, 55%);
   color: hsl(180, 20%, 70%);
   font-style: italic;
 }
 
-.light.theme-cyber blockquote {
+.light.theme-cyber2 blockquote {
   border-left: 3px solid hsl(280, 60%, 50%);
   color: hsl(240, 10%, 45%);
   font-style: italic;
 }
 
-.dark.theme-cyber code {
+.dark.theme-cyber2 code {
   color: hsl(180, 100%, 55%);
   background: rgba(0, 255, 255, 0.08);
   border: 1px solid rgba(0, 255, 255, 0.15);
 }
 
-.light.theme-cyber code {
+.light.theme-cyber2 code {
   color: hsl(280, 60%, 45%);
   background: rgba(0, 200, 200, 0.05);
   border: 1px solid rgba(0, 200, 200, 0.1);
 }
 
-.dark.theme-cyber pre {
+.dark.theme-cyber2 pre {
   background: rgba(0, 5, 15, 0.9);
   border: 1px solid rgba(0, 255, 255, 0.1);
 }
 
-.light.theme-cyber pre {
+.light.theme-cyber2 pre {
   background: rgba(0, 200, 200, 0.03);
   border: 1px solid rgba(0, 200, 200, 0.08);
 }
 
-.dark.theme-cyber hr {
+.dark.theme-cyber2 hr {
   border-color: rgba(0, 255, 255, 0.15);
 }
 
-.light.theme-cyber hr {
+.light.theme-cyber2 hr {
   border-color: rgba(0, 200, 200, 0.1);
 }
 
-.dark.theme-cyber table th {
+.dark.theme-cyber2 table th {
   color: hsl(180, 100%, 55%);
 }
 
-.light.theme-cyber table th {
+.light.theme-cyber2 table th {
   color: hsl(180, 100%, 35%);
 }
 
-.dark.theme-cyber table td {
+.dark.theme-cyber2 table td {
   border-color: rgba(0, 255, 255, 0.12);
 }
 
-.light.theme-cyber table td {
+.light.theme-cyber2 table td {
   border-color: rgba(0, 200, 200, 0.1);
 }
 
-.dark.theme-cyber ::selection {
+.dark.theme-cyber2 ::selection {
   background: rgba(0, 255, 255, 0.2);
   color: hsl(0, 0%, 0%);
 }
 
-.light.theme-cyber ::selection {
+.light.theme-cyber2 ::selection {
   background: rgba(0, 200, 200, 0.12);
   color: hsl(0, 0%, 0%);
 }
 
-.dark.theme-cyber input::placeholder,
+.dark.theme-cyber2 input::placeholder,
-.dark.theme-cyber textarea::placeholder {
+.dark.theme-cyber2 textarea::placeholder {
   color: hsl(180, 20%, 40%);
 }
 
-.light.theme-cyber input::placeholder,
+.light.theme-cyber2 input::placeholder,
-.light.theme-cyber textarea::placeholder {
+.light.theme-cyber2 textarea::placeholder {
   color: hsl(240, 10%, 65%);
 }
 
-.dark.theme-cyber .page-header-title {
+.dark.theme-cyber2 .page-header-title {
   color: hsl(180, 100%, 55%);
 }
 
-.light.theme-cyber .page-header-title {
+.light.theme-cyber2 .page-header-title {
   color: hsl(180, 100%, 35%);
 }
 
-.dark.theme-cyber .stat-card-value {
+.dark.theme-cyber2 .stat-card-value {
   color: hsl(180, 100%, 55%);
 }
 
-.light.theme-cyber .stat-card-value {
+.light.theme-cyber2 .stat-card-value {
   color: hsl(180, 100%, 35%);
 }
 
-.dark.theme-cyber .badge {
+.dark.theme-cyber2 .badge {
   color: hsl(180, 100%, 55%);
 }
 
-.light.theme-cyber .badge {
+.light.theme-cyber2 .badge {
   color: hsl(180, 100%, 35%);
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
+.dark.theme-cyber2 .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(180, 100%, 50%), hsl(180, 100%, 70%), hsl(180, 100%, 50%)) !important;
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
+.dark.theme-cyber2 .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(280, 80%, 55%), hsl(280, 80%, 70%), hsl(280, 80%, 55%)) !important;
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
+.dark.theme-cyber2 .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
   background: hsla(180, 100%, 50%, 0.1) !important;
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
+.dark.theme-cyber2 .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
   background: hsla(280, 80%, 55%, 0.1) !important;
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
+.dark.theme-cyber2 .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
   color: hsl(180, 100%, 50%) !important;
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
+.dark.theme-cyber2 .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
   color: hsl(280, 80%, 55%) !important;
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
+.dark.theme-cyber2 .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(180, 100%, 50%, 0.25), transparent) !important;
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
+.dark.theme-cyber2 .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(280, 80%, 55%, 0.25), transparent) !important;
 }
 
-.dark.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
+.dark.theme-cyber2 .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
   background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(280, 80%, 55%)) !important;
 }
 
-.light.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
+.light.theme-cyber2 .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(180, 100%, 40%), hsl(180, 100%, 55%), hsl(180, 100%, 40%)) !important;
 }
 
-.light.theme-cyber .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
+.light.theme-cyber2 .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(280, 60%, 50%), hsl(280, 60%, 65%), hsl(280, 60%, 50%)) !important;
 }

Web_Backgrounds/spidey-theme.css

@@ -1,5 +1,5 @@
 @import url("./cosmic-theme.css");
-@import url("./cyber-theme.css");
+@import url("./cyber2-theme.css");
 
 .dark.theme-spidey {
   --background: 222.2 84% 4.9%;

src/components/settings/theme-settings.tsx

@@ -34,7 +34,7 @@ const backgroundOptions = [
   { value: "default", label: "None", icon: Shield, color: "bg-gray-400", ring: "ring-gray-400", desc: "No background theme" },
   { value: "spidey", label: "Spidey", icon: Shield, color: "bg-red-600", ring: "ring-red-600", desc: "Dark theme with red accents" },
   { value: "cosmic", label: "Cosmic", icon: Shield, color: "bg-gradient-to-r from-purple-500 to-green-500", ring: "ring-purple-500", desc: "Deep space with purple nebula and cyan accents" },
-  { value: "cyber", label: "Cyber", icon: Shield, color: "bg-gradient-to-r from-cyan-400 to-fuchsia-500", ring: "ring-cyan-400", desc: "Neon grid with magenta and cyan glow" },
+  { value: "cyber2", label: "Cyber2.0", icon: Shield, color: "bg-gradient-to-r from-cyan-400 to-fuchsia-500", ring: "ring-cyan-400", desc: "Neon grid with magenta and cyan glow" },
 ]
 
 function getStoredColorTheme(): string {

src/providers/website-theme-provider.tsx

@@ -7,7 +7,7 @@ const WEBSITE_THEME_KEY = "crm-website-theme"
 const themeClasses: Record<string, string> = {
   spidey: "theme-spidey",
   cosmic: "theme-cosmic",
-  cyber: "theme-cyber",
+  cyber2: "theme-cyber2",
 }
 
 interface WebsiteThemeContextValue {