static/theme.css

:root {
  --app-bg: #111827;
  --app-fg: #ffffff;
  --panel-bg: #1f2937;
  --panel-bg-2: #111827;
  --border: rgba(75, 85, 99, 0.7);
  --muted: rgba(203, 213, 225, 0.75);
  --accent-1: #60a5fa;
  --accent-2: #a78bfa;
}

[data-theme="light"] {
  --accent-1: #2563eb;
  --accent-2: #7c3aed;
  --app-bg:
    radial-gradient(1100px 520px at 18% 0%, rgba(37, 99, 235, 0.12), transparent 60%),
    radial-gradient(1100px 520px at 82% 0%, rgba(124, 58, 237, 0.10), transparent 60%),
    #f7f8ff;
  --app-fg: #0b1220;
  --panel-bg: #ffffff;
  --panel-bg-2: #f3f5fa;
  --border: rgba(2, 6, 23, 0.12);
  --muted: rgba(30, 41, 59, 0.72);
}

html,
body {
  background: var(--app-bg);
  color: var(--app-fg);
}

nav,
footer {
  background: var(--panel-bg) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .bg-gray-900 {
  background-color: var(--panel-bg-2) !important;
}
[data-theme="light"] .bg-gray-800 {
  background-color: var(--panel-bg) !important;
}
[data-theme="light"] .bg-gray-700 {
  background-color: rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .bg-gray-600 {
  background-color: rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .bg-black {
  background-color: #0b1220 !important;
}
[data-theme="light"] .bg-white\/10 {
  background-color: rgba(2, 6, 23, 0.06) !important;
}
[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-600 {
  border-color: var(--border) !important;
}

[data-theme="light"] .hover\:bg-gray-700:hover {
  background-color: rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .hover\:bg-gray-600:hover {
  background-color: rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .hover\:bg-white\/10:hover {
  background-color: rgba(2, 6, 23, 0.08) !important;
}

[data-theme="light"] .text-white {
  color: var(--app-fg) !important;
}
[data-theme="light"] .text-gray-300 {
  color: rgba(15, 23, 42, 0.92) !important;
}
[data-theme="light"] .text-gray-400 {
  color: rgba(15, 23, 42, 0.78) !important;
}
[data-theme="light"] .text-gray-500 {
  color: rgba(15, 23, 42, 0.66) !important;
}
[data-theme="light"] .text-gray-200 {
  color: rgba(15, 23, 42, 0.96) !important;
}

[data-theme="light"] a,
[data-theme="light"] .prose a {
  color: var(--accent-1);
}

[data-theme="light"] .bg-blue-600 {
  background-color: var(--accent-1) !important;
}
[data-theme="light"] .hover\:bg-blue-700:hover {
  background-color: #1d4ed8 !important;
}
[data-theme="light"] .bg-indigo-600,
[data-theme="light"] .bg-purple-600 {
  background-color: var(--accent-2) !important;
}
[data-theme="light"] .hover\:bg-indigo-700:hover,
[data-theme="light"] .hover\:bg-purple-700:hover {
  background-color: #6d28d9 !important;
}

[data-theme="light"] .text-blue-500,
[data-theme="light"] .text-blue-400,
[data-theme="light"] .text-blue-300 {
  color: var(--accent-1) !important;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #ffffff !important;
  color: var(--app-fg) !important;
  border-color: var(--border) !important;
}

#nav-theme {
  border: 1px solid var(--border);
}

#theme-icon {
  font-size: 16px;
  line-height: 1;
}