Themes Name changed
This commit is contained in:
@@ -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,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%;
|
||||
|
||||
Binary file not shown.
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user