Skip to content

Commit 84688a1

Browse files
BarsnesBarsnes
committed
docs: page about multiple themes and config files
1 parent c2faf2e commit 84688a1

File tree

3 files changed

+218
-2
lines changed

3 files changed

+218
-2
lines changed

‎apps/www/app/content/fundamentals/en/themebuilder/multiple-themes.mdx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: Multiple themes
3+
sidebar_title: Multiple themes
4+
description: Learn how to have multiple themes in the same project.
5+
date: 2025-11-24
6+
category: Theme Builder
7+
color: blue
8+
icon: PaletteIcon
9+
published: true
10+
order: 40
11+
---
12+
13+
It is possible to have multiple themes in the same project if you use [config file](/no/fundamentals/code/cli-config).
14+
Below we will go through two ways to do it.
15+
16+
**This page assumes that you have read "[Build your theme](/no/fundamentals/themebuilder/own-theme)".**
17+
18+
## Same color names
19+
If you have two themes that will be switched between in the same interface, you'll likely use the same color names in both themes.
20+
This means that you can put both in a config file, and get design tokens that can be switched between in Figma, and which generates two CSS files.
21+
22+
```json
23+
{
24+
"themes": {
25+
"some-org": {
26+
"colors": {
27+
"main": {
28+
"dominant": "#0062BA"
29+
},
30+
"support": {
31+
"first": "#F45F63",
32+
"second": "#E5AA20"
33+
},
34+
"neutral": "#303030"
35+
}
36+
},
37+
"other-org": {
38+
"colors": {
39+
"main": {
40+
"dominant": "#ffaaaa"
41+
},
42+
"support": {
43+
"first": "#abcdef",
44+
"second": "#123456"
45+
},
46+
"neutral": "#c05030"
47+
},
48+
}
49+
}
50+
}
51+
```
52+
53+
The config file above is not generated from the themebuilder, and it is a good idea to have a developer involved in the process when creating such config files.
54+
55+
It is possible to validate the config file in the themebuilder. Use the "Continue from configuration file" button on the front page.
56+
This validation will not give you errors if the color names are different, so it is important to double-check this manually.
57+
58+
## Different color names
59+
60+
If you have different color names, this will not work in design tokens and Figma.
61+
In this case, you will need to create two config files, one for each theme.
62+
You can then run the build command twice, once for each config file.
63+
64+
It is common to have to do it this way if you have a repository that collects all design tokens and CSS for multiple applications.
65+
66+
```json
67+
{
68+
"outDir": "./some-org-dt",
69+
"themes": {
70+
"some-org": {
71+
"colors": {
72+
"main": {
73+
"dominant": "#0062BA"
74+
},
75+
"support": {
76+
"first": "#F45F63",
77+
"second": "#E5AA20"
78+
},
79+
"neutral": "#303030"
80+
}
81+
},
82+
}
83+
}
84+
```
85+
86+
```json
87+
{
88+
"outDir": "./other-org-dt",
89+
"themes": {
90+
"other-org": {
91+
"colors": {
92+
"main": {
93+
"accent": "#0062BA"
94+
},
95+
"support": {
96+
"brand1": "#F45F63",
97+
"brand2": "#E5AA20"
98+
},
99+
"neutral": "#303030"
100+
}
101+
},
102+
}
103+
}
104+
```
105+
106+
<Alert data-color="info">
107+
Note that we have different `outDir`s in these two config files, so that the design tokens for each theme are placed in their own folder.
108+
</Alert>

‎apps/www/app/content/fundamentals/en/themebuilder/own-theme.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Build your theme
33
sidebar_title: Build your theme
44
description: Learn how to use Designsystemet with your own brand colours and preferences.
55
date: 2025-11-07
6-
category: Theme builder
6+
category: Theme Builder
77
color: blue
88
icon: PaletteIcon
99
published: true
@@ -151,4 +151,4 @@ When the Design Tokens are updated in code, you can easily fetch the new values
151151
npx @digdir/designsystemet@latest tokens build --config designsystemet.config.json
152152
```
153153

154-
Remember that this must also be done whenever the tokens are updated.
154+
Remember that this must also be done whenever the tokens are updated.

‎apps/www/app/content/fundamentals/no/themebuilder/multiple-themes.mdx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: Fleire tema
3+
sidebar_title: Fleire tema
4+
description: Lær korleis du har fleire tema i same prosjekt.
5+
date: 2025-11-24
6+
category: Temabygger
7+
color: blue
8+
icon: PaletteIcon
9+
published: true
10+
order: 40
11+
---
12+
13+
Det er mogleg å ha fleire tema i same prosjekt dersom du bruker [config fil](/no/fundamentals/code/cli-config).
14+
Under vil vi gå gjennom to måter å gjere det på.
15+
16+
**Denne sida føreset at du har lest "[Bygg ditt tema](/no/fundamentals/themebuilder/own-theme)".**
17+
18+
## Same fargenavn
19+
Dersom du har to tema som skal bytast mellom i eit og same grensesnitt, vil du nok bruke same fargenamn i begge tema.
20+
Dette betyr at du kan legge begge inn i èi config fil, og få ut design tokens som kan bytast mellom i Figma, og som genererer to CSS-filer.
21+
22+
```json
23+
{
24+
"themes": {
25+
"some-org": {
26+
"colors": {
27+
"main": {
28+
"dominant": "#0062BA"
29+
},
30+
"support": {
31+
"first": "#F45F63",
32+
"second": "#E5AA20"
33+
},
34+
"neutral": "#303030"
35+
}
36+
},
37+
"other-org": {
38+
"colors": {
39+
"main": {
40+
"dominant": "#ffaaaa"
41+
},
42+
"support": {
43+
"first": "#abcdef",
44+
"second": "#123456"
45+
},
46+
"neutral": "#c05030"
47+
},
48+
}
49+
}
50+
}
51+
```
52+
53+
Config fila over blir ikkje generert frå temabyggaren, og det er lurt å ha med seg ein utviklar i prosessen når ein lagar slike config filer.
54+
55+
Det er mogleg å validere config fila i temabyggaren. Bruk knappen "Fortsett fra konfigurasjonsfil" på framsida.
56+
Denne valideringen vil ikkje gi deg feil dersom fargenamna er ulike, så det er viktig å dobbeltsjekke dette manuelt.
57+
58+
## Ulike fargenamn
59+
60+
Dersom du har ulike fargenamn vil ikkje dette funke i design tokens og Figma.
61+
I dette tilfellet må du lage to config filer, ein for kvart tema.
62+
Du kan då køyre bygg-kommandoen to gonger, ein gong for kvar config fil.
63+
64+
Det er vanleg å måtte gjere det på denne måten dersom du har eit repository som samlar alle design tokens og CSS for fleire applikasjonar.
65+
66+
```json
67+
{
68+
"outDir": "./some-org-dt",
69+
"themes": {
70+
"some-org": {
71+
"colors": {
72+
"main": {
73+
"dominant": "#0062BA"
74+
},
75+
"support": {
76+
"first": "#F45F63",
77+
"second": "#E5AA20"
78+
},
79+
"neutral": "#303030"
80+
}
81+
},
82+
}
83+
}
84+
```
85+
86+
```json
87+
{
88+
"outDir": "./other-org-dt",
89+
"themes": {
90+
"other-org": {
91+
"colors": {
92+
"main": {
93+
"accent": "#0062BA"
94+
},
95+
"support": {
96+
"brand1": "#F45F63",
97+
"brand2": "#E5AA20"
98+
},
99+
"neutral": "#303030"
100+
}
101+
},
102+
}
103+
}
104+
```
105+
106+
<Alert data-color="info">
107+
Legg merke til at me har ulik `outDir` i desse to config filene, slik at design tokens for kvart tema blir lagt i kvar si mappe.
108+
</Alert>

0 commit comments

Comments
 (0)