lomer-ui

Docs

Theming

Customize styles to match your vibe.

I was inspired by ShadCN's beautiful theming—it's simple, intuitive, and loved by developers. To help new Svelte developers or those exploring a UI library, I’ve adapted some of its naming conventions.

Convention

The most common and straightforward approach is to use bg and fg for color variables, simplifying "background" and "foreground". To keep our code clean, bg is omitted when it's context is clear.

e.g.

bg-primary-bg text-primary-fg

bg-primary text-primary-fg

Default lomer.css

Using npx lomer-ui init will automatically import lomer.css to your app.css.

app.css

1 
@import "tailwindcss";
2 
@import './lib/components/base/lomer.css';

lomer.css

1 
@variant dark (&:where(.dark, .dark *));
2
3 
@theme {
4 
  /* General background and foreground color. */
5 
  --color-bg: var(--color-zinc-50);
6 
  --color-fg: var(--color-zinc-950);
7
8 
  /* Branding color of your design. */
9 
  --color-primary: var(--color-cyan-600);
10 
  --color-primary-fg: var(--color-zinc-50);
11
12 
  /* Supporting color of your design. */
13 
  --color-secondary: var(--color-zinc-200);
14 
  --color-secondary-fg: var(--color-zinc-950);
15
16 
  /* Signals danger, warning or irreversibility action color. */
17 
  --color-destructive: var(--color-red-500);
18 
  --color-destructive-fg: var(--color-zinc-50);
19
20 
  /* Softer contrast for supporting details color. */
21 
  --color-muted: var(--color-zinc-600);
22 
  --color-muted-fg: var(--color-zinc-400);
23
24 
  /* Visually indicate disabled actions. */
25 
  --color-disabled: var(--color-zinc-200);
26 
  --color-disabled-fg: var(--color-zinc-400);
27
28 
  /* Form input elements color. */
29 
  --color-input: var(--color-zinc-50);
30 
  --color-input-fg: var(--color-zinc-950);
31
32 
  /* Default border color. */
33 
  --color-border: var(--color-zinc-300);
34
35 
  /* Default border radius. */
36 
  --radius: 0.25rem;
37 
}
38
39 
.dark {
40 
  /* General background and foreground color. */
41 
  --color-bg: var(--color-zinc-950);
42 
  --color-fg: var(--color-zinc-50);
43
44 
  /* Branding color of your design. */
45 
  --color-primary: var(--color-cyan-500);
46 
  --color-primary-fg: var(--color-zinc-50);
47
48 
  /* Supporting color of your design. */
49 
  --color-secondary: var(--color-zinc-800);
50 
  --color-secondary-fg: var(--color-zinc-50);
51
52 
  /* Signals danger, warning or irreversibility action color. */
53 
  --color-destructive: var(--color-red-500);
54 
  --color-destructive-fg: var(--color-zinc-50);
55
56 
  /* Softer contrast for supporting details color. */
57 
  --color-muted: var(--color-zinc-400);
58 
  --color-muted-fg: var(--color-zinc-600);
59
60 
  /* Visually indicate disabled actions. */
61 
  --color-disabled: var(--color-zinc-800);
62 
  --color-disabled-fg: var(--color-zinc-500);
63
64 
  /* Form input elements color. */
65 
  --color-input: var(--color-zinc-950);
66 
  --color-input-fg: var(--color-zinc-50);
67
68 
  /* Default border color. */
69 
  --color-border: var(--color-zinc-700);
70 
}
71
72 
@layer base {
73 
  * {
74 
    @apply border-border;
75 
  }
76 
  body {
77 
    @apply bg-bg text-fg;
78 
  }
79 
  ::selection {
80 
    background-color: var(--color-primary) !important;
81 
    color: var(--color-primary-fg) !important;
82 
  }
83 
}
84

Adding theme variables