mirror of
https://github.com/backnotprop/plannotator.git
synced 2026-09-14 14:17:26 +08:00
feat(ui): 49 themes with matched syntax highlighting + preview mode (#664)
* feat(ui): expand theme system to 49 themes with matched syntax highlighting Add 25 new themes sourced from shiki's bundled TextMate themes (Everforest, Nord, Solarized, GitHub, One Dark Pro, Night Owl, Material, Vitesse, Vesper, Poimandres, Ayu Dark, Houston, Laserwave, Andromeeda, Aurora X, Dark+/Light+, Min, One Light, Plastic, Red, Slack, Snazzy Light, Vitesse Black). Each theme was audited against the shiki source JSON to ensure correct color mapping. Wire pierre/diffs syntax highlighting to match the active UI theme via a SHIKI_THEME_MAP (35 of 49 themes get matched syntax token colors in diffs). Add theme preview mode — a compact bottom-docked picker that lets users browse themes while seeing the page update live behind it. Settings panel enhancements: - Syntax highlighting badge on themes with diff color matching - Mode unavailability dimming (dark-only themes dim in light mode) - Plannotator pinned first, rest alphabetical * fix(themes): address review feedback — contrast, stale CSS, syntax mode safety 1. Material light: foreground #90A4AE → #546E7A (Blue Grey 600) for readable UI text (~7:1 contrast on white). Primary-foreground #FAFAFA → #263238 for contrast on teal buttons. 2. DiffHunkPreview: add colorTheme to useEffect deps so unsafeCSS (bg/gutter injection) recomputes when themes change, preventing stale mixed-theme state in mounted tooltips during preview mode. 3. SHIKI_THEME_MAP: make mode-aware with null entries for modes lacking a shiki counterpart. resolveSyntaxTheme() returns undefined when the current mode has no match, so pierre falls back to its defaults rather than applying dark token colors on a light background (fixes Tokyo Night light). * fix(review): self-review cleanup — memo, double-call, escape key - DiffHunkPreview: extract resolveSyntaxTheme to a variable instead of calling it twice in the spread expression - PierreDiffContent memo: compare syntaxTheme by dark/light string values instead of reference equality (resolver returns new objects each call) - Preview mode: add Escape key handler to return to full settings * fix(ui): consume Escape event in theme preview to prevent leaking to page
This commit is contained in:
Michael Ramos
@@ -428,6 +428,7 @@ export const AllFilesDiffView: React.FC<AllFilesDiffViewProps> = ({
|
||||
options={{
|
||||
themeType: pierreTheme.type,
|
||||
unsafeCSS: pierreTheme.css,
|
||||
...(pierreTheme.syntaxTheme && { theme: pierreTheme.syntaxTheme }),
|
||||
diffStyle,
|
||||
overflow: diffOverflow,
|
||||
diffIndicators,
|
||||
|
||||
@@ -3,6 +3,7 @@ import { FileDiff } from '@pierre/diffs/react';
|
||||
import { getSingularPatch } from '@pierre/diffs';
|
||||
import { useTheme } from '@plannotator/ui/components/ThemeProvider';
|
||||
import { useReviewState } from '../dock/ReviewStateContext';
|
||||
import { resolveSyntaxTheme } from '../hooks/usePierreTheme';
|
||||
|
||||
interface DiffHunkPreviewProps {
|
||||
/** Raw diff hunk string (unified diff format). */
|
||||
@@ -59,7 +60,7 @@ export const DiffHunkPreview: React.FC<DiffHunkPreviewProps> = ({
|
||||
maxHeight = 128,
|
||||
className,
|
||||
}) => {
|
||||
const { resolvedMode } = useTheme();
|
||||
const { resolvedMode, colorTheme } = useTheme();
|
||||
const state = useReviewState();
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
@@ -97,7 +98,9 @@ export const DiffHunkPreview: React.FC<DiffHunkPreviewProps> = ({
|
||||
});
|
||||
});
|
||||
return () => cancelAnimationFrame(rafId);
|
||||
}, [resolvedMode, state.fontFamily, state.fontSize]);
|
||||
}, [resolvedMode, colorTheme, state.fontFamily, state.fontSize]);
|
||||
|
||||
const syntaxTheme = resolveSyntaxTheme(colorTheme, resolvedMode ?? 'dark');
|
||||
|
||||
if (!fileDiff) {
|
||||
return (
|
||||
@@ -118,6 +121,7 @@ export const DiffHunkPreview: React.FC<DiffHunkPreviewProps> = ({
|
||||
options={{
|
||||
themeType: pierreTheme.type,
|
||||
unsafeCSS: pierreTheme.css,
|
||||
...(syntaxTheme && { theme: syntaxTheme }),
|
||||
diffStyle: 'unified',
|
||||
disableLineNumbers: true,
|
||||
overflow: 'wrap',
|
||||
|
||||
@@ -27,7 +27,7 @@ import {
|
||||
interface PierreDiffContentProps {
|
||||
filePath: string;
|
||||
fileDiff: ReturnType<typeof getSingularPatch>;
|
||||
pierreTheme: { type: 'dark' | 'light'; css: string };
|
||||
pierreTheme: { type: 'dark' | 'light'; css: string; syntaxTheme?: { dark: string; light: string } };
|
||||
diffStyle: 'split' | 'unified';
|
||||
diffOverflow?: 'scroll' | 'wrap';
|
||||
diffIndicators?: 'bars' | 'classic' | 'none';
|
||||
@@ -70,6 +70,7 @@ const PierreDiffContent = React.memo(({
|
||||
options={{
|
||||
themeType: pierreTheme.type,
|
||||
unsafeCSS: pierreTheme.css,
|
||||
...(pierreTheme.syntaxTheme && { theme: pierreTheme.syntaxTheme }),
|
||||
diffStyle,
|
||||
overflow: diffOverflow,
|
||||
diffIndicators,
|
||||
@@ -95,6 +96,8 @@ const PierreDiffContent = React.memo(({
|
||||
prev.fileDiff === next.fileDiff &&
|
||||
prev.pierreTheme.type === next.pierreTheme.type &&
|
||||
prev.pierreTheme.css === next.pierreTheme.css &&
|
||||
prev.pierreTheme.syntaxTheme?.dark === next.pierreTheme.syntaxTheme?.dark &&
|
||||
prev.pierreTheme.syntaxTheme?.light === next.pierreTheme.syntaxTheme?.light &&
|
||||
prev.diffStyle === next.diffStyle &&
|
||||
prev.diffOverflow === next.diffOverflow &&
|
||||
prev.diffIndicators === next.diffIndicators &&
|
||||
|
||||
@@ -1,9 +1,54 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTheme } from '@plannotator/ui/components/ThemeProvider';
|
||||
|
||||
export const SHIKI_THEME_MAP: Record<string, { dark: string | null; light: string | null }> = {
|
||||
'andromeeda': { dark: 'andromeeda', light: null },
|
||||
'aurora-x': { dark: 'aurora-x', light: null },
|
||||
'ayu-dark': { dark: 'ayu-dark', light: null },
|
||||
'catppuccin': { dark: 'catppuccin-mocha', light: 'catppuccin-latte' },
|
||||
'dark-plus': { dark: 'dark-plus', light: 'light-plus' },
|
||||
'dracula': { dark: 'dracula', light: null },
|
||||
'everforest': { dark: 'everforest-dark', light: 'everforest-light' },
|
||||
'everforest-hard': { dark: 'everforest-dark', light: 'everforest-light' },
|
||||
'everforest-soft': { dark: 'everforest-dark', light: 'everforest-light' },
|
||||
'github': { dark: 'github-dark', light: 'github-light' },
|
||||
'gruvbox': { dark: 'gruvbox-dark-medium', light: 'gruvbox-light-medium' },
|
||||
'houston': { dark: 'houston', light: null },
|
||||
'kanagawa-dragon': { dark: 'kanagawa-dragon', light: null },
|
||||
'kanagawa-lotus': { dark: null, light: 'kanagawa-lotus' },
|
||||
'kanagawa-wave': { dark: 'kanagawa-wave', light: null },
|
||||
'laserwave': { dark: 'laserwave', light: null },
|
||||
'material': { dark: 'material-theme', light: 'material-theme-lighter' },
|
||||
'min': { dark: 'min-dark', light: 'min-light' },
|
||||
'monokai-pro': { dark: 'monokai', light: null },
|
||||
'night-owl': { dark: 'night-owl', light: null },
|
||||
'nord': { dark: 'nord', light: null },
|
||||
'one-dark-pro': { dark: 'one-dark-pro', light: null },
|
||||
'one-light': { dark: null, light: 'one-light' },
|
||||
'plastic': { dark: 'plastic', light: null },
|
||||
'poimandres': { dark: 'poimandres', light: null },
|
||||
'red': { dark: 'red', light: null },
|
||||
'rose-pine': { dark: 'rose-pine', light: 'rose-pine-dawn' },
|
||||
'slack': { dark: 'slack-dark', light: 'slack-ochin' },
|
||||
'snazzy-light': { dark: null, light: 'snazzy-light' },
|
||||
'solarized': { dark: 'solarized-dark', light: 'solarized-light' },
|
||||
'synthwave-84': { dark: 'synthwave-84', light: null },
|
||||
'tokyo-night': { dark: 'tokyo-night', light: null },
|
||||
'vesper': { dark: 'vesper', light: null },
|
||||
'vitesse': { dark: 'vitesse-dark', light: 'vitesse-light' },
|
||||
'vitesse-black': { dark: 'vitesse-black', light: null },
|
||||
};
|
||||
|
||||
export function resolveSyntaxTheme(colorTheme: string, mode: 'dark' | 'light'): { dark: string; light: string } | undefined {
|
||||
const map = SHIKI_THEME_MAP[colorTheme];
|
||||
if (!map || !map[mode]) return undefined;
|
||||
return { dark: map.dark || 'pierre-dark', light: map.light || 'pierre-light' };
|
||||
}
|
||||
|
||||
export interface PierreTheme {
|
||||
type: 'dark' | 'light';
|
||||
css: string;
|
||||
syntaxTheme?: { dark: string; light: string };
|
||||
}
|
||||
|
||||
export function usePierreTheme(options?: { fontFamily?: string; fontSize?: string; showFileHeader?: boolean }): PierreTheme {
|
||||
@@ -16,8 +61,8 @@ export function usePierreTheme(options?: { fontFamily?: string; fontSize?: strin
|
||||
const styles = getComputedStyle(document.documentElement);
|
||||
const bg = styles.getPropertyValue('--background').trim();
|
||||
const fg = styles.getPropertyValue('--foreground').trim();
|
||||
if (!bg || !fg) return { type: resolvedMode ?? 'dark', css: '' };
|
||||
return { type: resolvedMode ?? 'dark', css: `
|
||||
if (!bg || !fg) return { type: resolvedMode ?? 'dark', css: '', syntaxTheme: resolveSyntaxTheme(colorTheme, resolvedMode ?? 'dark') };
|
||||
return { type: resolvedMode ?? 'dark', syntaxTheme: resolveSyntaxTheme(colorTheme, resolvedMode ?? 'dark'), css: `
|
||||
:host, [data-diff], [data-file], [data-diffs-header], [data-error-wrapper], [data-virtualizer-buffer] {
|
||||
--diffs-bg: ${bg} !important; --diffs-fg: ${fg} !important;
|
||||
--diffs-dark-bg: ${bg}; --diffs-light-bg: ${bg}; --diffs-dark: ${fg}; --diffs-light: ${fg};
|
||||
@@ -43,6 +88,7 @@ export function usePierreTheme(options?: { fontFamily?: string; fontSize?: strin
|
||||
|
||||
setPierreTheme({
|
||||
type: resolvedMode,
|
||||
syntaxTheme: resolveSyntaxTheme(colorTheme, resolvedMode),
|
||||
css: `
|
||||
:host, [data-diff], [data-file], [data-diffs-header], [data-error-wrapper], [data-virtualizer-buffer] {
|
||||
--diffs-bg: ${bg} !important;
|
||||
|
||||
@@ -582,6 +582,16 @@ const CommentsTab: React.FC = () => {
|
||||
|
||||
export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser }) => {
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const [themePreview, setThemePreview] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!themePreview) return;
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); setThemePreview(false); setShowDialog(true); }
|
||||
};
|
||||
document.addEventListener('keydown', handler);
|
||||
return () => document.removeEventListener('keydown', handler);
|
||||
}, [themePreview]);
|
||||
const [activeTab, setActiveTab] = useState<SettingsTab>('general');
|
||||
const [identity, setIdentity] = useState('');
|
||||
const [obsidian, setObsidian] = useState<ObsidianSettings>({
|
||||
@@ -814,7 +824,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{showDialog && createPortal(
|
||||
{showDialog && !themePreview && createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-sm p-4"
|
||||
onClick={() => setShowDialog(false)}
|
||||
@@ -1090,7 +1100,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
|
||||
)}
|
||||
|
||||
{/* === THEME TAB === */}
|
||||
{activeTab === 'theme' && <ThemeTab />}
|
||||
{activeTab === 'theme' && <ThemeTab onPreview={() => { setShowDialog(false); setThemePreview(true); }} />}
|
||||
|
||||
{/* === GIT TAB === */}
|
||||
{activeTab === 'git' && mode === 'review' && (
|
||||
@@ -2071,6 +2081,30 @@ tags: [plan, ...]
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
{themePreview && createPortal(
|
||||
<div className="fixed inset-0 z-[100] flex flex-col pointer-events-none">
|
||||
<div className="flex-1" />
|
||||
<div
|
||||
className="pointer-events-auto w-full bg-card border-t-2 border-primary/30 shadow-[0_-4px_20px_rgba(0,0,0,0.4)] flex flex-col max-h-[35vh] overflow-hidden"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b border-border flex-shrink-0">
|
||||
<span className="text-xs font-medium text-muted-foreground">Theme Preview</span>
|
||||
<button
|
||||
onClick={() => { setThemePreview(false); setShowDialog(true); }}
|
||||
className="px-2.5 py-1 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-3 overflow-y-auto flex-1 min-h-0">
|
||||
<ThemeTab compact />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,55 +2,94 @@ import React from 'react';
|
||||
import { useTheme, type Mode } from './ThemeProvider';
|
||||
import { SunIcon, MoonIcon, SystemIcon } from './icons/themeIcons';
|
||||
|
||||
export const ThemeTab: React.FC = () => {
|
||||
interface ThemeTabProps {
|
||||
onPreview?: () => void;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export const ThemeTab: React.FC<ThemeTabProps> = ({ onPreview, compact }) => {
|
||||
const { mode, setMode, colorTheme, setColorTheme, availableThemes, resolvedMode } = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mode */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Mode</label>
|
||||
<div className={compact ? 'flex items-center gap-3 mb-2' : 'space-y-2'}>
|
||||
{!compact && <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Mode</label>}
|
||||
<div className="flex gap-1">
|
||||
{(['dark', 'light', 'system'] as Mode[]).map(m => (
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => setMode(m)}
|
||||
className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
|
||||
mode === m
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{m === 'dark' && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<MoonIcon className="w-3 h-3" />
|
||||
Dark
|
||||
</span>
|
||||
)}
|
||||
{m === 'light' && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<SunIcon className="w-3 h-3" />
|
||||
Light
|
||||
</span>
|
||||
)}
|
||||
{m === 'system' && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<SystemIcon className="w-3 h-3" />
|
||||
System
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
{(['dark', 'light', 'system'] as Mode[]).map(m => {
|
||||
const isActive = mode === m;
|
||||
return (
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => setMode(m)}
|
||||
className={`px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors ${
|
||||
isActive
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{m === 'dark' && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<MoonIcon className="w-3 h-3" />
|
||||
Dark
|
||||
</span>
|
||||
)}
|
||||
{m === 'light' && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<SunIcon className="w-3 h-3" />
|
||||
Light
|
||||
</span>
|
||||
)}
|
||||
{m === 'system' && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<SystemIcon className="w-3 h-3" />
|
||||
System
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{compact && (
|
||||
<span className="text-[10px] text-muted-foreground/60 ml-auto flex items-center gap-1">
|
||||
<svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
|
||||
</svg>
|
||||
syntax match
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Theme */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Theme</label>
|
||||
<div className="grid grid-cols-3 gap-2 overflow-y-auto pr-1">
|
||||
<div className={compact ? '' : 'space-y-2'}>
|
||||
{!compact && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Theme</label>
|
||||
{onPreview && (
|
||||
<button
|
||||
onClick={onPreview}
|
||||
className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary/10 text-primary border border-primary/20 hover:bg-primary/20 hover:border-primary/40 transition-colors"
|
||||
>
|
||||
Launch Preview Mode
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
|
||||
<svg className="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
|
||||
</svg>
|
||||
= matched syntax colors in diffs
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={`grid gap-2 overflow-y-auto pr-1 ${compact ? 'grid-cols-4' : 'grid-cols-3'}`}>
|
||||
{availableThemes.map(theme => {
|
||||
const isSelected = colorTheme === theme.id;
|
||||
const colors = theme.colors[resolvedMode];
|
||||
const modeUnavailable =
|
||||
(resolvedMode === 'light' && theme.modeSupport === 'dark-only') ||
|
||||
(resolvedMode === 'dark' && theme.modeSupport === 'light-only');
|
||||
return (
|
||||
<button
|
||||
key={theme.id}
|
||||
@@ -58,9 +97,19 @@ export const ThemeTab: React.FC = () => {
|
||||
className={`relative p-2 rounded-md border text-left transition-colors ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-muted-foreground/30 hover:bg-muted/30'
|
||||
: modeUnavailable
|
||||
? 'border-border/50 opacity-45'
|
||||
: 'border-border hover:border-muted-foreground/30 hover:bg-muted/30'
|
||||
}`}
|
||||
>
|
||||
{/* Syntax highlighting badge */}
|
||||
{theme.syntaxHighlighting && (
|
||||
<div className="absolute top-1 right-1" title="Matched syntax highlighting in diffs">
|
||||
<svg className="w-2.5 h-2.5 text-muted-foreground/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{/* Color swatches */}
|
||||
<div className="flex gap-1 mb-1.5">
|
||||
{[colors.primary, colors.secondary, colors.accent, colors.background, colors.foreground].map((color, i) => (
|
||||
|
||||
@@ -25,6 +25,31 @@
|
||||
@import "./themes/cursor.css";
|
||||
@import "./themes/cursor-hc.css";
|
||||
@import "./themes/cursor-midnight.css";
|
||||
@import "./themes/everforest.css";
|
||||
@import "./themes/everforest-hard.css";
|
||||
@import "./themes/everforest-soft.css";
|
||||
@import "./themes/nord.css";
|
||||
@import "./themes/solarized.css";
|
||||
@import "./themes/github.css";
|
||||
@import "./themes/one-dark-pro.css";
|
||||
@import "./themes/night-owl.css";
|
||||
@import "./themes/ayu-dark.css";
|
||||
@import "./themes/poimandres.css";
|
||||
@import "./themes/material.css";
|
||||
@import "./themes/vitesse.css";
|
||||
@import "./themes/vesper.css";
|
||||
@import "./themes/andromeeda.css";
|
||||
@import "./themes/aurora-x.css";
|
||||
@import "./themes/dark-plus.css";
|
||||
@import "./themes/houston.css";
|
||||
@import "./themes/laserwave.css";
|
||||
@import "./themes/min.css";
|
||||
@import "./themes/one-light.css";
|
||||
@import "./themes/plastic.css";
|
||||
@import "./themes/red.css";
|
||||
@import "./themes/slack.css";
|
||||
@import "./themes/snazzy-light.css";
|
||||
@import "./themes/vitesse-black.css";
|
||||
@import "./print.css";
|
||||
|
||||
/* Tailwind bridge — maps CSS vars to utility classes */
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Andromeeda — by EliverLara */
|
||||
.theme-andromeeda {
|
||||
--background: #23262e;
|
||||
--foreground: #d5ced9;
|
||||
--card: #2b303b;
|
||||
--card-foreground: #d5ced9;
|
||||
--popover: #2b303b;
|
||||
--popover-foreground: #d5ced9;
|
||||
--primary: #00e8c6;
|
||||
--primary-foreground: #23262e;
|
||||
--secondary: #373941;
|
||||
--secondary-foreground: #d5ced9;
|
||||
--muted: #333844;
|
||||
--muted-foreground: #746f77;
|
||||
--accent: #c74ded;
|
||||
--accent-foreground: #23262e;
|
||||
--destructive: #fc644d;
|
||||
--destructive-foreground: #23262e;
|
||||
--border: #363c49;
|
||||
--input: #363c49;
|
||||
--ring: #00e8c6;
|
||||
--success: #96e072;
|
||||
--success-foreground: #23262e;
|
||||
--warning: #ffe66d;
|
||||
--warning-foreground: #23262e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #2e323d;
|
||||
--focus-highlight: #00e8c6;
|
||||
}
|
||||
|
||||
.theme-andromeeda.light {
|
||||
--background: #23262e;
|
||||
--foreground: #d5ced9;
|
||||
--card: #2b303b;
|
||||
--card-foreground: #d5ced9;
|
||||
--popover: #2b303b;
|
||||
--popover-foreground: #d5ced9;
|
||||
--primary: #00e8c6;
|
||||
--primary-foreground: #23262e;
|
||||
--secondary: #373941;
|
||||
--secondary-foreground: #d5ced9;
|
||||
--muted: #333844;
|
||||
--muted-foreground: #746f77;
|
||||
--accent: #c74ded;
|
||||
--accent-foreground: #23262e;
|
||||
--destructive: #fc644d;
|
||||
--destructive-foreground: #23262e;
|
||||
--border: #363c49;
|
||||
--input: #363c49;
|
||||
--ring: #00e8c6;
|
||||
--success: #96e072;
|
||||
--success-foreground: #23262e;
|
||||
--warning: #ffe66d;
|
||||
--warning-foreground: #23262e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #2e323d;
|
||||
--focus-highlight: #00e8c6;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Aurora X — by marqu3s10 */
|
||||
.theme-aurora-x {
|
||||
--background: #07090f;
|
||||
--foreground: #a8beff;
|
||||
--card: #15182b;
|
||||
--card-foreground: #c7d5ff;
|
||||
--popover: #15182b;
|
||||
--popover-foreground: #c7d5ff;
|
||||
--primary: #86a5ff;
|
||||
--primary-foreground: #07090f;
|
||||
--secondary: #262e47;
|
||||
--secondary-foreground: #c7d5ff;
|
||||
--muted: #15182b;
|
||||
--muted-foreground: #546e7a;
|
||||
--accent: #c792ea;
|
||||
--accent-foreground: #07090f;
|
||||
--destructive: #dd5073;
|
||||
--destructive-foreground: #07090f;
|
||||
--border: #262e47;
|
||||
--input: #262e47;
|
||||
--ring: #86a5ff;
|
||||
--success: #63eb90;
|
||||
--success-foreground: #07090f;
|
||||
--warning: #ffcb6b;
|
||||
--warning-foreground: #07090f;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #0c0e19;
|
||||
--focus-highlight: #86a5ff;
|
||||
}
|
||||
|
||||
.theme-aurora-x.light {
|
||||
--background: #07090f;
|
||||
--foreground: #a8beff;
|
||||
--card: #15182b;
|
||||
--card-foreground: #c7d5ff;
|
||||
--popover: #15182b;
|
||||
--popover-foreground: #c7d5ff;
|
||||
--primary: #86a5ff;
|
||||
--primary-foreground: #07090f;
|
||||
--secondary: #262e47;
|
||||
--secondary-foreground: #c7d5ff;
|
||||
--muted: #15182b;
|
||||
--muted-foreground: #546e7a;
|
||||
--accent: #c792ea;
|
||||
--accent-foreground: #07090f;
|
||||
--destructive: #dd5073;
|
||||
--destructive-foreground: #07090f;
|
||||
--border: #262e47;
|
||||
--input: #262e47;
|
||||
--ring: #86a5ff;
|
||||
--success: #63eb90;
|
||||
--success-foreground: #07090f;
|
||||
--warning: #ffcb6b;
|
||||
--warning-foreground: #07090f;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #0c0e19;
|
||||
--focus-highlight: #86a5ff;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Ayu Dark — by dempfi */
|
||||
.theme-ayu-dark {
|
||||
--background: #10141c;
|
||||
--foreground: #bfbdb6;
|
||||
--card: #141821;
|
||||
--card-foreground: #bfbdb6;
|
||||
--popover: #141821;
|
||||
--popover-foreground: #bfbdb6;
|
||||
--primary: #e6b450;
|
||||
--primary-foreground: #805600;
|
||||
--secondary: #0d1017;
|
||||
--secondary-foreground: #bfbdb6;
|
||||
--muted: #141821;
|
||||
--muted-foreground: #6c7380;
|
||||
--accent: #73b8ff;
|
||||
--accent-foreground: #10141c;
|
||||
--destructive: #d95757;
|
||||
--destructive-foreground: #10141c;
|
||||
--border: #1b1f29;
|
||||
--input: #10141c;
|
||||
--ring: #e6b450;
|
||||
--success: #70bf56;
|
||||
--success-foreground: #10141c;
|
||||
--warning: #fdb04c;
|
||||
--warning-foreground: #10141c;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #141821;
|
||||
--focus-highlight: #e6b450;
|
||||
}
|
||||
|
||||
.theme-ayu-dark.light {
|
||||
--background: #10141c;
|
||||
--foreground: #bfbdb6;
|
||||
--card: #141821;
|
||||
--card-foreground: #bfbdb6;
|
||||
--popover: #141821;
|
||||
--popover-foreground: #bfbdb6;
|
||||
--primary: #e6b450;
|
||||
--primary-foreground: #805600;
|
||||
--secondary: #0d1017;
|
||||
--secondary-foreground: #bfbdb6;
|
||||
--muted: #141821;
|
||||
--muted-foreground: #6c7380;
|
||||
--accent: #73b8ff;
|
||||
--accent-foreground: #10141c;
|
||||
--destructive: #d95757;
|
||||
--destructive-foreground: #10141c;
|
||||
--border: #1b1f29;
|
||||
--input: #10141c;
|
||||
--ring: #e6b450;
|
||||
--success: #70bf56;
|
||||
--success-foreground: #10141c;
|
||||
--warning: #fdb04c;
|
||||
--warning-foreground: #10141c;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #141821;
|
||||
--focus-highlight: #e6b450;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Dark Plus — by Microsoft */
|
||||
.theme-dark-plus {
|
||||
--background: #1e1e1e;
|
||||
--foreground: #d4d4d4;
|
||||
--card: #252526;
|
||||
--card-foreground: #d4d4d4;
|
||||
--popover: #252526;
|
||||
--popover-foreground: #d4d4d4;
|
||||
--primary: #007acc;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #383b3d;
|
||||
--secondary-foreground: #d4d4d4;
|
||||
--muted: #303031;
|
||||
--muted-foreground: #858585;
|
||||
--accent: #4ec9b0;
|
||||
--accent-foreground: #1e1e1e;
|
||||
--destructive: #f44747;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #454545;
|
||||
--input: #454545;
|
||||
--ring: #007acc;
|
||||
--success: #369432;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #cca700;
|
||||
--warning-foreground: #1e1e1e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #2d2d2d;
|
||||
--focus-highlight: #007acc;
|
||||
}
|
||||
|
||||
.theme-dark-plus.light {
|
||||
--background: #ffffff;
|
||||
--foreground: #000000;
|
||||
--card: #f3f3f3;
|
||||
--card-foreground: #000000;
|
||||
--popover: #f3f3f3;
|
||||
--popover-foreground: #000000;
|
||||
--primary: #007acc;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e8e8e8;
|
||||
--secondary-foreground: #000000;
|
||||
--muted: #e5ebf1;
|
||||
--muted-foreground: #6e7781;
|
||||
--accent: #267f99;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #cd3131;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #d4d4d4;
|
||||
--input: #d4d4d4;
|
||||
--ring: #007acc;
|
||||
--success: #369432;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #bf8803;
|
||||
--warning-foreground: #ffffff;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #f3f3f3;
|
||||
--focus-highlight: #007acc;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/* Everforest Hard — by sainnhe (high contrast) */
|
||||
.theme-everforest-hard {
|
||||
--background: #272E33;
|
||||
--foreground: #D3C6AA;
|
||||
--card: #2E383C;
|
||||
--card-foreground: #D3C6AA;
|
||||
--popover: #374145;
|
||||
--popover-foreground: #D3C6AA;
|
||||
--primary: #A7C080;
|
||||
--primary-foreground: #272E33;
|
||||
--secondary: #414B50;
|
||||
--secondary-foreground: #D3C6AA;
|
||||
--muted: #414B50;
|
||||
--muted-foreground: #859289;
|
||||
--accent: #83C092;
|
||||
--accent-foreground: #272E33;
|
||||
--destructive: #E67E80;
|
||||
--destructive-foreground: #272E33;
|
||||
--border: #414B50;
|
||||
--input: #2E383C;
|
||||
--ring: #A7C080;
|
||||
--success: #83C092;
|
||||
--success-foreground: #272E33;
|
||||
--warning: #DBBC7F;
|
||||
--warning-foreground: #272E33;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #1E2326;
|
||||
--focus-highlight: #7FBBB3;
|
||||
}
|
||||
|
||||
.theme-everforest-hard.light {
|
||||
--background: #FFFBEF;
|
||||
--foreground: #5C6A72;
|
||||
--card: #F8F5E4;
|
||||
--card-foreground: #5C6A72;
|
||||
--popover: #F2EFDF;
|
||||
--popover-foreground: #5C6A72;
|
||||
--primary: #8DA101;
|
||||
--primary-foreground: #FFFBEF;
|
||||
--secondary: #EDEADA;
|
||||
--secondary-foreground: #5C6A72;
|
||||
--muted: #EDEADA;
|
||||
--muted-foreground: #939F91;
|
||||
--accent: #35A77C;
|
||||
--accent-foreground: #FFFBEF;
|
||||
--destructive: #F85552;
|
||||
--destructive-foreground: #FFFBEF;
|
||||
--border: #EDEADA;
|
||||
--input: #F8F5E4;
|
||||
--ring: #8DA101;
|
||||
--success: #35A77C;
|
||||
--success-foreground: #FFFBEF;
|
||||
--warning: #DFA000;
|
||||
--warning-foreground: #FFFBEF;
|
||||
|
||||
--code-bg: #F2EFDF;
|
||||
--focus-highlight: #3A94C5;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/* Everforest Soft — by sainnhe (low contrast) */
|
||||
.theme-everforest-soft {
|
||||
--background: #333C43;
|
||||
--foreground: #D3C6AA;
|
||||
--card: #3A464C;
|
||||
--card-foreground: #D3C6AA;
|
||||
--popover: #434F55;
|
||||
--popover-foreground: #D3C6AA;
|
||||
--primary: #A7C080;
|
||||
--primary-foreground: #333C43;
|
||||
--secondary: #4D5960;
|
||||
--secondary-foreground: #D3C6AA;
|
||||
--muted: #4D5960;
|
||||
--muted-foreground: #859289;
|
||||
--accent: #83C092;
|
||||
--accent-foreground: #333C43;
|
||||
--destructive: #E67E80;
|
||||
--destructive-foreground: #333C43;
|
||||
--border: #4D5960;
|
||||
--input: #3A464C;
|
||||
--ring: #A7C080;
|
||||
--success: #83C092;
|
||||
--success-foreground: #333C43;
|
||||
--warning: #DBBC7F;
|
||||
--warning-foreground: #333C43;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #293136;
|
||||
--focus-highlight: #7FBBB3;
|
||||
}
|
||||
|
||||
.theme-everforest-soft.light {
|
||||
--background: #F3EAD3;
|
||||
--foreground: #5C6A72;
|
||||
--card: #EAE4CA;
|
||||
--card-foreground: #5C6A72;
|
||||
--popover: #E5DFC5;
|
||||
--popover-foreground: #5C6A72;
|
||||
--primary: #8DA101;
|
||||
--primary-foreground: #F3EAD3;
|
||||
--secondary: #DDD8BE;
|
||||
--secondary-foreground: #5C6A72;
|
||||
--muted: #DDD8BE;
|
||||
--muted-foreground: #939F91;
|
||||
--accent: #35A77C;
|
||||
--accent-foreground: #F3EAD3;
|
||||
--destructive: #F85552;
|
||||
--destructive-foreground: #F3EAD3;
|
||||
--border: #DDD8BE;
|
||||
--input: #EAE4CA;
|
||||
--ring: #8DA101;
|
||||
--success: #35A77C;
|
||||
--success-foreground: #F3EAD3;
|
||||
--warning: #DFA000;
|
||||
--warning-foreground: #F3EAD3;
|
||||
|
||||
--code-bg: #E5DFC5;
|
||||
--focus-highlight: #3A94C5;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/* Everforest — by sainnhe (medium contrast, default) */
|
||||
.theme-everforest {
|
||||
--background: #2D353B;
|
||||
--foreground: #D3C6AA;
|
||||
--card: #343F44;
|
||||
--card-foreground: #D3C6AA;
|
||||
--popover: #3D484D;
|
||||
--popover-foreground: #D3C6AA;
|
||||
--primary: #A7C080;
|
||||
--primary-foreground: #2D353B;
|
||||
--secondary: #475258;
|
||||
--secondary-foreground: #D3C6AA;
|
||||
--muted: #475258;
|
||||
--muted-foreground: #859289;
|
||||
--accent: #83C092;
|
||||
--accent-foreground: #2D353B;
|
||||
--destructive: #E67E80;
|
||||
--destructive-foreground: #2D353B;
|
||||
--border: #475258;
|
||||
--input: #343F44;
|
||||
--ring: #A7C080;
|
||||
--success: #83C092;
|
||||
--success-foreground: #2D353B;
|
||||
--warning: #DBBC7F;
|
||||
--warning-foreground: #2D353B;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #232A2E;
|
||||
--focus-highlight: #7FBBB3;
|
||||
}
|
||||
|
||||
.theme-everforest.light {
|
||||
--background: #FDF6E3;
|
||||
--foreground: #5C6A72;
|
||||
--card: #F4F0D9;
|
||||
--card-foreground: #5C6A72;
|
||||
--popover: #EFEBD4;
|
||||
--popover-foreground: #5C6A72;
|
||||
--primary: #8DA101;
|
||||
--primary-foreground: #FDF6E3;
|
||||
--secondary: #E6E2CC;
|
||||
--secondary-foreground: #5C6A72;
|
||||
--muted: #E6E2CC;
|
||||
--muted-foreground: #939F91;
|
||||
--accent: #35A77C;
|
||||
--accent-foreground: #FDF6E3;
|
||||
--destructive: #F85552;
|
||||
--destructive-foreground: #FDF6E3;
|
||||
--border: #E6E2CC;
|
||||
--input: #F4F0D9;
|
||||
--ring: #8DA101;
|
||||
--success: #35A77C;
|
||||
--success-foreground: #FDF6E3;
|
||||
--warning: #DFA000;
|
||||
--warning-foreground: #FDF6E3;
|
||||
|
||||
--code-bg: #EFEBD4;
|
||||
--focus-highlight: #3A94C5;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* GitHub — by GitHub */
|
||||
.theme-github {
|
||||
--background: #24292e;
|
||||
--foreground: #e1e4e8;
|
||||
--card: #1f2428;
|
||||
--card-foreground: #e1e4e8;
|
||||
--popover: #1f2428;
|
||||
--popover-foreground: #e1e4e8;
|
||||
--primary: #58a6ff;
|
||||
--primary-foreground: #24292e;
|
||||
--secondary: #2f363d;
|
||||
--secondary-foreground: #d1d5da;
|
||||
--muted: #2f363d;
|
||||
--muted-foreground: #6a737d;
|
||||
--accent: #79b8ff;
|
||||
--accent-foreground: #24292e;
|
||||
--destructive: #f97583;
|
||||
--destructive-foreground: #24292e;
|
||||
--border: #1b1f23;
|
||||
--input: #2f363d;
|
||||
--ring: #58a6ff;
|
||||
--success: #28a745;
|
||||
--success-foreground: #24292e;
|
||||
--warning: #ffea7f;
|
||||
--warning-foreground: #24292e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #2f363d;
|
||||
--focus-highlight: #58a6ff;
|
||||
}
|
||||
|
||||
.theme-github.light {
|
||||
--background: #ffffff;
|
||||
--foreground: #24292e;
|
||||
--card: #f6f8fa;
|
||||
--card-foreground: #24292e;
|
||||
--popover: #f6f8fa;
|
||||
--popover-foreground: #24292e;
|
||||
--primary: #0366d6;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f6f8fa;
|
||||
--secondary-foreground: #586069;
|
||||
--muted: #fafbfc;
|
||||
--muted-foreground: #6a737d;
|
||||
--accent: #0366d6;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #cb2431;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e1e4e8;
|
||||
--input: #fafbfc;
|
||||
--ring: #2188ff;
|
||||
--success: #28a745;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #f9c513;
|
||||
--warning-foreground: #24292e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #f6f8fa;
|
||||
--focus-highlight: #2188ff;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Houston — by Astro */
|
||||
.theme-houston {
|
||||
--background: #17191e;
|
||||
--foreground: #eef0f9;
|
||||
--card: #23262d;
|
||||
--card-foreground: #eef0f9;
|
||||
--popover: #23262d;
|
||||
--popover-foreground: #eef0f9;
|
||||
--primary: #4bf3c8;
|
||||
--primary-foreground: #17191e;
|
||||
--secondary: #343841;
|
||||
--secondary-foreground: #eef0f9;
|
||||
--muted: #2a2d34;
|
||||
--muted-foreground: #545864;
|
||||
--accent: #54b9ff;
|
||||
--accent-foreground: #17191e;
|
||||
--destructive: #f4587e;
|
||||
--destructive-foreground: #17191e;
|
||||
--border: #343841;
|
||||
--input: #343841;
|
||||
--ring: #4bf3c8;
|
||||
--success: #4bf3c8;
|
||||
--success-foreground: #17191e;
|
||||
--warning: #ffd493;
|
||||
--warning-foreground: #17191e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #23262d;
|
||||
--focus-highlight: #4bf3c8;
|
||||
}
|
||||
|
||||
.theme-houston.light {
|
||||
--background: #17191e;
|
||||
--foreground: #eef0f9;
|
||||
--card: #23262d;
|
||||
--card-foreground: #eef0f9;
|
||||
--popover: #23262d;
|
||||
--popover-foreground: #eef0f9;
|
||||
--primary: #4bf3c8;
|
||||
--primary-foreground: #17191e;
|
||||
--secondary: #343841;
|
||||
--secondary-foreground: #eef0f9;
|
||||
--muted: #2a2d34;
|
||||
--muted-foreground: #545864;
|
||||
--accent: #54b9ff;
|
||||
--accent-foreground: #17191e;
|
||||
--destructive: #f4587e;
|
||||
--destructive-foreground: #17191e;
|
||||
--border: #343841;
|
||||
--input: #343841;
|
||||
--ring: #4bf3c8;
|
||||
--success: #4bf3c8;
|
||||
--success-foreground: #17191e;
|
||||
--warning: #ffd493;
|
||||
--warning-foreground: #17191e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #23262d;
|
||||
--focus-highlight: #4bf3c8;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* LaserWave — by Jared Jones */
|
||||
.theme-laserwave {
|
||||
--background: #27212e;
|
||||
--foreground: #ffffff;
|
||||
--card: #3a3242;
|
||||
--card-foreground: #ffffff;
|
||||
--popover: #3a3242;
|
||||
--popover-foreground: #ffffff;
|
||||
--primary: #eb64b9;
|
||||
--primary-foreground: #27212e;
|
||||
--secondary: #3e3549;
|
||||
--secondary-foreground: #ffffff;
|
||||
--muted: #3a3242;
|
||||
--muted-foreground: #91889b;
|
||||
--accent: #40b4c4;
|
||||
--accent-foreground: #27212e;
|
||||
--destructive: #ff3e7b;
|
||||
--destructive-foreground: #27212e;
|
||||
--border: #4a4055;
|
||||
--input: #4a4055;
|
||||
--ring: #eb64b9;
|
||||
--success: #74dfc4;
|
||||
--success-foreground: #27212e;
|
||||
--warning: #ffe261;
|
||||
--warning-foreground: #27212e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #3e3549;
|
||||
--focus-highlight: #eb64b9;
|
||||
}
|
||||
|
||||
.theme-laserwave.light {
|
||||
--background: #27212e;
|
||||
--foreground: #ffffff;
|
||||
--card: #3a3242;
|
||||
--card-foreground: #ffffff;
|
||||
--popover: #3a3242;
|
||||
--popover-foreground: #ffffff;
|
||||
--primary: #eb64b9;
|
||||
--primary-foreground: #27212e;
|
||||
--secondary: #3e3549;
|
||||
--secondary-foreground: #ffffff;
|
||||
--muted: #3a3242;
|
||||
--muted-foreground: #91889b;
|
||||
--accent: #40b4c4;
|
||||
--accent-foreground: #27212e;
|
||||
--destructive: #ff3e7b;
|
||||
--destructive-foreground: #27212e;
|
||||
--border: #4a4055;
|
||||
--input: #4a4055;
|
||||
--ring: #eb64b9;
|
||||
--success: #74dfc4;
|
||||
--success-foreground: #27212e;
|
||||
--warning: #ffe261;
|
||||
--warning-foreground: #27212e;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #3e3549;
|
||||
--focus-highlight: #eb64b9;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/* Material Theme — by Mattia Astorino (equinusocio) */
|
||||
.theme-material {
|
||||
--background: #263238;
|
||||
--foreground: #EEFFFF;
|
||||
--card: #2E3C43;
|
||||
--card-foreground: #EEFFFF;
|
||||
--popover: #263238;
|
||||
--popover-foreground: #EEFFFF;
|
||||
--primary: #80CBC4;
|
||||
--primary-foreground: #263238;
|
||||
--secondary: #37474F;
|
||||
--secondary-foreground: #6c8692;
|
||||
--muted: #303C41;
|
||||
--muted-foreground: #546E7A;
|
||||
--accent: #C3E88D;
|
||||
--accent-foreground: #263238;
|
||||
--destructive: #f07178;
|
||||
--destructive-foreground: #263238;
|
||||
--border: #37474F;
|
||||
--input: #303C41;
|
||||
--ring: #80CBC4;
|
||||
--success: #C3E88D;
|
||||
--success-foreground: #263238;
|
||||
--warning: #FFCB6B;
|
||||
--warning-foreground: #263238;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #2D3B41;
|
||||
--focus-highlight: #80CBC4;
|
||||
}
|
||||
|
||||
.theme-material.light {
|
||||
--background: #FAFAFA;
|
||||
--foreground: #546E7A;
|
||||
--card: #F0F4F5;
|
||||
--card-foreground: #546E7A;
|
||||
--popover: #FAFAFA;
|
||||
--popover-foreground: #546E7A;
|
||||
--primary: #80CBC4;
|
||||
--primary-foreground: #263238;
|
||||
--secondary: #E8EDEF;
|
||||
--secondary-foreground: #758a95;
|
||||
--muted: #EEEEEE;
|
||||
--muted-foreground: #B0BEC5;
|
||||
--accent: #39ADB5;
|
||||
--accent-foreground: #FAFAFA;
|
||||
--destructive: #E53935;
|
||||
--destructive-foreground: #FAFAFA;
|
||||
--border: #B0BEC5;
|
||||
--input: #EEEEEE;
|
||||
--ring: #80CBC4;
|
||||
--success: #91B859;
|
||||
--success-foreground: #FAFAFA;
|
||||
--warning: #E2931D;
|
||||
--warning-foreground: #FAFAFA;
|
||||
|
||||
--code-bg: #EEEEEE;
|
||||
--focus-highlight: #80CBC4;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Min — by Miguel Solorio */
|
||||
.theme-min {
|
||||
--background: #1f1f1f;
|
||||
--foreground: #b392f0;
|
||||
--card: #242424;
|
||||
--card-foreground: #b392f0;
|
||||
--popover: #242424;
|
||||
--popover-foreground: #b392f0;
|
||||
--primary: #b392f0;
|
||||
--primary-foreground: #1f1f1f;
|
||||
--secondary: #2a2a2a;
|
||||
--secondary-foreground: #bbbbbb;
|
||||
--muted: #2a2a2a;
|
||||
--muted-foreground: #6b737c;
|
||||
--accent: #79b8ff;
|
||||
--accent-foreground: #1f1f1f;
|
||||
--destructive: #ff7a84;
|
||||
--destructive-foreground: #1f1f1f;
|
||||
--border: #383838;
|
||||
--input: #383838;
|
||||
--ring: #b392f0;
|
||||
--success: #3a632a;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #cd9731;
|
||||
--warning-foreground: #1f1f1f;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #2a2a2a;
|
||||
--focus-highlight: #b392f0;
|
||||
}
|
||||
|
||||
.theme-min.light {
|
||||
--background: #ffffff;
|
||||
--foreground: #24292e;
|
||||
--card: #f6f6f6;
|
||||
--card-foreground: #24292e;
|
||||
--popover: #f6f6f6;
|
||||
--popover-foreground: #24292e;
|
||||
--primary: #6f42c1;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #eeeeee;
|
||||
--secondary-foreground: #212121;
|
||||
--muted: #f6f6f6;
|
||||
--muted-foreground: #c2c3c5;
|
||||
--accent: #1976d2;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #d32f2f;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e9e9e9;
|
||||
--input: #e9e9e9;
|
||||
--ring: #6f42c1;
|
||||
--success: #77cc00;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #f29718;
|
||||
--warning-foreground: #ffffff;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #f3f3f3;
|
||||
--focus-highlight: #6f42c1;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Night Owl — by Sarah Drasner */
|
||||
.theme-night-owl {
|
||||
--background: #011627;
|
||||
--foreground: #d6deeb;
|
||||
--card: #0b2942;
|
||||
--card-foreground: #d6deeb;
|
||||
--popover: #0b2942;
|
||||
--popover-foreground: #d6deeb;
|
||||
--primary: #7e57c2;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #0b253a;
|
||||
--secondary-foreground: #89a4bb;
|
||||
--muted: #0b253a;
|
||||
--muted-foreground: #4b6479;
|
||||
--accent: #82aaff;
|
||||
--accent-foreground: #011627;
|
||||
--destructive: #ef5350;
|
||||
--destructive-foreground: #011627;
|
||||
--border: #5f7e97;
|
||||
--input: #0b253a;
|
||||
--ring: #7e57c2;
|
||||
--success: #addb67;
|
||||
--success-foreground: #011627;
|
||||
--warning: #ffcb6b;
|
||||
--warning-foreground: #011627;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #0b2942;
|
||||
--focus-highlight: #7e57c2;
|
||||
}
|
||||
|
||||
.theme-night-owl.light {
|
||||
--background: #011627;
|
||||
--foreground: #d6deeb;
|
||||
--card: #0b2942;
|
||||
--card-foreground: #d6deeb;
|
||||
--popover: #0b2942;
|
||||
--popover-foreground: #d6deeb;
|
||||
--primary: #7e57c2;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #0b253a;
|
||||
--secondary-foreground: #89a4bb;
|
||||
--muted: #0b253a;
|
||||
--muted-foreground: #4b6479;
|
||||
--accent: #82aaff;
|
||||
--accent-foreground: #011627;
|
||||
--destructive: #ef5350;
|
||||
--destructive-foreground: #011627;
|
||||
--border: #5f7e97;
|
||||
--input: #0b253a;
|
||||
--ring: #7e57c2;
|
||||
--success: #addb67;
|
||||
--success-foreground: #011627;
|
||||
--warning: #ffcb6b;
|
||||
--warning-foreground: #011627;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #0b2942;
|
||||
--focus-highlight: #7e57c2;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Nord — by Arctic Ice Studio */
|
||||
.theme-nord {
|
||||
--background: #2e3440;
|
||||
--foreground: #d8dee9;
|
||||
--card: #3b4252;
|
||||
--card-foreground: #d8dee9;
|
||||
--popover: #3b4252;
|
||||
--popover-foreground: #d8dee9;
|
||||
--primary: #88c0d0;
|
||||
--primary-foreground: #2e3440;
|
||||
--secondary: #434c5e;
|
||||
--secondary-foreground: #d8dee9;
|
||||
--muted: #3b4252;
|
||||
--muted-foreground: #616e88;
|
||||
--accent: #81a1c1;
|
||||
--accent-foreground: #2e3440;
|
||||
--destructive: #bf616a;
|
||||
--destructive-foreground: #2e3440;
|
||||
--border: #434c5e;
|
||||
--input: #3b4252;
|
||||
--ring: #88c0d0;
|
||||
--success: #a3be8c;
|
||||
--success-foreground: #2e3440;
|
||||
--warning: #ebcb8b;
|
||||
--warning-foreground: #2e3440;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #4c566a;
|
||||
--focus-highlight: #88c0d0;
|
||||
}
|
||||
|
||||
.theme-nord.light {
|
||||
--background: #2e3440;
|
||||
--foreground: #d8dee9;
|
||||
--card: #3b4252;
|
||||
--card-foreground: #d8dee9;
|
||||
--popover: #3b4252;
|
||||
--popover-foreground: #d8dee9;
|
||||
--primary: #88c0d0;
|
||||
--primary-foreground: #2e3440;
|
||||
--secondary: #434c5e;
|
||||
--secondary-foreground: #d8dee9;
|
||||
--muted: #3b4252;
|
||||
--muted-foreground: #616e88;
|
||||
--accent: #81a1c1;
|
||||
--accent-foreground: #2e3440;
|
||||
--destructive: #bf616a;
|
||||
--destructive-foreground: #2e3440;
|
||||
--border: #434c5e;
|
||||
--input: #3b4252;
|
||||
--ring: #88c0d0;
|
||||
--success: #a3be8c;
|
||||
--success-foreground: #2e3440;
|
||||
--warning: #ebcb8b;
|
||||
--warning-foreground: #2e3440;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #4c566a;
|
||||
--focus-highlight: #88c0d0;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* One Dark Pro — by Binaryify */
|
||||
.theme-one-dark-pro {
|
||||
--background: #282c34;
|
||||
--foreground: #abb2bf;
|
||||
--card: #21252b;
|
||||
--card-foreground: #abb2bf;
|
||||
--popover: #21252b;
|
||||
--popover-foreground: #abb2bf;
|
||||
--primary: #61afef;
|
||||
--primary-foreground: #282c34;
|
||||
--secondary: #21252b;
|
||||
--secondary-foreground: #abb2bf;
|
||||
--muted: #1d1f23;
|
||||
--muted-foreground: #5c6370;
|
||||
--accent: #c678dd;
|
||||
--accent-foreground: #282c34;
|
||||
--destructive: #e06c75;
|
||||
--destructive-foreground: #282c34;
|
||||
--border: #3e4452;
|
||||
--input: #1d1f23;
|
||||
--ring: #528bff;
|
||||
--success: #98c379;
|
||||
--success-foreground: #282c34;
|
||||
--warning: #e5c07b;
|
||||
--warning-foreground: #282c34;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #2c313a;
|
||||
--focus-highlight: #528bff;
|
||||
}
|
||||
|
||||
.theme-one-dark-pro.light {
|
||||
--background: #282c34;
|
||||
--foreground: #abb2bf;
|
||||
--card: #21252b;
|
||||
--card-foreground: #abb2bf;
|
||||
--popover: #21252b;
|
||||
--popover-foreground: #abb2bf;
|
||||
--primary: #61afef;
|
||||
--primary-foreground: #282c34;
|
||||
--secondary: #21252b;
|
||||
--secondary-foreground: #abb2bf;
|
||||
--muted: #1d1f23;
|
||||
--muted-foreground: #5c6370;
|
||||
--accent: #c678dd;
|
||||
--accent-foreground: #282c34;
|
||||
--destructive: #e06c75;
|
||||
--destructive-foreground: #282c34;
|
||||
--border: #3e4452;
|
||||
--input: #1d1f23;
|
||||
--ring: #528bff;
|
||||
--success: #98c379;
|
||||
--success-foreground: #282c34;
|
||||
--warning: #e5c07b;
|
||||
--warning-foreground: #282c34;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #2c313a;
|
||||
--focus-highlight: #528bff;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* One Light — by Atom */
|
||||
.theme-one-light {
|
||||
--background: #fafafa;
|
||||
--foreground: #383a42;
|
||||
--card: #eaeaeb;
|
||||
--card-foreground: #383a42;
|
||||
--popover: #eaeaeb;
|
||||
--popover-foreground: #383a42;
|
||||
--primary: #526fff;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e5e5e6;
|
||||
--secondary-foreground: #383a42;
|
||||
--muted: #eaeaeb;
|
||||
--muted-foreground: #a0a1a7;
|
||||
--accent: #4078f2;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #e45649;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #dbdbdc;
|
||||
--input: #dbdbdc;
|
||||
--ring: #526fff;
|
||||
--success: #3bba54;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #c18401;
|
||||
--warning-foreground: #ffffff;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #e5e5e6;
|
||||
--focus-highlight: #526fff;
|
||||
}
|
||||
|
||||
.theme-one-light.light {
|
||||
--background: #fafafa;
|
||||
--foreground: #383a42;
|
||||
--card: #eaeaeb;
|
||||
--card-foreground: #383a42;
|
||||
--popover: #eaeaeb;
|
||||
--popover-foreground: #383a42;
|
||||
--primary: #526fff;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e5e5e6;
|
||||
--secondary-foreground: #383a42;
|
||||
--muted: #eaeaeb;
|
||||
--muted-foreground: #a0a1a7;
|
||||
--accent: #4078f2;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #e45649;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #dbdbdc;
|
||||
--input: #dbdbdc;
|
||||
--ring: #526fff;
|
||||
--success: #3bba54;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #c18401;
|
||||
--warning-foreground: #ffffff;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #e5e5e6;
|
||||
--focus-highlight: #526fff;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Plastic — by Will Stone */
|
||||
.theme-plastic {
|
||||
--background: #21252b;
|
||||
--foreground: #a9b2c3;
|
||||
--card: #181a1f;
|
||||
--card-foreground: #a9b2c3;
|
||||
--popover: #181a1f;
|
||||
--popover-foreground: #a9b2c3;
|
||||
--primary: #1085ff;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #0d1117;
|
||||
--secondary-foreground: #c6ccd7;
|
||||
--muted: #181a1f;
|
||||
--muted-foreground: #5f6672;
|
||||
--accent: #61afef;
|
||||
--accent-foreground: #0d1117;
|
||||
--destructive: #d74e42;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #0d1117;
|
||||
--input: #0d1117;
|
||||
--ring: #1085ff;
|
||||
--success: #98c379;
|
||||
--success-foreground: #0d1117;
|
||||
--warning: #e5c07b;
|
||||
--warning-foreground: #0d1117;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #0d1117;
|
||||
--focus-highlight: #1085ff;
|
||||
}
|
||||
|
||||
.theme-plastic.light {
|
||||
--background: #21252b;
|
||||
--foreground: #a9b2c3;
|
||||
--card: #181a1f;
|
||||
--card-foreground: #a9b2c3;
|
||||
--popover: #181a1f;
|
||||
--popover-foreground: #a9b2c3;
|
||||
--primary: #1085ff;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #0d1117;
|
||||
--secondary-foreground: #c6ccd7;
|
||||
--muted: #181a1f;
|
||||
--muted-foreground: #5f6672;
|
||||
--accent: #61afef;
|
||||
--accent-foreground: #0d1117;
|
||||
--destructive: #d74e42;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #0d1117;
|
||||
--input: #0d1117;
|
||||
--ring: #1085ff;
|
||||
--success: #98c379;
|
||||
--success-foreground: #0d1117;
|
||||
--warning: #e5c07b;
|
||||
--warning-foreground: #0d1117;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #0d1117;
|
||||
--focus-highlight: #1085ff;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Poimandres — by drcmda */
|
||||
.theme-poimandres {
|
||||
--background: #1b1e28;
|
||||
--foreground: #a6accd;
|
||||
--card: #303340;
|
||||
--card-foreground: #a6accd;
|
||||
--popover: #303340;
|
||||
--popover-foreground: #a6accd;
|
||||
--primary: #add7ff;
|
||||
--primary-foreground: #1b1e28;
|
||||
--secondary: #252934;
|
||||
--secondary-foreground: #767c9d;
|
||||
--muted: #252934;
|
||||
--muted-foreground: #767c9d;
|
||||
--accent: #5de4c7;
|
||||
--accent-foreground: #1b1e28;
|
||||
--destructive: #d0679d;
|
||||
--destructive-foreground: #1b1e28;
|
||||
--border: #3b3f4f;
|
||||
--input: #252934;
|
||||
--ring: #add7ff;
|
||||
--success: #5de4c7;
|
||||
--success-foreground: #1b1e28;
|
||||
--warning: #fffac2;
|
||||
--warning-foreground: #1b1e28;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #252934;
|
||||
--focus-highlight: #add7ff;
|
||||
}
|
||||
|
||||
.theme-poimandres.light {
|
||||
--background: #1b1e28;
|
||||
--foreground: #a6accd;
|
||||
--card: #303340;
|
||||
--card-foreground: #a6accd;
|
||||
--popover: #303340;
|
||||
--popover-foreground: #a6accd;
|
||||
--primary: #add7ff;
|
||||
--primary-foreground: #1b1e28;
|
||||
--secondary: #252934;
|
||||
--secondary-foreground: #767c9d;
|
||||
--muted: #252934;
|
||||
--muted-foreground: #767c9d;
|
||||
--accent: #5de4c7;
|
||||
--accent-foreground: #1b1e28;
|
||||
--destructive: #d0679d;
|
||||
--destructive-foreground: #1b1e28;
|
||||
--border: #3b3f4f;
|
||||
--input: #252934;
|
||||
--ring: #add7ff;
|
||||
--success: #5de4c7;
|
||||
--success-foreground: #1b1e28;
|
||||
--warning: #fffac2;
|
||||
--warning-foreground: #1b1e28;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #252934;
|
||||
--focus-highlight: #add7ff;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Red — by Thibaut Tiberghien */
|
||||
.theme-red {
|
||||
--background: #390000;
|
||||
--foreground: #f8f8f8;
|
||||
--card: #490000;
|
||||
--card-foreground: #f8f8f8;
|
||||
--popover: #490000;
|
||||
--popover-foreground: #f8f8f8;
|
||||
--primary: #cc3333;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #580000;
|
||||
--secondary-foreground: #f8f8f8;
|
||||
--muted: #580000;
|
||||
--muted-foreground: #e7c0c0;
|
||||
--accent: #ffd0aa;
|
||||
--accent-foreground: #390000;
|
||||
--destructive: #f12727;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #660000;
|
||||
--input: #580000;
|
||||
--ring: #cc3333;
|
||||
--success: #41a83e;
|
||||
--success-foreground: #390000;
|
||||
--warning: #fec758;
|
||||
--warning-foreground: #390000;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #580000;
|
||||
--focus-highlight: #cc3333;
|
||||
}
|
||||
|
||||
.theme-red.light {
|
||||
--background: #390000;
|
||||
--foreground: #f8f8f8;
|
||||
--card: #490000;
|
||||
--card-foreground: #f8f8f8;
|
||||
--popover: #490000;
|
||||
--popover-foreground: #f8f8f8;
|
||||
--primary: #cc3333;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #580000;
|
||||
--secondary-foreground: #f8f8f8;
|
||||
--muted: #580000;
|
||||
--muted-foreground: #e7c0c0;
|
||||
--accent: #ffd0aa;
|
||||
--accent-foreground: #390000;
|
||||
--destructive: #f12727;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #660000;
|
||||
--input: #580000;
|
||||
--ring: #cc3333;
|
||||
--success: #41a83e;
|
||||
--success-foreground: #390000;
|
||||
--warning: #fec758;
|
||||
--warning-foreground: #390000;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #580000;
|
||||
--focus-highlight: #cc3333;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Slack — dark + light */
|
||||
.theme-slack {
|
||||
--background: #222222;
|
||||
--foreground: #e6e6e6;
|
||||
--card: #292929;
|
||||
--card-foreground: #e6e6e6;
|
||||
--popover: #292929;
|
||||
--popover-foreground: #e6e6e6;
|
||||
--primary: #0077b5;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #141414;
|
||||
--secondary-foreground: #e6e6e6;
|
||||
--muted: #141414;
|
||||
--muted-foreground: #6e7681;
|
||||
--accent: #1d978d;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #f44747;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #3a3d41;
|
||||
--input: #292929;
|
||||
--ring: #0077b5;
|
||||
--success: #6a9955;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #cd9731;
|
||||
--warning-foreground: #222222;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #141414;
|
||||
--focus-highlight: #0077b5;
|
||||
}
|
||||
|
||||
.theme-slack.light {
|
||||
--background: #ffffff;
|
||||
--foreground: #000000;
|
||||
--card: #f3f3f3;
|
||||
--card-foreground: #000000;
|
||||
--popover: #f3f3f3;
|
||||
--popover-foreground: #000000;
|
||||
--primary: #5899c5;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #eeeeee;
|
||||
--secondary-foreground: #000000;
|
||||
--muted: #f3f3f3;
|
||||
--muted-foreground: #6e7681;
|
||||
--accent: #5899c5;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #f44c5e;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #dcdedf;
|
||||
--input: #dcdedf;
|
||||
--ring: #5899c5;
|
||||
--success: #91b859;
|
||||
--success-foreground: #161f26;
|
||||
--warning: #ffb62c;
|
||||
--warning-foreground: #161f26;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #eeeeee;
|
||||
--focus-highlight: #5899c5;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Snazzy Light — by Aleksandr Hovhannisyan */
|
||||
.theme-snazzy-light {
|
||||
--background: #fafbfc;
|
||||
--foreground: #565869;
|
||||
--card: #f3f4f5;
|
||||
--card-foreground: #565869;
|
||||
--popover: #f3f4f5;
|
||||
--popover-foreground: #565869;
|
||||
--primary: #09a1ed;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e9eaeb;
|
||||
--secondary-foreground: #565869;
|
||||
--muted: #e9eaeb;
|
||||
--muted-foreground: #9194a2;
|
||||
--accent: #2dae58;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #ff5c56;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #dedfe0;
|
||||
--input: #e9eaeb;
|
||||
--ring: #09a1ed;
|
||||
--success: #2dae58;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #cf9c00;
|
||||
--warning-foreground: #ffffff;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #e9eaeb;
|
||||
--focus-highlight: #09a1ed;
|
||||
}
|
||||
|
||||
.theme-snazzy-light.light {
|
||||
--background: #fafbfc;
|
||||
--foreground: #565869;
|
||||
--card: #f3f4f5;
|
||||
--card-foreground: #565869;
|
||||
--popover: #f3f4f5;
|
||||
--popover-foreground: #565869;
|
||||
--primary: #09a1ed;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e9eaeb;
|
||||
--secondary-foreground: #565869;
|
||||
--muted: #e9eaeb;
|
||||
--muted-foreground: #9194a2;
|
||||
--accent: #2dae58;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #ff5c56;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #dedfe0;
|
||||
--input: #e9eaeb;
|
||||
--ring: #09a1ed;
|
||||
--success: #2dae58;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #cf9c00;
|
||||
--warning-foreground: #ffffff;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #e9eaeb;
|
||||
--focus-highlight: #09a1ed;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Solarized — by Ethan Schoonover */
|
||||
.theme-solarized {
|
||||
--background: #002b36;
|
||||
--foreground: #839496;
|
||||
--card: #073642;
|
||||
--card-foreground: #839496;
|
||||
--popover: #073642;
|
||||
--popover-foreground: #839496;
|
||||
--primary: #268bd2;
|
||||
--primary-foreground: #002b36;
|
||||
--secondary: #003847;
|
||||
--secondary-foreground: #93a1a1;
|
||||
--muted: #003847;
|
||||
--muted-foreground: #586e75;
|
||||
--accent: #2aa198;
|
||||
--accent-foreground: #002b36;
|
||||
--destructive: #dc322f;
|
||||
--destructive-foreground: #002b36;
|
||||
--border: #094e5a;
|
||||
--input: #003847;
|
||||
--ring: #268bd2;
|
||||
--success: #859900;
|
||||
--success-foreground: #002b36;
|
||||
--warning: #b58900;
|
||||
--warning-foreground: #002b36;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #073642;
|
||||
--focus-highlight: #268bd2;
|
||||
}
|
||||
|
||||
.theme-solarized.light {
|
||||
--background: #fdf6e3;
|
||||
--foreground: #657b83;
|
||||
--card: #eee8d5;
|
||||
--card-foreground: #657b83;
|
||||
--popover: #eee8d5;
|
||||
--popover-foreground: #657b83;
|
||||
--primary: #268bd2;
|
||||
--primary-foreground: #fdf6e3;
|
||||
--secondary: #eee8d5;
|
||||
--secondary-foreground: #586e75;
|
||||
--muted: #ddd6c1;
|
||||
--muted-foreground: #93a1a1;
|
||||
--accent: #2aa198;
|
||||
--accent-foreground: #002b36;
|
||||
--destructive: #dc322f;
|
||||
--destructive-foreground: #fdf6e3;
|
||||
--border: #ddd6c1;
|
||||
--input: #ddd6c1;
|
||||
--ring: #268bd2;
|
||||
--success: #859900;
|
||||
--success-foreground: #fdf6e3;
|
||||
--warning: #b58900;
|
||||
--warning-foreground: #fdf6e3;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #eee8d5;
|
||||
--focus-highlight: #268bd2;
|
||||
}
|
||||
@@ -11,7 +11,7 @@
|
||||
--secondary: #414868;
|
||||
--secondary-foreground: #c0caf5;
|
||||
--muted: #343a52;
|
||||
--muted-foreground: #a9b1d6;
|
||||
--muted-foreground: #787c99;
|
||||
--accent: #7dcfff;
|
||||
--accent-foreground: #1d202f;
|
||||
--destructive: #f7768e;
|
||||
@@ -44,7 +44,7 @@
|
||||
--secondary: #a1a6c5;
|
||||
--secondary-foreground: #3760bf;
|
||||
--muted: #d0d3e1;
|
||||
--muted-foreground: #6172b0;
|
||||
--muted-foreground: #848cb5;
|
||||
--accent: #007197;
|
||||
--accent-foreground: #e1e2e7;
|
||||
--destructive: #f52a65;
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
/* Vesper — by raunofreiberg */
|
||||
.theme-vesper {
|
||||
--background: #101010;
|
||||
--foreground: #FFFFFF;
|
||||
--card: #161616;
|
||||
--card-foreground: #FFFFFF;
|
||||
--popover: #161616;
|
||||
--popover-foreground: #FFFFFF;
|
||||
--primary: #FFC799;
|
||||
--primary-foreground: #101010;
|
||||
--secondary: #1C1C1C;
|
||||
--secondary-foreground: #A0A0A0;
|
||||
--muted: #1C1C1C;
|
||||
--muted-foreground: #8b8b8b;
|
||||
--accent: #99FFE4;
|
||||
--accent-foreground: #101010;
|
||||
--destructive: #FF8080;
|
||||
--destructive-foreground: #101010;
|
||||
--border: #282828;
|
||||
--input: #1C1C1C;
|
||||
--ring: #FFC799;
|
||||
--success: #99FFE4;
|
||||
--success-foreground: #101010;
|
||||
--warning: #FFC799;
|
||||
--warning-foreground: #101010;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #1C1C1C;
|
||||
--focus-highlight: #FFC799;
|
||||
}
|
||||
|
||||
.theme-vesper.light {
|
||||
--background: #101010;
|
||||
--foreground: #FFFFFF;
|
||||
--card: #161616;
|
||||
--card-foreground: #FFFFFF;
|
||||
--popover: #161616;
|
||||
--popover-foreground: #FFFFFF;
|
||||
--primary: #FFC799;
|
||||
--primary-foreground: #101010;
|
||||
--secondary: #1C1C1C;
|
||||
--secondary-foreground: #A0A0A0;
|
||||
--muted: #1C1C1C;
|
||||
--muted-foreground: #8b8b8b;
|
||||
--accent: #99FFE4;
|
||||
--accent-foreground: #101010;
|
||||
--destructive: #FF8080;
|
||||
--destructive-foreground: #101010;
|
||||
--border: #282828;
|
||||
--input: #1C1C1C;
|
||||
--ring: #FFC799;
|
||||
--success: #99FFE4;
|
||||
--success-foreground: #101010;
|
||||
--warning: #FFC799;
|
||||
--warning-foreground: #101010;
|
||||
|
||||
--code-bg: #1C1C1C;
|
||||
--focus-highlight: #FFC799;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Vitesse Black — by Anthony Fu */
|
||||
.theme-vitesse-black {
|
||||
--background: #000000;
|
||||
--foreground: #dbd7ca;
|
||||
--card: #121212;
|
||||
--card-foreground: #dbd7ca;
|
||||
--popover: #121212;
|
||||
--popover-foreground: #dbd7ca;
|
||||
--primary: #4d9375;
|
||||
--primary-foreground: #000000;
|
||||
--secondary: #191919;
|
||||
--secondary-foreground: #bfbaaa;
|
||||
--muted: #121212;
|
||||
--muted-foreground: #758575;
|
||||
--accent: #6394bf;
|
||||
--accent-foreground: #000000;
|
||||
--destructive: #cb7676;
|
||||
--destructive-foreground: #000000;
|
||||
--border: #191919;
|
||||
--input: #191919;
|
||||
--ring: #4d9375;
|
||||
--success: #4d9375;
|
||||
--success-foreground: #000000;
|
||||
--warning: #e6cc77;
|
||||
--warning-foreground: #000000;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #121212;
|
||||
--focus-highlight: #4d9375;
|
||||
}
|
||||
|
||||
.theme-vitesse-black.light {
|
||||
--background: #000000;
|
||||
--foreground: #dbd7ca;
|
||||
--card: #121212;
|
||||
--card-foreground: #dbd7ca;
|
||||
--popover: #121212;
|
||||
--popover-foreground: #dbd7ca;
|
||||
--primary: #4d9375;
|
||||
--primary-foreground: #000000;
|
||||
--secondary: #191919;
|
||||
--secondary-foreground: #bfbaaa;
|
||||
--muted: #121212;
|
||||
--muted-foreground: #758575;
|
||||
--accent: #6394bf;
|
||||
--accent-foreground: #000000;
|
||||
--destructive: #cb7676;
|
||||
--destructive-foreground: #000000;
|
||||
--border: #191919;
|
||||
--input: #191919;
|
||||
--ring: #4d9375;
|
||||
--success: #4d9375;
|
||||
--success-foreground: #000000;
|
||||
--warning: #e6cc77;
|
||||
--warning-foreground: #000000;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #121212;
|
||||
--focus-highlight: #4d9375;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/* Vitesse — by Anthony Fu */
|
||||
.theme-vitesse {
|
||||
--background: #121212;
|
||||
--foreground: #dbd7ca;
|
||||
--card: #181818;
|
||||
--card-foreground: #dbd7ca;
|
||||
--popover: #181818;
|
||||
--popover-foreground: #dbd7ca;
|
||||
--primary: #4d9375;
|
||||
--primary-foreground: #121212;
|
||||
--secondary: #1e1e1e;
|
||||
--secondary-foreground: #bfbaaa;
|
||||
--muted: #181818;
|
||||
--muted-foreground: #758575;
|
||||
--accent: #e6cc77;
|
||||
--accent-foreground: #121212;
|
||||
--destructive: #cb7676;
|
||||
--destructive-foreground: #121212;
|
||||
--border: #252525;
|
||||
--input: #181818;
|
||||
--ring: #4d9375;
|
||||
--success: #4d9375;
|
||||
--success-foreground: #121212;
|
||||
--warning: #e6cc77;
|
||||
--warning-foreground: #121212;
|
||||
|
||||
--font-sans: system-ui, sans-serif;
|
||||
--font-mono: 'Fira Code', ui-monospace, monospace;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--code-bg: #181818;
|
||||
--focus-highlight: #4d9375;
|
||||
}
|
||||
|
||||
.theme-vitesse.light {
|
||||
--background: #ffffff;
|
||||
--foreground: #393a34;
|
||||
--card: #f7f7f7;
|
||||
--card-foreground: #393a34;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #393a34;
|
||||
--primary: #1c6b48;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f0f0f0;
|
||||
--secondary-foreground: #4e4f47;
|
||||
--muted: #f7f7f7;
|
||||
--muted-foreground: #a0ada0;
|
||||
--accent: #bda437;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #ab5959;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #f0f0f0;
|
||||
--input: #f7f7f7;
|
||||
--ring: #1c6b48;
|
||||
--success: #1e754f;
|
||||
--success-foreground: #ffffff;
|
||||
--warning: #bda437;
|
||||
--warning-foreground: #ffffff;
|
||||
|
||||
--code-bg: #f0f0f0;
|
||||
--focus-highlight: #1c6b48;
|
||||
}
|
||||
@@ -11,6 +11,7 @@ export interface ThemeInfo {
|
||||
name: string;
|
||||
builtIn: boolean;
|
||||
modeSupport: 'both' | 'dark-only' | 'light-only';
|
||||
syntaxHighlighting?: boolean;
|
||||
colors: {
|
||||
dark: ThemeColors;
|
||||
light: ThemeColors;
|
||||
@@ -48,6 +49,39 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
light: { primary: '#3584E4', secondary: '#e6e6e6', accent: '#26a269', background: '#fafafa', foreground: '#323232' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'andromeeda',
|
||||
name: 'Andromeeda',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#00e8c6', secondary: '#373941', accent: '#c74ded', background: '#23262e', foreground: '#d5ced9' },
|
||||
light: { primary: '#00e8c6', secondary: '#373941', accent: '#c74ded', background: '#23262e', foreground: '#d5ced9' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'aurora-x',
|
||||
name: 'Aurora X',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#86a5ff', secondary: '#262e47', accent: '#c792ea', background: '#07090f', foreground: '#a8beff' },
|
||||
light: { primary: '#86a5ff', secondary: '#262e47', accent: '#c792ea', background: '#07090f', foreground: '#a8beff' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'ayu-dark',
|
||||
name: 'Ayu Dark',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#e6b450', secondary: '#0b0e14', accent: '#73b8ff', background: '#10141c', foreground: '#bfbdb6' },
|
||||
light: { primary: '#e6b450', secondary: '#0b0e14', accent: '#73b8ff', background: '#10141c', foreground: '#bfbdb6' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'caffeine',
|
||||
name: 'Caffeine',
|
||||
@@ -63,6 +97,7 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
name: 'Catppuccin',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#89b4fa', secondary: '#45475a', accent: '#f5c2e7', background: '#1e1e2e', foreground: '#cdd6f4' },
|
||||
light: { primary: '#1e66f5', secondary: '#ccd0da', accent: '#ea76cb', background: '#eff1f5', foreground: '#4c4f69' },
|
||||
@@ -88,6 +123,17 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
light: { primary: '#3C7CAB', secondary: '#E8E8E8', accent: '#4C7F8C', background: '#FCFCFC', foreground: '#141414' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'dark-plus',
|
||||
name: 'Dark+',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#007acc', secondary: '#383b3d', accent: '#4ec9b0', background: '#1e1e1e', foreground: '#d4d4d4' },
|
||||
light: { primary: '#007acc', secondary: '#e8e8e8', accent: '#267f99', background: '#ffffff', foreground: '#000000' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'doom-64',
|
||||
name: 'Doom 64',
|
||||
@@ -103,26 +149,84 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
name: 'Dracula',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: 'rgb(189, 147, 249)', secondary: 'rgb(68, 71, 90)', accent: 'rgb(139, 233, 253)', background: 'rgb(40, 42, 54)', foreground: 'rgb(248, 248, 242)' },
|
||||
light: { primary: 'rgb(189, 147, 249)', secondary: 'rgb(68, 71, 90)', accent: 'rgb(139, 233, 253)', background: 'rgb(40, 42, 54)', foreground: 'rgb(248, 248, 242)' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'everforest',
|
||||
name: 'Everforest',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#A7C080', secondary: '#475258', accent: '#83C092', background: '#2D353B', foreground: '#D3C6AA' },
|
||||
light: { primary: '#8DA101', secondary: '#E6E2CC', accent: '#35A77C', background: '#FDF6E3', foreground: '#5C6A72' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'everforest-hard',
|
||||
name: 'Everforest Hard',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#A7C080', secondary: '#414B50', accent: '#83C092', background: '#272E33', foreground: '#D3C6AA' },
|
||||
light: { primary: '#8DA101', secondary: '#EDEADA', accent: '#35A77C', background: '#FFFBEF', foreground: '#5C6A72' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'everforest-soft',
|
||||
name: 'Everforest Soft',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#A7C080', secondary: '#4D5960', accent: '#83C092', background: '#333C43', foreground: '#D3C6AA' },
|
||||
light: { primary: '#8DA101', secondary: '#DDD8BE', accent: '#35A77C', background: '#F3EAD3', foreground: '#5C6A72' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'github',
|
||||
name: 'GitHub',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#58a6ff', secondary: '#2f363d', accent: '#79b8ff', background: '#24292e', foreground: '#e1e4e8' },
|
||||
light: { primary: '#0366d6', secondary: '#f6f8fa', accent: '#0366d6', background: '#ffffff', foreground: '#24292e' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'gruvbox',
|
||||
name: 'Gruvbox',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#458588', secondary: '#504945', accent: '#b8bb26', background: '#282828', foreground: '#ebdbb2' },
|
||||
light: { primary: '#076678', secondary: '#d5c4a1', accent: '#79740e', background: '#fbf1c7', foreground: '#3c3836' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'houston',
|
||||
name: 'Houston',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#4bf3c8', secondary: '#343841', accent: '#54b9ff', background: '#17191e', foreground: '#eef0f9' },
|
||||
light: { primary: '#4bf3c8', secondary: '#343841', accent: '#54b9ff', background: '#17191e', foreground: '#eef0f9' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'kanagawa-dragon',
|
||||
name: 'Kanagawa Dragon',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#7fb4ca', secondary: '#2a2625', accent: '#7aa89f', background: '#181616', foreground: '#c8c093' },
|
||||
light: { primary: '#7fb4ca', secondary: '#2a2625', accent: '#7aa89f', background: '#181616', foreground: '#c8c093' },
|
||||
@@ -133,6 +237,7 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
name: 'Kanagawa Lotus',
|
||||
builtIn: true,
|
||||
modeSupport: 'light-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#4d699b', secondary: '#dcd5ac', accent: '#624c83', background: '#f2ecbc', foreground: '#545464' },
|
||||
light: { primary: '#4d699b', secondary: '#dcd5ac', accent: '#624c83', background: '#f2ecbc', foreground: '#545464' },
|
||||
@@ -143,19 +248,32 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
name: 'Kanagawa Wave',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#7e9cd8', secondary: '#363646', accent: '#957fb8', background: '#1f1f28', foreground: '#dcd7ba' },
|
||||
light: { primary: '#7e9cd8', secondary: '#363646', accent: '#957fb8', background: '#1f1f28', foreground: '#dcd7ba' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'monokai-pro',
|
||||
name: 'Monokai Pro',
|
||||
id: 'laserwave',
|
||||
name: 'Laserwave',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#ffd866', secondary: '#5b595c', accent: '#78dce8', background: '#2d2a2e', foreground: '#fcfcfa' },
|
||||
light: { primary: '#ffd866', secondary: '#5b595c', accent: '#78dce8', background: '#2d2a2e', foreground: '#fcfcfa' },
|
||||
dark: { primary: '#eb64b9', secondary: '#3e3549', accent: '#40b4c4', background: '#27212e', foreground: '#ffffff' },
|
||||
light: { primary: '#eb64b9', secondary: '#3e3549', accent: '#40b4c4', background: '#27212e', foreground: '#ffffff' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'material',
|
||||
name: 'Material',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#80CBC4', secondary: '#1e272c', accent: '#C3E88D', background: '#263238', foreground: '#EEFFFF' },
|
||||
light: { primary: '#80CBC4', secondary: '#FAFAFA', accent: '#39ADB5', background: '#FAFAFA', foreground: '#90A4AE' },
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -168,6 +286,72 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
light: { primary: '#88C0D0', secondary: '#434C5E', accent: '#8FBCBB', background: '#1e2127', foreground: '#D8DEE9' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'min',
|
||||
name: 'Min',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#b392f0', secondary: '#2a2a2a', accent: '#79b8ff', background: '#1f1f1f', foreground: '#b392f0' },
|
||||
light: { primary: '#6f42c1', secondary: '#eeeeee', accent: '#1976d2', background: '#ffffff', foreground: '#24292e' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'monokai-pro',
|
||||
name: 'Monokai Pro',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#ffd866', secondary: '#5b595c', accent: '#78dce8', background: '#2d2a2e', foreground: '#fcfcfa' },
|
||||
light: { primary: '#ffd866', secondary: '#5b595c', accent: '#78dce8', background: '#2d2a2e', foreground: '#fcfcfa' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'night-owl',
|
||||
name: 'Night Owl',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#7e57c2', secondary: '#0b253a', accent: '#82aaff', background: '#011627', foreground: '#d6deeb' },
|
||||
light: { primary: '#7e57c2', secondary: '#0b253a', accent: '#82aaff', background: '#011627', foreground: '#d6deeb' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'nord',
|
||||
name: 'Nord',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#88c0d0', secondary: '#434c5e', accent: '#81a1c1', background: '#2e3440', foreground: '#d8dee9' },
|
||||
light: { primary: '#88c0d0', secondary: '#434c5e', accent: '#81a1c1', background: '#2e3440', foreground: '#d8dee9' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'one-dark-pro',
|
||||
name: 'One Dark Pro',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#61afef', secondary: '#21252b', accent: '#c678dd', background: '#282c34', foreground: '#abb2bf' },
|
||||
light: { primary: '#61afef', secondary: '#21252b', accent: '#c678dd', background: '#282c34', foreground: '#abb2bf' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'one-light',
|
||||
name: 'One Light',
|
||||
builtIn: true,
|
||||
modeSupport: 'light-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#526fff', secondary: '#e5e5e6', accent: '#4078f2', background: '#fafafa', foreground: '#383a42' },
|
||||
light: { primary: '#526fff', secondary: '#e5e5e6', accent: '#4078f2', background: '#fafafa', foreground: '#383a42' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'paulmillr',
|
||||
name: 'PaulMillr',
|
||||
@@ -178,6 +362,28 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
light: { primary: '#396bd7', secondary: '#414141', accent: '#66ccff', background: '#000000', foreground: '#f2f2f2' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'plastic',
|
||||
name: 'Plastic',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#1085ff', secondary: '#0d1117', accent: '#61afef', background: '#21252b', foreground: '#a9b2c3' },
|
||||
light: { primary: '#1085ff', secondary: '#0d1117', accent: '#61afef', background: '#21252b', foreground: '#a9b2c3' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'poimandres',
|
||||
name: 'Poimandres',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#add7ff', secondary: '#252934', accent: '#5de4c7', background: '#1b1e28', foreground: '#a6accd' },
|
||||
light: { primary: '#add7ff', secondary: '#252934', accent: '#5de4c7', background: '#1b1e28', foreground: '#a6accd' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'quantum-rose',
|
||||
name: 'Quantum Rose',
|
||||
@@ -188,16 +394,50 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
light: { primary: 'rgb(200, 50, 80)', secondary: 'rgb(240, 230, 235)', accent: '#ffc1e3', background: 'rgb(252, 248, 250)', foreground: 'rgb(25, 15, 20)' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'red',
|
||||
name: 'Red',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#cc3333', secondary: '#580000', accent: '#ffd0aa', background: '#390000', foreground: '#f8f8f8' },
|
||||
light: { primary: '#cc3333', secondary: '#580000', accent: '#ffd0aa', background: '#390000', foreground: '#f8f8f8' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'rose-pine',
|
||||
name: 'Rosé Pine',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#c4a7e7', secondary: '#403d52', accent: '#f6c177', background: '#191724', foreground: '#e0def4' },
|
||||
light: { primary: '#907aa9', secondary: '#dfdad9', accent: '#ea9d34', background: '#faf4ed', foreground: '#575279' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'slack',
|
||||
name: 'Slack',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#0077b5', secondary: '#141414', accent: '#1d978d', background: '#222222', foreground: '#e6e6e6' },
|
||||
light: { primary: '#5899c5', secondary: '#eeeeee', accent: '#5899c5', background: '#ffffff', foreground: '#000000' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'snazzy-light',
|
||||
name: 'Snazzy Light',
|
||||
builtIn: true,
|
||||
modeSupport: 'light-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#09a1ed', secondary: '#e9eaeb', accent: '#2dae58', background: '#fafbfc', foreground: '#565869' },
|
||||
light: { primary: '#09a1ed', secondary: '#e9eaeb', accent: '#2dae58', background: '#fafbfc', foreground: '#565869' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'soft-pop',
|
||||
name: 'Soft Pop',
|
||||
@@ -218,11 +458,23 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
light: { primary: 'oklch(0.5553 0.1455 48.9975)', secondary: 'oklch(0.9139 0.0359 77.3089)', accent: 'oklch(0.55 0.12 229)', background: 'oklch(0.9685 0.0187 84.078)', foreground: 'oklch(0.366 0.0251 49.6085)' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'solarized',
|
||||
name: 'Solarized',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#268bd2', secondary: '#073642', accent: '#2aa198', background: '#002b36', foreground: '#839496' },
|
||||
light: { primary: '#268bd2', secondary: '#eee8d5', accent: '#2aa198', background: '#fdf6e3', foreground: '#657b83' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'synthwave-84',
|
||||
name: 'Synthwave \'84',
|
||||
name: "Synthwave '84",
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#ff7edb', secondary: '#34294f', accent: '#72f1b8', background: '#262335', foreground: '#ffffff' },
|
||||
light: { primary: '#ff7edb', secondary: '#34294f', accent: '#72f1b8', background: '#262335', foreground: '#ffffff' },
|
||||
@@ -253,9 +505,43 @@ export const BUILT_IN_THEMES: ThemeInfo[] = [
|
||||
name: 'Tokyo Night',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#7aa2f7', secondary: '#414868', accent: '#7dcfff', background: '#24283b', foreground: '#c0caf5' },
|
||||
light: { primary: '#2e7de9', secondary: '#a1a6c5', accent: '#007197', background: '#e1e2e7', foreground: '#3760bf' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'vesper',
|
||||
name: 'Vesper',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#FFC799', secondary: '#1C1C1C', accent: '#99FFE4', background: '#101010', foreground: '#FFFFFF' },
|
||||
light: { primary: '#FFC799', secondary: '#1C1C1C', accent: '#99FFE4', background: '#101010', foreground: '#FFFFFF' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'vitesse',
|
||||
name: 'Vitesse',
|
||||
builtIn: true,
|
||||
modeSupport: 'both',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#4d9375', secondary: '#181818', accent: '#e6cc77', background: '#121212', foreground: '#dbd7ca' },
|
||||
light: { primary: '#1c6b48', secondary: '#f1f1f1', accent: '#bda437', background: '#ffffff', foreground: '#393a34' },
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'vitesse-black',
|
||||
name: 'Vitesse Black',
|
||||
builtIn: true,
|
||||
modeSupport: 'dark-only',
|
||||
syntaxHighlighting: true,
|
||||
colors: {
|
||||
dark: { primary: '#4d9375', secondary: '#191919', accent: '#6394bf', background: '#000000', foreground: '#dbd7ca' },
|
||||
light: { primary: '#4d9375', secondary: '#191919', accent: '#6394bf', background: '#000000', foreground: '#dbd7ca' },
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user