0
# Themes and Icons
1
2
Pre-configured CSS themes and icon libraries for consistent application styling and visual elements.
3
4
## Capabilities
5
6
### Theme System
7
8
The themes module provides pre-configured CSS theme URLs for easy integration with Dash applications. All themes are based on Bootstrap 5.3.6 and are served from CDNs for reliable access.
9
10
```python { .api }
11
# Bootstrap base themes
12
themes.BOOTSTRAP: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
13
themes.GRID: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap-grid.min.css"
14
```
15
16
### Bootswatch Themes
17
18
26 pre-styled themes from Bootswatch, all based on Bootstrap 5.3.6:
19
20
```python { .api }
21
# Bootswatch themes (all return CDN URLs)
22
themes.CERULEAN: str # Light blue theme with clean, professional appearance
23
themes.COSMO: str # Clean, modern theme with subtle gradients
24
themes.CYBORG: str # Dark futuristic theme with neon highlights
25
themes.DARKLY: str # Dark theme with high contrast
26
themes.FLATLY: str # Flat design theme with bold colors
27
themes.JOURNAL: str # Newspaper-inspired theme with serif fonts
28
themes.LITERA: str # Literary theme with serif typography
29
themes.LUMEN: str # Light theme with soft shadows
30
themes.LUX: str # Luxurious theme with golden accents
31
themes.MATERIA: str # Material Design inspired theme
32
themes.MINTY: str # Fresh mint green theme
33
themes.MORPH: str # Soft morphism design theme
34
themes.PULSE: str # Vibrant theme with purple accents
35
themes.QUARTZ: str # Stone-inspired neutral theme
36
themes.SANDSTONE: str # Warm sandy theme with earth tones
37
themes.SIMPLEX: str # Minimalist clean theme
38
themes.SKETCHY: str # Hand-drawn sketchy appearance
39
themes.SLATE: str # Professional dark slate theme
40
themes.SOLAR: str # Solarized color scheme theme
41
themes.SPACELAB: str # Space-inspired blue theme
42
themes.SUPERHERO: str # Comic book superhero theme
43
themes.UNITED: str # Professional corporate theme
44
themes.VAPOR: str # Retro synthwave aesthetic
45
themes.YETI: str # Clean Arctic-inspired theme
46
themes.ZEPHYR: str # Breezy light theme with soft colors
47
```
48
49
### Icon Libraries
50
51
Icon library CSS URLs for adding scalable vector icons to applications:
52
53
```python { .api }
54
# Icon libraries
55
icons.BOOTSTRAP: str = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
56
icons.FONT_AWESOME: str = "https://use.fontawesome.com/releases/v6.7.2/css/all.css"
57
```
58
59
## Usage Examples
60
61
### Basic Theme Setup
62
63
```python
64
import dash
65
import dash_bootstrap_components as dbc
66
from dash import html
67
68
# Using Bootstrap default theme
69
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
70
71
# Using a Bootswatch theme
72
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])
73
74
# Combining theme with icons
75
app = dash.Dash(__name__, external_stylesheets=[
76
dbc.themes.BOOTSTRAP,
77
dbc.icons.BOOTSTRAP,
78
])
79
80
app.layout = dbc.Container([
81
html.H1("My Styled App"),
82
dbc.Button("Primary Button", color="primary"),
83
])
84
85
if __name__ == "__main__":
86
app.run_server(debug=True)
87
```
88
89
### Theme Comparison Layout
90
91
```python
92
# Layout showing different theme effects
93
theme_comparison = dbc.Container([
94
html.H1("Theme Comparison", className="text-center mb-4"),
95
96
dbc.Row([
97
dbc.Col([
98
dbc.Card([
99
dbc.CardHeader("Component Examples"),
100
dbc.CardBody([
101
dbc.Alert("This is an alert", color="primary", className="mb-3"),
102
dbc.ButtonGroup([
103
dbc.Button("Primary", color="primary"),
104
dbc.Button("Secondary", color="secondary"),
105
dbc.Button("Success", color="success"),
106
], className="mb-3"),
107
dbc.Progress(value=75, color="info", className="mb-3"),
108
dbc.Badge("Badge", color="warning", pill=True),
109
])
110
])
111
], width=6),
112
dbc.Col([
113
dbc.Card([
114
dbc.CardHeader("Form Elements"),
115
dbc.CardBody([
116
dbc.Input(placeholder="Text input", className="mb-2"),
117
dbc.Select(
118
options=[
119
{"label": "Option 1", "value": "1"},
120
{"label": "Option 2", "value": "2"},
121
],
122
value="1",
123
className="mb-2"
124
),
125
dbc.Checkbox(label="Checkbox", className="mb-2"),
126
dbc.Switch(label="Switch", value=True),
127
])
128
])
129
], width=6),
130
])
131
])
132
```
133
134
### Dynamic Theme Switcher
135
136
```python
137
from dash import callback, Input, Output
138
139
# Theme switcher component
140
theme_switcher = html.Div([
141
dbc.Row([
142
dbc.Col([
143
dbc.Label("Select Theme:"),
144
dbc.Select(
145
id="theme-selector",
146
options=[
147
{"label": "Bootstrap (Default)", "value": "BOOTSTRAP"},
148
{"label": "Cerulean", "value": "CERULEAN"},
149
{"label": "Cosmo", "value": "COSMO"},
150
{"label": "Cyborg", "value": "CYBORG"},
151
{"label": "Darkly", "value": "DARKLY"},
152
{"label": "Flatly", "value": "FLATLY"},
153
{"label": "Journal", "value": "JOURNAL"},
154
{"label": "Litera", "value": "LITERA"},
155
{"label": "Lumen", "value": "LUMEN"},
156
{"label": "Lux", "value": "LUX"},
157
{"label": "Materia", "value": "MATERIA"},
158
{"label": "Minty", "value": "MINTY"},
159
{"label": "Pulse", "value": "PULSE"},
160
{"label": "Sandstone", "value": "SANDSTONE"},
161
{"label": "Simplex", "value": "SIMPLEX"},
162
{"label": "Sketchy", "value": "SKETCHY"},
163
{"label": "Slate", "value": "SLATE"},
164
{"label": "Solar", "value": "SOLAR"},
165
{"label": "Spacelab", "value": "SPACELAB"},
166
{"label": "Superhero", "value": "SUPERHERO"},
167
{"label": "United", "value": "UNITED"},
168
{"label": "Yeti", "value": "YETI"},
169
],
170
value="BOOTSTRAP",
171
),
172
], width=4),
173
dbc.Col([
174
html.Div(id="theme-preview"),
175
], width=8),
176
], className="mb-4"),
177
178
# Sample components to show theme effects
179
html.Div(id="themed-components"),
180
])
181
182
# Note: In a real app, dynamic theme switching requires more complex setup
183
# This is a conceptual example of the theme selection interface
184
```
185
186
### Using Icons
187
188
```python
189
# Bootstrap Icons examples
190
bootstrap_icons = html.Div([
191
html.H3("Bootstrap Icons", className="mb-3"),
192
html.P([
193
html.I(className="bi bi-house-fill me-2"),
194
"Home with house icon"
195
]),
196
html.P([
197
html.I(className="bi bi-envelope me-2"),
198
"Email with envelope icon"
199
]),
200
html.P([
201
html.I(className="bi bi-telephone me-2"),
202
"Phone with telephone icon"
203
]),
204
dbc.Button([
205
html.I(className="bi bi-download me-2"),
206
"Download"
207
], color="primary", className="me-2"),
208
dbc.Button([
209
html.I(className="bi bi-share me-2"),
210
"Share"
211
], color="success"),
212
])
213
214
# Font Awesome Icons examples
215
fontawesome_icons = html.Div([
216
html.H3("Font Awesome Icons", className="mb-3"),
217
html.P([
218
html.I(className="fas fa-user me-2"),
219
"User profile"
220
]),
221
html.P([
222
html.I(className="fas fa-cog me-2"),
223
"Settings"
224
]),
225
html.P([
226
html.I(className="fas fa-chart-bar me-2"),
227
"Analytics"
228
]),
229
dbc.Button([
230
html.I(className="fas fa-save me-2"),
231
"Save"
232
], color="primary", className="me-2"),
233
dbc.Button([
234
html.I(className="fas fa-trash me-2"),
235
"Delete"
236
], color="danger"),
237
])
238
239
# Combined icons layout
240
icons_showcase = dbc.Container([
241
dbc.Row([
242
dbc.Col([bootstrap_icons], width=6),
243
dbc.Col([fontawesome_icons], width=6),
244
])
245
])
246
```
247
248
### Custom Theme Configuration
249
250
```python
251
# App with custom external stylesheets and multiple themes
252
app = dash.Dash(
253
__name__,
254
external_stylesheets=[
255
dbc.themes.BOOTSTRAP, # Base Bootstrap theme
256
dbc.icons.BOOTSTRAP, # Bootstrap icons
257
dbc.icons.FONT_AWESOME, # Font Awesome icons
258
# You can add custom CSS here
259
"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
260
],
261
meta_tags=[
262
{"name": "viewport", "content": "width=device-width, initial-scale=1"}
263
]
264
)
265
266
# Custom CSS can be added to assets/style.css or injected
267
custom_styles = {
268
'fontFamily': 'Inter, sans-serif',
269
}
270
271
app.layout = dbc.Container([
272
html.H1("Custom Themed App", style=custom_styles),
273
dbc.Alert("Custom styling applied!", color="info"),
274
], style=custom_styles)
275
```
276
277
### Dark Theme Implementation
278
279
```python
280
# Dark theme setup with appropriate component styling
281
dark_theme_app = dash.Dash(__name__, external_stylesheets=[
282
dbc.themes.CYBORG, # Dark Bootswatch theme
283
dbc.icons.BOOTSTRAP
284
])
285
286
dark_layout = dbc.Container([
287
dbc.Navbar([
288
dbc.NavbarBrand("Dark Theme App", className="text-light"),
289
dbc.Nav([
290
dbc.NavItem(dbc.NavLink("Home", href="#", className="text-light")),
291
dbc.NavItem(dbc.NavLink("About", href="#", className="text-light")),
292
], navbar=True),
293
], color="dark", dark=True, className="mb-4"),
294
295
dbc.Row([
296
dbc.Col([
297
dbc.Card([
298
dbc.CardHeader("Dark Theme Card"),
299
dbc.CardBody([
300
html.P("This card adapts to the dark theme automatically."),
301
dbc.Button("Dark Button", color="primary"),
302
])
303
])
304
])
305
])
306
], fluid=True)
307
308
dark_theme_app.layout = dark_layout
309
```
310
311
### Theme-Specific Component Styling
312
313
```python
314
# Conditional styling based on theme choice
315
def create_themed_layout(theme_name):
316
"""Create layout optimized for specific theme."""
317
318
# Theme-specific configurations
319
theme_configs = {
320
'DARKLY': {
321
'card_color': 'dark',
322
'text_color': 'light',
323
'button_outline': True,
324
},
325
'BOOTSTRAP': {
326
'card_color': 'light',
327
'text_color': 'dark',
328
'button_outline': False,
329
},
330
'CYBORG': {
331
'card_color': 'dark',
332
'text_color': 'info',
333
'button_outline': True,
334
}
335
}
336
337
config = theme_configs.get(theme_name, theme_configs['BOOTSTRAP'])
338
339
return dbc.Container([
340
dbc.Card([
341
dbc.CardHeader(f"Optimized for {theme_name}"),
342
dbc.CardBody([
343
html.P(
344
"This layout is optimized for the selected theme.",
345
className=f"text-{config['text_color']}"
346
),
347
dbc.Button(
348
"Themed Button",
349
color="primary",
350
outline=config['button_outline']
351
),
352
])
353
], color=config['card_color'])
354
])
355
```
356
357
### Grid-Only Theme
358
359
```python
360
# Using Bootstrap grid without full Bootstrap styles
361
grid_only_app = dash.Dash(__name__, external_stylesheets=[
362
dbc.themes.GRID, # Only grid system, no component styles
363
# Add your own custom component styles
364
])
365
366
grid_layout = dbc.Container([
367
dbc.Row([
368
dbc.Col([
369
html.Div("Column 1", className="p-3 border"),
370
], width=4),
371
dbc.Col([
372
html.Div("Column 2", className="p-3 border"),
373
], width=8),
374
]),
375
dbc.Row([
376
dbc.Col([
377
html.Div("Full width column", className="p-3 border"),
378
], width=12),
379
], className="mt-3"),
380
])
381
382
grid_only_app.layout = grid_layout
383
```
384
385
## Theme Characteristics
386
387
### Light Themes
388
- **BOOTSTRAP**: Default Bootstrap styling
389
- **CERULEAN**: Professional blue theme
390
- **COSMO**: Modern with subtle gradients
391
- **FLATLY**: Bold flat design
392
- **JOURNAL**: Newspaper-inspired serif fonts
393
- **LITERA**: Literary serif typography
394
- **LUMEN**: Soft shadows and light colors
395
- **MINTY**: Fresh mint green
396
- **PULSE**: Vibrant purple accents
397
- **SANDSTONE**: Warm earth tones
398
- **SIMPLEX**: Clean minimalist design
399
- **SPACELAB**: Space-inspired blue
400
- **UNITED**: Professional corporate
401
- **YETI**: Arctic-inspired clean design
402
- **ZEPHYR**: Soft breezy colors
403
404
### Dark Themes
405
- **CYBORG**: Futuristic with neon highlights
406
- **DARKLY**: High contrast dark theme
407
- **SLATE**: Professional dark slate
408
- **SOLAR**: Solarized color scheme
409
- **SUPERHERO**: Comic book inspired
410
411
### Specialty Themes
412
- **LUX**: Luxurious with golden accents
413
- **MATERIA**: Material Design inspired
414
- **MORPH**: Soft morphism design
415
- **QUARTZ**: Stone-inspired neutrals
416
- **SKETCHY**: Hand-drawn appearance
417
- **VAPOR**: Retro synthwave aesthetic
418
419
Each theme provides consistent styling across all dash-bootstrap-components while maintaining unique visual characteristics.