Themes Name changed

This commit is contained in:
JCBSComputer
2026-06-30 11:55:44 +02:00
parent 1d080761fb
commit 4b2ea3db2a
6 changed files with 53 additions and 53 deletions
@@ -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-cyber textarea::placeholder {
.dark.theme-cyber2 input::placeholder,
.dark.theme-cyber2 textarea::placeholder {
color: hsl(180, 20%, 40%);
}
.light.theme-cyber input::placeholder,
.light.theme-cyber textarea::placeholder {
.light.theme-cyber2 input::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;
}
+1 -1
View File
@@ -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%;
+1 -1
View File
@@ -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 {
+1 -1
View File
@@ -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 {