vegard/synops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mørkt tema: matcher landingssiden (accent indigo, surface #141416)

Browse source 
Overstyr Tailwind grays med mørke fargevariabler. Inputs, borders,
shadows, scrollbar, knapper og tekst tilpasset. Samme palett som
synops.no landingssiden.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
vegard 2026-03-19 02:16:32 +00:00
parent 09f69d1fdb
commit 98a7b0ab62
1 changed files with 89 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
frontend/src/app.css
View file

@ -1 +1,90 @@
@import 'tailwindcss';
/* Synops mørkt tema — matcher landingssiden */
@theme {
--color-bg: #0a0a0b;
--color-surface: #141416;
--color-surface-hover: #1a1a1e;
--color-border: #2a2a2e;
--color-border-hover: #3a3a3e;
--color-text: #e8e8ec;
--color-text-muted: #8a8a96;
--color-text-dim: #5a5a66;
--color-accent: #6366f1;
--color-accent-hover: #7577f5;
--color-accent-glow: rgba(99, 102, 241, 0.15);
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-error: #ef4444;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: 'Inter', -apple-system, system-ui, sans-serif;
}
/* Override Tailwind defaults for dark theme */
@layer base {
/* Overstyr alle bg-white til surface */
.bg-white { background-color: var(--color-surface) !important; }
.bg-gray-50 { background-color: var(--color-bg) !important; }
.bg-gray-100 { background-color: var(--color-surface) !important; }
.bg-gray-200 { background-color: var(--color-border) !important; }
/* Tekst */
.text-gray-900 { color: var(--color-text) !important; }
.text-gray-800 { color: var(--color-text) !important; }
.text-gray-700 { color: var(--color-text-muted) !important; }
.text-gray-600 { color: var(--color-text-muted) !important; }
.text-gray-500 { color: var(--color-text-muted) !important; }
.text-gray-400 { color: var(--color-text-dim) !important; }
.text-gray-300 { color: var(--color-text-dim) !important; }
/* Borders */
.border-gray-200 { border-color: var(--color-border) !important; }
.border-gray-300 { border-color: var(--color-border) !important; }
.border-gray-100 { border-color: var(--color-border) !important; }
/* Hover states */
.hover\:bg-gray-200:hover { background-color: var(--color-surface-hover) !important; }
.hover\:bg-gray-100:hover { background-color: var(--color-surface-hover) !important; }
.hover\:text-gray-700:hover { color: var(--color-text) !important; }
/* Accent-farger for knapper */
.bg-indigo-500, .bg-indigo-600 { background-color: var(--color-accent) !important; }
.hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover { background-color: var(--color-accent-hover) !important; }
.text-indigo-600, .text-indigo-500, .text-indigo-700 { color: var(--color-accent) !important; }
.bg-indigo-50, .bg-indigo-100 { background-color: var(--color-accent-glow) !important; }
.border-indigo-300 { border-color: var(--color-accent) !important; }
.hover\:border-indigo-300:hover { border-color: var(--color-accent) !important; }
/* Inputs og textareas */
input, textarea, select {
background-color: var(--color-surface) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
input:focus, textarea:focus, select:focus {
border-color: var(--color-accent) !important;
outline-color: var(--color-accent) !important;
}
input::placeholder, textarea::placeholder {
color: var(--color-text-dim) !important;
}
/* Shadows */
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; }
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; }
/* Status-farger */
.text-green-600 { color: var(--color-success) !important; }
.text-yellow-600 { color: var(--color-warning) !important; }
.text-red-600 { color: var(--color-error) !important; }
/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }
}