Lomer UI

Setup

Theming Structure

Customize styles to match your vibe.

Foreground vs Background

In UI design, foreground and background define the visual layers of an element:

Foreground: Text, icons, borders

→ Controlled with color, fill, stroke, border-color

Background: Element surface behind content

→ Controlled with background-color, background-image

Convention

The most common 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.

1 
<Button class="bg-primary text-primary-fg">
2 
	Sample styling
3 
</Button>

Source Code

Define your theme variables.

1 
@import 'tailwindcss';
2
3 
@variant dark (&:where(.dark, .dark *));
4
5 
@theme {
6 
    /* Primary shades */
7 
    --color-primary-50: var(--color-cyan-50);
8 
    --color-primary-100: var(--color-cyan-100);
9 
    --color-primary-200: var(--color-cyan-200);
10 
    --color-primary-300: var(--color-cyan-300);
11 
    --color-primary-400: var(--color-cyan-400);
12 
    --color-primary-500: var(--color-cyan-500);
13 
    --color-primary-600: var(--color-cyan-600);
14 
    --color-primary-700: var(--color-cyan-700);
15 
    --color-primary-800: var(--color-cyan-800);
16 
    --color-primary-900: var(--color-cyan-900);
17 
    --color-primary-950: var(--color-cyan-950);
18 
    --color-primary-50: var(--color-cyan-50);
19
20 
    /* General shades */
21 
    --color-general-50: var(--color-zinc-50);
22 
    --color-general-100: var(--color-zinc-100);
23 
    --color-general-200: var(--color-zinc-200);
24 
    --color-general-300: var(--color-zinc-300);
25 
    --color-general-400: var(--color-zinc-400);
26 
    --color-general-500: var(--color-zinc-500);
27 
    --color-general-600: var(--color-zinc-600);
28 
    --color-general-700: var(--color-zinc-700);
29 
    --color-general-800: var(--color-zinc-800);
30 
    --color-general-900: var(--color-zinc-900);
31 
    --color-general-950: var(--color-zinc-950);
32
33 
    /* General background and foreground color. */
34 
    --color-bg: var(--color-general-50);
35 
    --color-fg: var(--color-general-950);
36
37 
    /* Branding color of your design. */
38 
    --color-primary: var(--color-primary-600);
39 
    --color-primary-fg: var(--color-general-50);
40
41 
    /* Supporting color of your design. */
42 
    --color-secondary: var(--color-general-200);
43 
    --color-secondary-fg: var(--color-general-950);
44
45 
    /* Signals danger, warning or irreversibility action color. */
46 
    --color-destructive: var(--color-red-500);
47 
    --color-destructive-fg: var(--color-general-50);
48
49 
    /* Softer contrast for supporting details color. */
50 
    --color-muted: var(--color-general-600);
51 
    --color-muted-fg: var(--color-general-400);
52
53 
    /* Visually indicate disabled actions. */
54 
    --color-disabled: var(--color-general-200);
55 
    --color-disabled-fg: var(--color-general-400);
56
57 
    /* Form input elements color. */
58 
    --color-input: var(--color-general-50);
59 
    --color-input-fg: var(--color-general-950);
60
61 
    /* Default border color. */
62 
    --color-border: var(--color-general-300);
63
64 
    /* Default border radius. */
65 
    --radius: 0.25rem;
66 
}
67
68 
.dark {
69 
    /* General background and foreground color. */
70 
    --color-bg: var(--color-general-950);
71 
    --color-fg: var(--color-general-50);
72
73 
    /* Branding color of your design. */
74 
    --color-primary: var(--color-primary-500);
75 
    --color-primary-fg: var(--color-general-50);
76
77 
    /* Supporting color of your design. */
78 
    --color-secondary: var(--color-general-800);
79 
    --color-secondary-fg: var(--color-general-50);
80
81 
    /* Signals danger, warning or irreversibility action color. */
82 
    --color-destructive: var(--color-red-500);
83 
    --color-destructive-fg: var(--color-general-50);
84
85 
    /* Softer contrast for supporting details color. */
86 
    --color-muted: var(--color-general-400);
87 
    --color-muted-fg: var(--color-general-600);
88
89 
    /* Visually indicate disabled actions. */
90 
    --color-disabled: var(--color-general-800);
91 
    --color-disabled-fg: var(--color-general-500);
92
93 
    /* Form input elements color. */
94 
    --color-input: var(--color-general-950);
95 
    --color-input-fg: var(--color-general-50);
96
97 
    /* Default border color. */
98 
    --color-border: var(--color-general-700);
99 
}
100
101 
@layer base {
102 
    * {
103 
        @apply border-border;
104 
    }
105
106 
    body {
107 
        @apply bg-bg text-fg;
108 
        font-family: 'Nunito Sans Variable', sans-serif;
109 
    }
110
111 
    ::selection {
112 
        background-color: var(--color-primary) !important;
113 
        color: var(--color-primary-fg) !important;
114 
    }
115 
}
116

Share treats:

Copyright © 2025 - Cliemtor Fabros