mirror of
https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git
synced 2026-03-28 17:43:05 +01:00
Add some new themes
This commit is contained in:
Jack Kingsman
@@ -483,3 +483,216 @@
|
||||
[data-theme='lagoon-pop'] ::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, hsl(175 52% 42%), hsl(229 52% 54%));
|
||||
}
|
||||
|
||||
/* ── Candy Dusk ("Dream Arcade") ──────────────────────────── */
|
||||
:root[data-theme='candy-dusk'] {
|
||||
--background: 258 38% 10%;
|
||||
--foreground: 302 30% 93%;
|
||||
--card: 258 30% 15%;
|
||||
--card-foreground: 302 30% 93%;
|
||||
--popover: 258 30% 16%;
|
||||
--popover-foreground: 302 30% 93%;
|
||||
--primary: 325 100% 74%;
|
||||
--primary-foreground: 258 38% 12%;
|
||||
--secondary: 255 24% 20%;
|
||||
--secondary-foreground: 291 20% 85%;
|
||||
--muted: 255 20% 18%;
|
||||
--muted-foreground: 265 12% 66%;
|
||||
--accent: 251 28% 24%;
|
||||
--accent-foreground: 302 30% 93%;
|
||||
--destructive: 9 88% 66%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 256 24% 28%;
|
||||
--input: 256 24% 28%;
|
||||
--ring: 325 100% 74%;
|
||||
--radius: 1.25rem;
|
||||
--msg-outgoing: 307 32% 20%;
|
||||
--msg-incoming: 250 24% 18%;
|
||||
--status-connected: 164 78% 58%;
|
||||
--status-disconnected: 255 10% 48%;
|
||||
--warning: 43 100% 63%;
|
||||
--warning-foreground: 36 100% 12%;
|
||||
--success: 164 78% 54%;
|
||||
--success-foreground: 258 38% 12%;
|
||||
--info: 191 90% 76%;
|
||||
--info-foreground: 242 32% 18%;
|
||||
--region-override: 278 100% 82%;
|
||||
--favorite: 43 100% 66%;
|
||||
--console: 191 90% 76%;
|
||||
--console-command: 325 100% 82%;
|
||||
--console-bg: 252 42% 8%;
|
||||
--toast-error: 352 34% 16%;
|
||||
--toast-error-foreground: 8 92% 82%;
|
||||
--toast-error-border: 352 24% 26%;
|
||||
--code-editor-bg: 255 28% 13%;
|
||||
--font-sans: 'Nunito', 'Trebuchet MS', 'Segoe UI', sans-serif;
|
||||
--scrollbar: 256 28% 24%;
|
||||
--scrollbar-hover: 256 34% 32%;
|
||||
--overlay: 258 40% 6%;
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] body {
|
||||
background:
|
||||
radial-gradient(circle at 20% 10%, hsl(325 100% 74% / 0.16), transparent 22%),
|
||||
radial-gradient(circle at 85% 12%, hsl(191 90% 76% / 0.12), transparent 18%),
|
||||
radial-gradient(circle at 50% 100%, hsl(43 100% 63% / 0.08), transparent 24%), hsl(258 38% 10%);
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] .bg-card {
|
||||
background: linear-gradient(160deg, hsl(258 30% 16%), hsl(248 28% 18%));
|
||||
box-shadow: inset 0 1px 0 hsl(302 50% 96% / 0.04);
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] .bg-popover {
|
||||
background: linear-gradient(160deg, hsl(258 30% 17%), hsl(248 28% 19%));
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] .bg-msg-outgoing {
|
||||
background: linear-gradient(135deg, hsl(307 34% 21%), hsl(325 28% 24%));
|
||||
border-left: 2px solid hsl(325 100% 74% / 0.55);
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] .bg-msg-incoming {
|
||||
background: linear-gradient(135deg, hsl(250 24% 18%), hsl(258 20% 20%));
|
||||
border-left: 2px solid hsl(191 90% 76% / 0.38);
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] .bg-primary {
|
||||
background: linear-gradient(135deg, hsl(325 100% 74%), hsl(289 84% 74%));
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] button {
|
||||
border-radius: 999px;
|
||||
transition:
|
||||
transform 0.12s ease,
|
||||
filter 0.2s ease,
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] button:hover {
|
||||
filter: drop-shadow(0 0 10px hsl(325 100% 74% / 0.22))
|
||||
drop-shadow(0 0 18px hsl(191 90% 76% / 0.08));
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] ::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, hsl(325 48% 44%), hsl(256 46% 42%));
|
||||
}
|
||||
|
||||
[data-theme='candy-dusk'] ::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, hsl(325 66% 58%), hsl(191 58% 56%));
|
||||
}
|
||||
|
||||
/* ── Paper Grove ("Field Notes") ──────────────────────────── */
|
||||
:root[data-theme='paper-grove'] {
|
||||
--background: 41 43% 93%;
|
||||
--foreground: 148 16% 18%;
|
||||
--card: 43 52% 97%;
|
||||
--card-foreground: 148 16% 18%;
|
||||
--popover: 43 52% 98%;
|
||||
--popover-foreground: 148 16% 18%;
|
||||
--primary: 157 54% 40%;
|
||||
--primary-foreground: 45 60% 98%;
|
||||
--secondary: 42 26% 87%;
|
||||
--secondary-foreground: 148 14% 26%;
|
||||
--muted: 42 22% 89%;
|
||||
--muted-foreground: 148 10% 44%;
|
||||
--accent: 36 42% 83%;
|
||||
--accent-foreground: 148 16% 18%;
|
||||
--destructive: 12 76% 58%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 38 22% 76%;
|
||||
--input: 38 22% 76%;
|
||||
--ring: 157 54% 40%;
|
||||
--radius: 0.9rem;
|
||||
--msg-outgoing: 151 32% 90%;
|
||||
--msg-incoming: 40 30% 94%;
|
||||
--status-connected: 157 54% 38%;
|
||||
--status-disconnected: 148 8% 58%;
|
||||
--warning: 39 92% 46%;
|
||||
--warning-foreground: 39 100% 12%;
|
||||
--success: 157 54% 34%;
|
||||
--success-foreground: 45 60% 98%;
|
||||
--info: 227 78% 64%;
|
||||
--info-foreground: 228 40% 20%;
|
||||
--region-override: 273 56% 44%;
|
||||
--favorite: 43 92% 48%;
|
||||
--console: 157 54% 34%;
|
||||
--console-command: 224 48% 42%;
|
||||
--console-bg: 45 24% 89%;
|
||||
--toast-error: 8 52% 94%;
|
||||
--toast-error-foreground: 9 58% 40%;
|
||||
--toast-error-border: 10 34% 78%;
|
||||
--code-editor-bg: 42 30% 90%;
|
||||
--font-sans: 'Avenir Next', 'Segoe UI', sans-serif;
|
||||
--scrollbar: 36 18% 68%;
|
||||
--scrollbar-hover: 36 22% 58%;
|
||||
--overlay: 148 20% 12%;
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] body {
|
||||
background:
|
||||
linear-gradient(hsl(157 20% 50% / 0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsl(157 20% 50% / 0.04) 1px, transparent 1px), hsl(41 43% 93%);
|
||||
background-size:
|
||||
32px 32px,
|
||||
32px 32px,
|
||||
auto;
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] .bg-card {
|
||||
background: linear-gradient(180deg, hsl(43 52% 98%), hsl(40 42% 95%));
|
||||
box-shadow:
|
||||
0 1px 0 hsl(0 0% 100% / 0.8),
|
||||
0 8px 22px hsl(148 18% 20% / 0.06);
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] .bg-popover {
|
||||
background: linear-gradient(180deg, hsl(43 52% 98%), hsl(40 38% 96%));
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] .bg-msg-outgoing {
|
||||
background: linear-gradient(135deg, hsl(151 34% 90%), hsl(157 30% 87%));
|
||||
border-left: 2px solid hsl(157 54% 40% / 0.45);
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] .bg-msg-incoming {
|
||||
background: linear-gradient(135deg, hsl(40 30% 95%), hsl(38 26% 92%));
|
||||
border-left: 2px solid hsl(227 78% 64% / 0.28);
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] .bg-primary {
|
||||
background: linear-gradient(135deg, hsl(157 54% 40%), hsl(180 42% 42%));
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] button {
|
||||
box-shadow: 0 1px 0 hsl(0 0% 100% / 0.7);
|
||||
transition:
|
||||
transform 0.12s ease,
|
||||
box-shadow 0.18s ease,
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
0 1px 0 hsl(0 0% 100% / 0.8),
|
||||
0 6px 14px hsl(148 20% 20% / 0.08);
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] ::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, hsl(157 26% 54%), hsl(227 26% 60%));
|
||||
}
|
||||
|
||||
[data-theme='paper-grove'] ::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, hsl(157 34% 46%), hsl(227 34% 52%));
|
||||
}
|
||||
|
||||
@@ -52,6 +52,18 @@ export const THEMES: Theme[] = [
|
||||
swatches: ['#081A22', '#0F2630', '#23D7C6', '#173844', '#FF7A66', '#7C83FF'],
|
||||
metaThemeColor: '#081A22',
|
||||
},
|
||||
{
|
||||
id: 'candy-dusk',
|
||||
name: 'Candy Dusk',
|
||||
swatches: ['#140F24', '#201736', '#FF79C9', '#2A2144', '#FFC857', '#8BE9FD'],
|
||||
metaThemeColor: '#140F24',
|
||||
},
|
||||
{
|
||||
id: 'paper-grove',
|
||||
name: 'Paper Grove',
|
||||
swatches: ['#F7F1E4', '#FFF9EE', '#2F9E74', '#E7DEC8', '#E76F51', '#5C7CFA'],
|
||||
metaThemeColor: '#F7F1E4',
|
||||
},
|
||||
];
|
||||
|
||||
const THEME_KEY = 'remoteterm-theme';
|
||||
|
||||
Reference in New Issue
Block a user