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

Håndlagde tema-presets med mer variasjon og harmoni

Browse source 
Hvert preset har nå individuelt justerte farger per overflate i stedet
for auto-genererte. Canvas, header, panel og border har subtilt ulike
nyanser for dybde. Omdøpt: Standard→Midnatt, Hav→Dyphav, Rosa→Kirsebær,
Lys→Dagslys, Monokrom→Kull. Alle mørke temaer har varm/kald karakter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
vegard 2026-03-19 07:14:13 +00:00
parent a2fc8609d4
commit 3cfa9a8b12
1 changed files with 81 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
frontend/src/lib/workspace/theme.ts
View file

@ -62,14 +62,87 @@ function preset(
}
export const THEME_PRESETS: ThemePreset[] = [
{ name: 'Standard', emoji: '🌑', theme: DEFAULT_THEME },
{ name: 'Hav', emoji: '🌊', theme: preset([200, 75, 60], 5) },
{ name: 'Skog', emoji: '🌲', theme: preset([142, 65, 55], 5) },
{ name: 'Solnedgang', emoji: '🌅', theme: preset([25, 80, 60], 6) },
{ name: 'Lavendel', emoji: '💜', theme: preset([280, 65, 60], 5) },
{ name: 'Rosa', emoji: '🌸', theme: preset([330, 70, 60], 5) },
{ name: 'Lys', emoji: '☀️', theme: preset([220, 50, 50], 95) },
{ name: 'Monokrom', emoji: '⚫', theme: preset([0, 0, 60], 5) },
{
name: 'Midnatt', emoji: '🌑',
theme: DEFAULT_THEME,
},
{
name: 'Dyphav', emoji: '🌊',
theme: {
canvas: { hue: 215, saturation: 25, lightness: 5 },
header: { hue: 210, saturation: 20, lightness: 12 },
panel: { hue: 205, saturation: 18, lightness: 14 },
border: { hue: 210, saturation: 15, lightness: 20 },
accent: { hue: 190, saturation: 80, lightness: 55 },
text: { hue: 200, saturation: 10, lightness: 88 },
},
},
{
name: 'Skog', emoji: '🌲',
theme: {
canvas: { hue: 160, saturation: 18, lightness: 4 },
header: { hue: 150, saturation: 14, lightness: 11 },
panel: { hue: 145, saturation: 12, lightness: 13 },
border: { hue: 155, saturation: 10, lightness: 19 },
accent: { hue: 135, saturation: 60, lightness: 50 },
text: { hue: 140, saturation: 8, lightness: 85 },
},
},
{
name: 'Solnedgang', emoji: '🌅',
theme: {
canvas: { hue: 20, saturation: 20, lightness: 5 },
header: { hue: 15, saturation: 16, lightness: 12 },
panel: { hue: 12, saturation: 14, lightness: 14 },
border: { hue: 18, saturation: 12, lightness: 20 },
accent: { hue: 30, saturation: 85, lightness: 58 },
text: { hue: 25, saturation: 10, lightness: 90 },
},
},
{
name: 'Lavendel', emoji: '💜',
theme: {
canvas: { hue: 265, saturation: 15, lightness: 5 },
header: { hue: 270, saturation: 12, lightness: 13 },
panel: { hue: 275, saturation: 10, lightness: 15 },
border: { hue: 268, saturation: 8, lightness: 22 },
accent: { hue: 280, saturation: 60, lightness: 62 },
text: { hue: 270, saturation: 8, lightness: 88 },
},
},
{
name: 'Kirsebær', emoji: '🌸',
theme: {
canvas: { hue: 340, saturation: 14, lightness: 5 },
header: { hue: 335, saturation: 12, lightness: 12 },
panel: { hue: 330, saturation: 10, lightness: 14 },
border: { hue: 338, saturation: 8, lightness: 20 },
accent: { hue: 345, saturation: 65, lightness: 58 },
text: { hue: 340, saturation: 6, lightness: 90 },
},
},
{
name: 'Dagslys', emoji: '☀️',
theme: {
canvas: { hue: 220, saturation: 15, lightness: 96 },
header: { hue: 220, saturation: 12, lightness: 100 },
panel: { hue: 220, saturation: 10, lightness: 100 },
border: { hue: 220, saturation: 10, lightness: 85 },
accent: { hue: 230, saturation: 65, lightness: 50 },
text: { hue: 220, saturation: 10, lightness: 12 },
},
},
{
name: 'Kull', emoji: '⚫',
theme: {
canvas: { hue: 0, saturation: 0, lightness: 8 },
header: { hue: 0, saturation: 0, lightness: 14 },
panel: { hue: 0, saturation: 0, lightness: 16 },
border: { hue: 0, saturation: 0, lightness: 22 },
accent: { hue: 0, saturation: 0, lightness: 65 },
text: { hue: 0, saturation: 0, lightness: 82 },
},
},
];
function hsl(c: SurfaceColor): string {