[ [0xB2] Extras ] Advanced Theme Generator

Advanced Theme Generator

> Professional theme creation tool with live preview, color science, and fine-tuning controls.

Overview

[ [0xB2] STATUS ]

Create production-ready OKLCH themes with advanced color generation algorithms. Features live preview, color intensity controls, contrast adjustment, and instant export. All themes maintain WCAG AA accessibility standards.

Features

[ [0x01] LIVE_PREVIEW ]

STATUS: READY

DESC: See changes in real-time

[ [0x02] 20+_SEMANTIC ]

STATUS: READY

DESC: Auto-generated palette

[ [0x03] ADVANCED_CON ]

STATUS: READY

DESC: Fine-tune every aspect

[ [0x40] THEME_CONFIGURATION ]

[THEME NAME]:

[THEME ID]:

[PRIMARY COLOR]:

[DARK MODE]:

Dark theme variant

[COLOR INTENSITY]:100%

Adjust color saturation and vibrancy

[CONTRAST LEVEL]:100%

Fine-tune text contrast for accessibility

[BORDER RADIUS]:0rem

Adjust corner roundness (0 = sharp terminal style)

[CODE HIGHLIGHT]:100%

Control syntax highlighting color intensity

[ [0x5F] COLOR_PALETTE ]

--backgroundoklch(5% 0.018854771784232366 239)

--foregroundoklch(85% 0.05892116182572615 239)

--cardoklch(7% 0.018854771784232366 239)

--card-foregroundoklch(85% 0.05892116182572615 239)

--popoveroklch(7% 0.018854771784232366 239)

--popover-foregroundoklch(85% 0.05892116182572615 239)

--primaryoklch(35% 0.2356846473029046 239)

--primary-foregroundoklch(8% 0.03535269709543569 239)

--secondaryoklch(22% 0.09427385892116184 239)

--secondary-foregroundoklch(85% 0.05892116182572615 239)

--mutedoklch(18% 0.03535269709543569 239)

--muted-foregroundoklch(55% 0.04242323651452282 239)

--accentoklch(22% 0.0824896265560166 239)

--accent-foregroundoklch(85% 0.05892116182572615 239)

--destructiveoklch(48% 0.22 12)

--destructive-foregroundoklch(8% 0.04 12)

--successoklch(52% 0.18 145)

--success-foregroundoklch(8% 0.04 145)

--warningoklch(58% 0.18 75)

--warning-foregroundoklch(8% 0.04 75)

--borderoklch(23% 0.02828215767634855 239)

--inputoklch(23% 0.02828215767634855 239)

--ringoklch(35% 0.2356846473029046 239)

--code-fgoklch(85% 0.02828215767634855 59)

--code-bgoklch(16% 0.0047136929460580915 239)

--code-commentoklch(58% 0.018854771784232366 59)

--code-keywordoklch(72% 0.03299585062240665 209)

--code-stringoklch(68% 0.03299585062240665 299)

--code-functionoklch(75% 0.03535269709543569 269)

--code-variableoklch(70% 0.025925311203319503 239)

--code-numberoklch(74% 0.030639004149377598 329)

--code-operatoroklch(78% 0.02356846473029046 179)

--code-punctuationoklch(72% 0.02356846473029046 254)

--code-selectoroklch(82% 0.02828215767634855 239)

[ [0x46] COMPONENT_PREVIEW ]

Preview how your theme looks on actual UI components

[0x01] SAMPLE_CARD

DefaultSecondaryOutline

[0x02] STATUS_BADGES

SuccessWarningError

Muted background with muted foreground text for less emphasis

Accent background highlighting important information

[ [0x13] GENERATED_CSS ]

[EXPORT OPTIONS]:

1/* Custom Theme Theme - Generated with Fabrk Theme Generator */
2[data-theme='custom-theme'] {
3  /* Base colors */
4  --background: 5% 0.018854771784232366 239;
5  --foreground: 85% 0.05892116182572615 239;
6
7  /* Card */
8  --card: 7% 0.018854771784232366 239;
9  --card-foreground: 85% 0.05892116182572615 239;
10
11  /* Popover */
12  --popover: 7% 0.018854771784232366 239;
13  --popover-foreground: 85% 0.05892116182572615 239;
14
15  /* Primary */
16  --primary: 35% 0.2356846473029046 239;
17  --primary-foreground: 8% 0.03535269709543569 239;
18
19  /* Secondary */
20  --secondary: 22% 0.09427385892116184 239;
21  --secondary-foreground: 85% 0.05892116182572615 239;
22
23  /* Muted */
24  --muted: 18% 0.03535269709543569 239;
25  --muted-foreground: 55% 0.04242323651452282 239;
26
27  /* Accent */
28  --accent: 22% 0.0824896265560166 239;
29  --accent-foreground: 85% 0.05892116182572615 239;
30
31  /* Destructive */
32  --destructive: 48% 0.22 12;
33  --destructive-foreground: 8% 0.04 12;
34
35  /* Success */
36  --success: 52% 0.18 145;
37  --success-foreground: 8% 0.04 145;
38
39  /* Warning */
40  --warning: 58% 0.18 75;
41  --warning-foreground: 8% 0.04 75;
42
43  /* Border */
44  --border: 23% 0.02828215767634855 239;
45  --input: 23% 0.02828215767634855 239;
46  --ring: 35% 0.2356846473029046 239;
47
48  /* Chart colors (derived from primary) */
49  --chart-1: 35% 0.2356846473029046 239;
50  --chart-2: 22% 0.09427385892116184 239;
51  --chart-3: 22% 0.0824896265560166 239;
52  --chart-4: 52% 0.18 145;
53  --chart-5: 58% 0.18 75;
54
55  /* Code syntax highlighting (wrapped in oklch for Prism compatibility) */
56  --code-fg: oklch(85% 0.02828215767634855 59);
57  --code-bg: oklch(16% 0.0047136929460580915 239);
58  --code-comment: oklch(58% 0.018854771784232366 59);
59  --code-keyword: oklch(72% 0.03299585062240665 209);
60  --code-string: oklch(68% 0.03299585062240665 299);
61  --code-function: oklch(75% 0.03535269709543569 269);
62  --code-variable: oklch(70% 0.025925311203319503 239);
63  --code-number: oklch(74% 0.030639004149377598 329);
64  --code-operator: oklch(78% 0.02356846473029046 179);
65  --code-punctuation: oklch(72% 0.02356846473029046 254);
66  --code-selector: oklch(82% 0.02828215767634855 239);
67
68  /* Radius */
69  --radius: 0rem;
70}

[ [0x6F] INTEGRATION_GUIDE ]

Add the generated CSS to your globals.css file:

1/* src/app/globals.css */
2/* Custom Theme Theme - Generated with Fabrk Theme Generator */
3[data-theme='custom-theme'] {
4  /* Base colors */
5  --background: 5% 0.018854771784232366 239;
6  --foreground: 85% 0.05892116182572615 239;
7
8  /* Card */
9  --card: 7% 0.018854771784232366 239;
10  --card-foreground: 85% 0.05892116182572615 239;
11
12  /* Popover */
13  --popover: 7% 0.018854771784232366 239;
14  --popover-foreground: 85% 0.05892116182572615 239;
15
16  /* Primary */
17  --primary: 35% 0.2356846473029046 239;
18  --primary-foreground: 8% 0.03535269709543569 239;
19
20  /* Secondary */
21  --secondary: 22% 0.09427385892116184 239;
22  --secondary-foreground: 85% 0.05892116182572615 239;
23
24  /* Muted */
25  --muted: 18% 0.03535269709543569 239;
26  --muted-foreground: 55% 0.04242323651452282 239;
27
28  /* Accent */
29  --accent: 22% 0.0824896265560166 239;
30  --accent-foreground: 85% 0.05892116182572615 239;
31
32  /* Destructive */
33  --destructive: 48% 0.22 12;
34  --destructive-foreground: 8% 0.04 12;
35
36  /* Success */
37  --success: 52% 0.18 145;
38  --success-foreground: 8% 0.04 145;
39
40  /* Warning */
41  --warning: 58% 0.18 75;
42  --warning-foreground: 8% 0.04 75;
43
44  /* Border */
45  --border: 23% 0.02828215767634855 239;
46  --input: 23% 0.02828215767634855 239;
47  --ring: 35% 0.2356846473029046 239;
48
49  /* Chart colors (derived from primary) */
50  --chart-1: 35% 0.2356846473029046 239;
51  --chart-2: 22% 0.09427385892116184 239;
52  --chart-3: 22% 0.0824896265560166 239;
53  --chart-4: 52% 0.18 145;
54  --chart-5: 58% 0.18 75;
55
56  /* Code syntax highlighting (wrapped in oklch for Prism compatibility) */
57  --code-fg: oklch(85% 0.02828215767634855 59);
58  --code-bg: oklch(16% 0.0047136929460580915 239);
59  --code-comment: oklch(58% 0.018854771784232366 59);
60  --code-keyword: oklch(72% 0.03299585062240665 209);
61  --code-string: oklch(68% 0.03299585062240665 299);
62  --code-function: oklch(75% 0.03535269709543569 269);
63  --code-variable: oklch(70% 0.025925311203319503 239);
64  --code-number: oklch(74% 0.030639004149377598 329);
65  --code-operator: oklch(78% 0.02356846473029046 179);
66  --code-punctuation: oklch(72% 0.02356846473029046 254);
67  --code-selector: oklch(82% 0.02828215767634855 239);
68
69  /* Radius */
70  --radius: 0rem;
71}

1/* Custom Theme Theme - Generated with Fabrk Theme Generator */

2[data-theme='custom-theme'] {

3 /* Base colors */

4 --background: 5% 0.018854771784232366 239;

5 --foreground: 85% 0.05892116182572615 239;

7 /* Card */

8 --card: 7% 0.018854771784232366 239;

9 --card-foreground: 85% 0.05892116182572615 239;

11 /* Popover */

12 --popover: 7% 0.018854771784232366 239;

13 --popover-foreground: 85% 0.05892116182572615 239;

15 /* Primary */

16 --primary: 35% 0.2356846473029046 239;

17 --primary-foreground: 8% 0.03535269709543569 239;

19 /* Secondary */

20 --secondary: 22% 0.09427385892116184 239;

21 --secondary-foreground: 85% 0.05892116182572615 239;

23 /* Muted */

24 --muted: 18% 0.03535269709543569 239;

25 --muted-foreground: 55% 0.04242323651452282 239;

27 /* Accent */

28 --accent: 22% 0.0824896265560166 239;

29 --accent-foreground: 85% 0.05892116182572615 239;

31 /* Destructive */

32 --destructive: 48% 0.22 12;

33 --destructive-foreground: 8% 0.04 12;

35 /* Success */

36 --success: 52% 0.18 145;

37 --success-foreground: 8% 0.04 145;

39 /* Warning */

40 --warning: 58% 0.18 75;

41 --warning-foreground: 8% 0.04 75;

43 /* Border */

44 --border: 23% 0.02828215767634855 239;

45 --input: 23% 0.02828215767634855 239;

46 --ring: 35% 0.2356846473029046 239;

48 /* Chart colors (derived from primary) */

49 --chart-1: 35% 0.2356846473029046 239;

50 --chart-2: 22% 0.09427385892116184 239;

51 --chart-3: 22% 0.0824896265560166 239;

52 --chart-4: 52% 0.18 145;

53 --chart-5: 58% 0.18 75;

55 /* Code syntax highlighting (wrapped in oklch for Prism compatibility) */

56 --code-fg: oklch(85% 0.02828215767634855 59);

57 --code-bg: oklch(16% 0.0047136929460580915 239);

58 --code-comment: oklch(58% 0.018854771784232366 59);

59 --code-keyword: oklch(72% 0.03299585062240665 209);

60 --code-string: oklch(68% 0.03299585062240665 299);

61 --code-function: oklch(75% 0.03535269709543569 269);

62 --code-variable: oklch(70% 0.025925311203319503 239);

63 --code-number: oklch(74% 0.030639004149377598 329);

64 --code-operator: oklch(78% 0.02356846473029046 179);

65 --code-punctuation: oklch(72% 0.02356846473029046 254);

66 --code-selector: oklch(82% 0.02828215767634855 239);

68 /* Radius */

69 --radius: 0rem;

70}

1/* src/app/globals.css */

2/* Custom Theme Theme - Generated with Fabrk Theme Generator */

3[data-theme='custom-theme'] {

4 /* Base colors */

5 --background: 5% 0.018854771784232366 239;

6 --foreground: 85% 0.05892116182572615 239;

8 /* Card */

9 --card: 7% 0.018854771784232366 239;

10 --card-foreground: 85% 0.05892116182572615 239;

12 /* Popover */

13 --popover: 7% 0.018854771784232366 239;

14 --popover-foreground: 85% 0.05892116182572615 239;

16 /* Primary */

17 --primary: 35% 0.2356846473029046 239;

18 --primary-foreground: 8% 0.03535269709543569 239;

20 /* Secondary */

21 --secondary: 22% 0.09427385892116184 239;

22 --secondary-foreground: 85% 0.05892116182572615 239;

24 /* Muted */

25 --muted: 18% 0.03535269709543569 239;

26 --muted-foreground: 55% 0.04242323651452282 239;

28 /* Accent */

29 --accent: 22% 0.0824896265560166 239;

30 --accent-foreground: 85% 0.05892116182572615 239;

32 /* Destructive */

33 --destructive: 48% 0.22 12;

34 --destructive-foreground: 8% 0.04 12;

36 /* Success */

37 --success: 52% 0.18 145;

38 --success-foreground: 8% 0.04 145;

40 /* Warning */

41 --warning: 58% 0.18 75;

42 --warning-foreground: 8% 0.04 75;

44 /* Border */

45 --border: 23% 0.02828215767634855 239;

46 --input: 23% 0.02828215767634855 239;

47 --ring: 35% 0.2356846473029046 239;

49 /* Chart colors (derived from primary) */

50 --chart-1: 35% 0.2356846473029046 239;

51 --chart-2: 22% 0.09427385892116184 239;

52 --chart-3: 22% 0.0824896265560166 239;

53 --chart-4: 52% 0.18 145;

54 --chart-5: 58% 0.18 75;

56 /* Code syntax highlighting (wrapped in oklch for Prism compatibility) */

57 --code-fg: oklch(85% 0.02828215767634855 59);

58 --code-bg: oklch(16% 0.0047136929460580915 239);

59 --code-comment: oklch(58% 0.018854771784232366 59);

60 --code-keyword: oklch(72% 0.03299585062240665 209);

61 --code-string: oklch(68% 0.03299585062240665 299);

62 --code-function: oklch(75% 0.03535269709543569 269);

63 --code-variable: oklch(70% 0.025925311203319503 239);

64 --code-number: oklch(74% 0.030639004149377598 329);

65 --code-operator: oklch(78% 0.02356846473029046 179);

66 --code-punctuation: oklch(72% 0.02356846473029046 254);

67 --code-selector: oklch(82% 0.02828215767634855 239);

69 /* Radius */

70 --radius: 0rem;

71}