Skip to content

Commit 255cede

Browse files
zoltanszogyenyizoltanszogyenyi
committed
docs(general): theming guide
1 parent 5424c09 commit 255cede

File tree

12 files changed

+170
-11
lines changed

12 files changed

+170
-11
lines changed

‎README.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,25 @@ npm install flowbite
6262
```
6363
/* choose one of the following */
6464
65+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
6566
@import "flowbite/src/themes/default";
6667
67-
/*
68+
/* MINIMAL THEME
69+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
6870
@import "flowbite/src/themes/minimal";
71+
*/
72+
73+
/* ENTERPRISE THEME
74+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
6975
@import "flowbite/src/themes/enterprise";
76+
*/
77+
78+
/* PLAYFUL THEME
79+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
7080
@import "flowbite/src/themes/playful";
81+
*/
82+
83+
/* MONO THEME
7184
@import "flowbite/src/themes/mono";
7285
*/
7386
```

‎content/customize/theming.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,27 @@ As we introduced custom themes with Flowbite v4 you can now import either one in
2222
{{< code lang="css" icon="file" file="input.css" >}}
2323
/* choose one of the following */
2424

25+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
2526
@import "flowbite/src/themes/default";
27+
28+
/* MINIMAL THEME
29+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
2630
@import "flowbite/src/themes/minimal";
31+
*/
32+
33+
/* ENTERPRISE THEME
34+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
2735
@import "flowbite/src/themes/enterprise";
36+
*/
37+
38+
/* PLAYFUL THEME
39+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
2840
@import "flowbite/src/themes/playful";
41+
*/
42+
43+
/* MONO THEME
2944
@import "flowbite/src/themes/mono";
45+
*/
3046
{{< /code >}}
3147

3248
Here's an example of a modified CSS file that sets a custom set of colors and fonts:

‎content/getting-started/angular.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,25 @@ npm install flowbite --save
9797
{{< code lang="css" icon="file" file="input.css" >}}
9898
/* choose one of the following */
9999

100+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
100101
@import "flowbite/src/themes/default";
101102

102-
/*
103+
/* MINIMAL THEME
104+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
103105
@import "flowbite/src/themes/minimal";
106+
*/
107+
108+
/* ENTERPRISE THEME
109+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
104110
@import "flowbite/src/themes/enterprise";
111+
*/
112+
113+
/* PLAYFUL THEME
114+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
105115
@import "flowbite/src/themes/playful";
116+
*/
117+
118+
/* MONO THEME
106119
@import "flowbite/src/themes/mono";
107120
*/
108121
{{< /code >}}

‎content/getting-started/blazor.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,12 +191,25 @@ npm install flowbite --save
191191
{{< code lang="css" icon="file" file="input.css" >}}
192192
/* choose one of the following */
193193

194+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
194195
@import "flowbite/src/themes/default";
195196

196-
/*
197+
/* MINIMAL THEME
198+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
197199
@import "flowbite/src/themes/minimal";
200+
*/
201+
202+
/* ENTERPRISE THEME
203+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
198204
@import "flowbite/src/themes/enterprise";
205+
*/
206+
207+
/* PLAYFUL THEME
208+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
199209
@import "flowbite/src/themes/playful";
210+
*/
211+
212+
/* MONO THEME
200213
@import "flowbite/src/themes/mono";
201214
*/
202215
{{< /code >}}

‎content/getting-started/django.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,12 +212,25 @@ npm install flowbite --save
212212
{{< code lang="css" icon="file" file="input.css" >}}
213213
/* choose one of the following */
214214

215+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
215216
@import "flowbite/src/themes/default";
216217

217-
/*
218+
/* MINIMAL THEME
219+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
218220
@import "flowbite/src/themes/minimal";
221+
*/
222+
223+
/* ENTERPRISE THEME
224+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
219225
@import "flowbite/src/themes/enterprise";
226+
*/
227+
228+
/* PLAYFUL THEME
229+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
220230
@import "flowbite/src/themes/playful";
231+
*/
232+
233+
/* MONO THEME
221234
@import "flowbite/src/themes/mono";
222235
*/
223236
{{< /code >}}

‎content/getting-started/flask.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,12 +156,25 @@ npm install flowbite --save
156156
{{< code lang="css" icon="file" file="input.css" >}}
157157
/* choose one of the following */
158158

159+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
159160
@import "flowbite/src/themes/default";
160161

161-
/*
162+
/* MINIMAL THEME
163+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
162164
@import "flowbite/src/themes/minimal";
165+
*/
166+
167+
/* ENTERPRISE THEME
168+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
163169
@import "flowbite/src/themes/enterprise";
170+
*/
171+
172+
/* PLAYFUL THEME
173+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
164174
@import "flowbite/src/themes/playful";
175+
*/
176+
177+
/* MONO THEME
165178
@import "flowbite/src/themes/mono";
166179
*/
167180
{{< /code >}}

‎content/getting-started/introduction.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,25 @@ npm install flowbite
7676
{{< code lang="css" icon="file" file="input.css" >}}
7777
/* choose one of the following */
7878

79+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
7980
@import "flowbite/src/themes/default";
8081

81-
/*
82+
/* MINIMAL THEME
83+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
8284
@import "flowbite/src/themes/minimal";
85+
*/
86+
87+
/* ENTERPRISE THEME
88+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
8389
@import "flowbite/src/themes/enterprise";
90+
*/
91+
92+
/* PLAYFUL THEME
93+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
8494
@import "flowbite/src/themes/playful";
95+
*/
96+
97+
/* MONO THEME
8598
@import "flowbite/src/themes/mono";
8699
*/
87100
{{< /code >}}

‎content/getting-started/nuxt-js.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,25 @@ npm install flowbite --save
9292
{{< code lang="css" icon="file" file="input.css" >}}
9393
/* choose one of the following */
9494

95+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
9596
@import "flowbite/src/themes/default";
9697

97-
/*
98+
/* MINIMAL THEME
99+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
98100
@import "flowbite/src/themes/minimal";
101+
*/
102+
103+
/* ENTERPRISE THEME
104+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
99105
@import "flowbite/src/themes/enterprise";
106+
*/
107+
108+
/* PLAYFUL THEME
109+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
100110
@import "flowbite/src/themes/playful";
111+
*/
112+
113+
/* MONO THEME
101114
@import "flowbite/src/themes/mono";
102115
*/
103116
{{< /code >}}

‎content/getting-started/phoenix.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,12 +244,25 @@ npm install flowbite
244244
{{< code lang="css" icon="file" file="input.css" >}}
245245
/* choose one of the following */
246246

247+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
247248
@import "flowbite/src/themes/default";
248249

249-
/*
250+
/* MINIMAL THEME
251+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
250252
@import "flowbite/src/themes/minimal";
253+
*/
254+
255+
/* ENTERPRISE THEME
256+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
251257
@import "flowbite/src/themes/enterprise";
258+
*/
259+
260+
/* PLAYFUL THEME
261+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
252262
@import "flowbite/src/themes/playful";
263+
*/
264+
265+
/* MONO THEME
253266
@import "flowbite/src/themes/mono";
254267
*/
255268
{{< /code >}}

‎content/getting-started/quickstart.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,25 @@ npm install flowbite
3232
{{< code lang="css" icon="file" file="input.css" >}}
3333
/* choose one of the following */
3434

35+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
3536
@import "flowbite/src/themes/default";
3637

37-
/*
38+
/* MINIMAL THEME
39+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
3840
@import "flowbite/src/themes/minimal";
41+
*/
42+
43+
/* ENTERPRISE THEME
44+
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
3945
@import "flowbite/src/themes/enterprise";
46+
*/
47+
48+
/* PLAYFUL THEME
49+
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
4050
@import "flowbite/src/themes/playful";
51+
*/
52+
53+
/* MONO THEME
4154
@import "flowbite/src/themes/mono";
4255
*/
4356
{{< /code >}}

0 commit comments

Comments
 (0)