labbdocs 0.2.0__tar.gz → 0.3.1__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- {labbdocs-0.2.0 → labbdocs-0.3.1}/PKG-INFO +1 -1
- {labbdocs-0.2.0/labbdocs/content/ui → labbdocs-0.3.1/labbdocs/content/guide}/1_getting_started/2_installation.md +64 -73
- labbdocs-0.3.1/labbdocs/content/guide/1_getting_started/3_changelog.md +74 -0
- labbdocs-0.3.1/labbdocs/content/guide/1_getting_started/4_roadmap.md +97 -0
- labbdocs-0.3.1/labbdocs/content/guide/1_getting_started/5_credits.md +38 -0
- labbdocs-0.3.1/labbdocs/content/guide/2_concepts/1_theming.md +183 -0
- {labbdocs-0.2.0/labbdocs/content/ui/2_references → labbdocs-0.3.1/labbdocs/content/guide/3_references}/0_labb_cli.md +1 -1
- {labbdocs-0.2.0/labbdocs/content/ui/2_references → labbdocs-0.3.1/labbdocs/content/guide/3_references}/1_config_yaml.md +2 -2
- {labbdocs-0.2.0/labbdocs/content/ui/2_references → labbdocs-0.3.1/labbdocs/content/guide/3_references}/3_lb_tags.md +1 -1
- {labbdocs-0.2.0/labbdocs/content/ui/2_references → labbdocs-0.3.1/labbdocs/content/guide/3_references}/4_c-lb.m.md +1 -1
- labbdocs-0.3.1/labbdocs/content/guide/index.md +43 -0
- labbdocs-0.3.1/labbdocs/content/icons/1_getting_started/1_introduction.md +89 -0
- labbdocs-0.3.1/labbdocs/content/icons/index.md +25 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/1_actions}/button.md +0 -3
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/1_actions}/theme-controller.md +2 -2
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/chat.md +33 -0
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/collapse.md +24 -0
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/hover-gallery.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/hover3d.md +21 -0
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/kbd.md +38 -0
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/list.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/stat.md +44 -0
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/text-rotate.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/2_data_display/timeline.md +50 -0
- labbdocs-0.3.1/labbdocs/content/ui/3_navigation/dock.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/3_navigation/pagination.md +26 -0
- labbdocs-0.3.1/labbdocs/content/ui/3_navigation/steps.md +26 -0
- labbdocs-0.3.1/labbdocs/content/ui/4_feedback/loading.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/4_feedback/progress.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/4_feedback/radial-progress.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/4_feedback/skeleton.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/4_feedback/status.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/4_feedback/toast.md +17 -0
- labbdocs-0.3.1/labbdocs/content/ui/4_feedback/tooltip.md +26 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/fieldset.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/file-input.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/filter.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/input.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/label.md +17 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/radio.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/range.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/rating.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/select.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/textarea.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/5_data_input/validator.md +26 -0
- labbdocs-0.3.1/labbdocs/content/ui/6_layout/divider.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/6_layout/hero.md +26 -0
- labbdocs-0.3.1/labbdocs/content/ui/6_layout/indicator.md +32 -0
- labbdocs-0.3.1/labbdocs/content/ui/6_layout/join.md +20 -0
- labbdocs-0.3.1/labbdocs/content/ui/6_layout/mask.md +17 -0
- labbdocs-0.3.1/labbdocs/content/ui/6_layout/stack.md +17 -0
- labbdocs-0.3.1/labbdocs/content/ui/7_mockup/mockup-browser.md +14 -0
- labbdocs-0.3.1/labbdocs/content/ui/7_mockup/mockup-code.md +17 -0
- labbdocs-0.3.1/labbdocs/content/ui/7_mockup/mockup-phone.md +23 -0
- labbdocs-0.3.1/labbdocs/content/ui/7_mockup/mockup-window.md +14 -0
- labbdocs-0.3.1/labbdocs/content/ui/index.md +16 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/icon_category_section.html +0 -1
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/api_table.html +19 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/component_example/section/preview.html +1 -1
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/icon/browser.html +13 -13
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/icon/category_section.html +0 -1
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/labbstart_info/index.html +1 -1
- labbdocs-0.3.1/labbdocs/templates/cotton/lbdocs/nav/footer.html +23 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/nav/topnav.html +72 -16
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templatetags/docs_tags.py +11 -30
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/urls.py +6 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/views.py +5 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/pyproject.toml +1 -1
- labbdocs-0.2.0/labbdocs/content/icons/1_getting_started/1_introduction.md +0 -26
- labbdocs-0.2.0/labbdocs/content/icons/1_getting_started/2_installation.md +0 -73
- labbdocs-0.2.0/labbdocs/content/icons/1_getting_started/3_quick_start.md +0 -125
- labbdocs-0.2.0/labbdocs/content/icons/index.md +0 -50
- labbdocs-0.2.0/labbdocs/content/ui/1_getting_started/0_labbstart.md +0 -77
- labbdocs-0.2.0/labbdocs/content/ui/1_getting_started/3_quick_start.md +0 -242
- labbdocs-0.2.0/labbdocs/content/ui/1_getting_started/4_theming.md +0 -400
- labbdocs-0.2.0/labbdocs/content/ui/index.md +0 -69
- labbdocs-0.2.0/labbdocs/templates/cotton/lbdocs/nav/footer.html +0 -89
- {labbdocs-0.2.0 → labbdocs-0.3.1}/LICENSE +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/README.md +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/__init__.py +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/apps.py +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/content/blog/index.md +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/content/blog/posts/1_introducing-labb-and-the-roadmap.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui → labbdocs-0.3.1/labbdocs/content/guide}/1_getting_started/1_introduction.md +0 -0
- /labbdocs-0.2.0/labbdocs/content/ui/1_getting_started/5_building_css.md → /labbdocs-0.3.1/labbdocs/content/guide/2_concepts/2_building_css.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/2_references → labbdocs-0.3.1/labbdocs/content/guide/3_references}/2_django_settings.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/2_references → labbdocs-0.3.1/labbdocs/content/guide/3_references}/5_llms.txt.md +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/content/icons/2_packs/1_remix.md +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/content/icons/2_packs/more.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/1_actions}/dropdown.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/1_actions}/fab.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/1_actions}/modal.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/1_actions}/swap.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/2_data_display}/accordion.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/2_data_display}/avatar.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/2_data_display}/badge.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/2_data_display}/card.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/2_data_display}/carousel.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/2_data_display}/diff.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/2_data_display}/table.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/2_data_display}/text.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/3_navigation}/breadcrumbs.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/3_navigation}/link.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/3_navigation}/menu.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/3_navigation}/navbar.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/3_navigation}/tabs.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/4_feedback}/alert.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/5_data_input}/checkbox.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/5_data_input}/toggle.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/6_layout}/drawer.md +0 -0
- {labbdocs-0.2.0/labbdocs/content/ui/3_components/1_basics → labbdocs-0.3.1/labbdocs/content/ui/6_layout}/footer.md +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/doc_parser.py +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/management/__init__.py +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/management/commands/__init__.py +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/management/commands/build_docs.py +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/seo_utils.py +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/css/highlight-custom.css +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/css/highlight.min.css +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/favicon/android-chrome-192x192.png +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/favicon/android-chrome-512x512.png +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/favicon/apple-touch-icon.png +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/favicon/favicon-16x16.png +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/favicon/favicon-32x32.png +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/favicon/favicon.ico +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/favicon/favicon.svg +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/favicon/site.webmanifest +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/labb/labb_welcome_kit.jpg +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/stock/avatar.png +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/stock/mecca.jpg +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/img/stock/shoe.jpg +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/js/common.js +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/static/lbdocs/js/highlight.min.js +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/codeblock/index.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/codeblock/title.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/component_example/index.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/component_example/section/code.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/component_example/style/code_only.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/component_example/style/inline.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/component_example/style/stacked.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/component_example/style/tab.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/doc_card/grid.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/doc_card/index.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/icon/daisy_ui.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/indented_block.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/layout/base.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/layout/docs/base.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/layout/docs/blog.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/layout/docs/blog_header.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/layout/docs/component.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/layout/docs/header.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/misc/copy_button.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/nav/page_navigator.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/seo/head.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/cotton/lbdocs/ui/logo.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templates/lbdocs/pages/docs.html +0 -0
- {labbdocs-0.2.0 → labbdocs-0.3.1}/labbdocs/templatetags/__init__.py +0 -0
|
@@ -3,34 +3,59 @@ title: Installation
|
|
|
3
3
|
description: How to install and set up labb in your Django project
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
{% load docs_tags %}
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## New Project (Recommended)
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
The fastest way to get started is with **labbstart**, which scaffolds a new Django project with labb pre-configured.
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
```bash
|
|
13
|
+
pip install labbstart
|
|
14
|
+
labbstart new
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
This interactively prompts you for project name, Django version, package manager, and starter kit. You can also pass flags directly:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
labbstart new myproject --django-version 5 --package-manager poetry --kit welcome --app-name starter
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Once created, start two terminals:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# Terminal 1 — CSS watcher
|
|
27
|
+
cd your-project-name && labb dev
|
|
28
|
+
|
|
29
|
+
# Terminal 2 — Django server
|
|
30
|
+
cd your-project-name && python manage.py runserver
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Open [http://localhost:8000](http://localhost:8000) and you're ready to build.
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Existing Project
|
|
14
38
|
|
|
15
|
-
|
|
39
|
+
### Prerequisites
|
|
16
40
|
|
|
17
|
-
|
|
41
|
+
- Python 3.8+
|
|
42
|
+
- Django 4.2+
|
|
43
|
+
|
|
44
|
+
### Step 1: Install labb
|
|
18
45
|
|
|
19
46
|
```bash
|
|
20
47
|
pip install labbui
|
|
21
48
|
```
|
|
22
49
|
|
|
23
|
-
|
|
50
|
+
Or with Poetry:
|
|
24
51
|
|
|
25
52
|
```bash
|
|
26
53
|
poetry add labbui
|
|
27
54
|
```
|
|
28
55
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
Add `labb` to your `INSTALLED_APPS` in your Django settings:
|
|
56
|
+
### Step 2: Add to Django Settings
|
|
32
57
|
|
|
33
|
-
|
|
58
|
+
Add `labb` to your `INSTALLED_APPS`:
|
|
34
59
|
|
|
35
60
|
<c-lbdocs.codeblock.title title="settings.py">
|
|
36
61
|
```python
|
|
@@ -42,11 +67,10 @@ INSTALLED_APPS = [
|
|
|
42
67
|
```
|
|
43
68
|
</c-lbdocs.codeblock.title>
|
|
44
69
|
|
|
45
|
-
This
|
|
70
|
+
This automatically configures the required template loader and templatetags.
|
|
46
71
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
If your project requires any non-default loaders or you do not wish Cotton to manage your settings, you should instead provide `django_cotton.apps.SimpleAppConfig` in your INSTALLED_APPS:
|
|
72
|
+
<c-lb.collapse title="Custom configuration" class="my-4" style="arrow">
|
|
73
|
+
If your project uses non-default loaders or you don't want Cotton to manage your settings, use `django_cotton.apps.SimpleAppConfig` instead:
|
|
50
74
|
|
|
51
75
|
<c-lbdocs.codeblock.title title="settings.py">
|
|
52
76
|
```python
|
|
@@ -86,54 +110,20 @@ TEMPLATES = [
|
|
|
86
110
|
]
|
|
87
111
|
```
|
|
88
112
|
</c-lbdocs.codeblock.title>
|
|
113
|
+
</c-lb.collapse>
|
|
89
114
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
After adding labb to your Django settings, you need to initialize and set up labb in your project:
|
|
93
|
-
|
|
94
|
-
### Step 1: Initialize Project
|
|
95
|
-
|
|
96
|
-
Initialize labb project with configuration and project structure:
|
|
97
|
-
|
|
98
|
-
```bash
|
|
99
|
-
labb init
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
For quick setup with defaults:
|
|
115
|
+
### Step 3: Initialize and Set Up
|
|
103
116
|
|
|
104
117
|
```bash
|
|
105
118
|
labb init --defaults
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
**Init Options:**
|
|
109
|
-
|
|
110
|
-
```bash
|
|
111
|
-
# Force overwrite existing files created by labb init
|
|
112
|
-
labb init --force
|
|
113
|
-
```
|
|
114
|
-
### Step 2: Install Dependencies
|
|
115
|
-
|
|
116
|
-
Install the required Node.js dependencies:
|
|
117
|
-
|
|
118
|
-
```bash
|
|
119
119
|
labb setup
|
|
120
120
|
```
|
|
121
121
|
|
|
122
|
-
|
|
122
|
+
`labb init` creates the project configuration and structure. `labb setup` installs the required Node.js dependencies.
|
|
123
123
|
|
|
124
|
-
|
|
125
|
-
# Install dependencies automatically
|
|
126
|
-
labb setup --install-deps
|
|
127
|
-
|
|
128
|
-
# Skip dependency installation
|
|
129
|
-
labb setup --no-install-deps
|
|
130
|
-
```
|
|
124
|
+
### Step 4: Add Dependencies to Your Template
|
|
131
125
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<c-lb.alert variant="info" style="soft" icon="rmx.information" iconFill class="mb-4">
|
|
135
|
-
<span>Add `<c-lb.m.dependencies />` to your main HTML template's `<head>` section. This includes the required CSS and JavaScript for labb components to work properly.</span>
|
|
136
|
-
</c-lb.alert>
|
|
126
|
+
Add `<c-lb.m.dependencies />` to your base template's `<head>` section:
|
|
137
127
|
|
|
138
128
|
<c-lbdocs.codeblock.title title="templates/base.html">
|
|
139
129
|
{% verbatim %}
|
|
@@ -146,8 +136,6 @@ labb setup --no-install-deps
|
|
|
146
136
|
<meta charset="UTF-8">
|
|
147
137
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
148
138
|
<title>My labb App</title>
|
|
149
|
-
|
|
150
|
-
<!-- Required: Add labb dependencies -->
|
|
151
139
|
<c-lb.m.dependencies setThemeEndpoint="{% url 'set_theme' %}" />
|
|
152
140
|
</head>
|
|
153
141
|
<body>
|
|
@@ -162,43 +150,46 @@ labb setup --no-install-deps
|
|
|
162
150
|
<span>Without `<c-lb.m.dependencies />`, components will not have the correct styling and interactive features may not work.</span>
|
|
163
151
|
</c-lb.alert>
|
|
164
152
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
Once installed and setup, you can start using components in your templates.
|
|
153
|
+
### Step 5: Start Developing
|
|
168
154
|
|
|
169
|
-
|
|
155
|
+
Start two terminals:
|
|
170
156
|
|
|
171
157
|
```bash
|
|
158
|
+
# Terminal 1 — CSS watcher
|
|
172
159
|
labb dev
|
|
173
|
-
```
|
|
174
160
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
Next, in a **separate terminal**, start your Django development server:
|
|
178
|
-
|
|
179
|
-
```bash
|
|
161
|
+
# Terminal 2 — Django server
|
|
180
162
|
python manage.py runserver
|
|
181
163
|
```
|
|
182
164
|
|
|
183
|
-
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
## Basic Usage
|
|
168
|
+
|
|
169
|
+
Use labb components in your templates with HTML-like syntax:
|
|
184
170
|
|
|
185
171
|
<c-lbdocs.codeblock.title title="templates/example.html">
|
|
186
172
|
{% verbatim %}
|
|
187
173
|
```html
|
|
188
|
-
<!-- Basic button -->
|
|
189
174
|
<c-lb.button variant="primary">Click me</c-lb.button>
|
|
190
175
|
|
|
191
|
-
<!-- Card component -->
|
|
192
176
|
<c-lb.card>
|
|
193
177
|
<c-lb.card.body>
|
|
194
|
-
|
|
195
|
-
|
|
178
|
+
<c-lb.card.title>Card Title</c-lb.card.title>
|
|
179
|
+
<p>Card content goes here</p>
|
|
196
180
|
</c-lb.card.body>
|
|
197
181
|
</c-lb.card>
|
|
182
|
+
|
|
183
|
+
<c-lb.alert variant="success">Success message!</c-lb.alert>
|
|
198
184
|
```
|
|
199
185
|
{% endverbatim %}
|
|
200
186
|
</c-lbdocs.codeblock.title>
|
|
201
187
|
|
|
188
|
+
Browse <a href="{% doc_url '1_actions/button.md' 'ui' %}">component documentation</a> for all available components.
|
|
189
|
+
|
|
202
190
|
## Next Steps
|
|
203
191
|
|
|
204
|
-
|
|
192
|
+
- <a href="{% doc_url '2_concepts/1_theming.md' 'guide' %}">Theming</a> — Customize colors and themes
|
|
193
|
+
- <a href="{% doc_url '2_concepts/2_building_css.md' 'guide' %}">Building CSS</a> — CSS build process and production builds
|
|
194
|
+
- <a href="{% doc_url '3_references/0_labb_cli.md' 'guide' %}">CLI Reference</a> — Component inspection, icon search, and more
|
|
195
|
+
- <a href="{% doc_url '1_getting_started/1_introduction.md' 'icons' %}">Icons</a> — Install labbicons for 2,800+ Remix icons
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Changelog
|
|
3
|
+
description: Release history and version notes for labb
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{% load docs_tags %}
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## 0.3.0 <c-lb.badge size="sm">latest</c-lb.badge>
|
|
10
|
+
|
|
11
|
+
**Mar 08, 2026**
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- Full daisyUI components support 🎉
|
|
16
|
+
- Restructure of docs for better readability
|
|
17
|
+
- Introduction of props modifiers for icon props in supported components. See components like button, badge, etc.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## 0.2.0
|
|
22
|
+
|
|
23
|
+
**Feb 09, 2026**
|
|
24
|
+
|
|
25
|
+
### Features
|
|
26
|
+
- **labbstart** — Starter kit scaffolding tool ([#20](https://github.com/labbhq/labb/issues/20))
|
|
27
|
+
- **Breadcrumbs** — New breadcrumbs component ([#25](https://github.com/labbhq/labb/issues/25))
|
|
28
|
+
- **Carousel** — New carousel component ([#27](https://github.com/labbhq/labb/issues/27))
|
|
29
|
+
|
|
30
|
+
### Maintenance
|
|
31
|
+
- Enhanced README ([#22](https://github.com/labbhq/labb/issues/22))
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## 0.1.1
|
|
36
|
+
|
|
37
|
+
**Jan 03, 2026**
|
|
38
|
+
|
|
39
|
+
### Maintenance
|
|
40
|
+
- Documentation site cleanup ([#14](https://github.com/labbhq/labb/issues/14))
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 0.1.0
|
|
45
|
+
|
|
46
|
+
**Dec 30, 2025**
|
|
47
|
+
|
|
48
|
+
Initial stable release.
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## 0.0.2
|
|
53
|
+
|
|
54
|
+
**Dec 30, 2025**
|
|
55
|
+
|
|
56
|
+
### Maintenance
|
|
57
|
+
- Blog post support for docs ([#2](https://github.com/labbhq/labb/issues/2))
|
|
58
|
+
- Community menu ([#4](https://github.com/labbhq/labb/issues/4))
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## 0.0.1a2
|
|
63
|
+
|
|
64
|
+
**Oct 29, 2025**
|
|
65
|
+
|
|
66
|
+
Alpha pre-release with early feature and bug fix work.
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 0.0.1a
|
|
71
|
+
|
|
72
|
+
**Oct 26, 2025**
|
|
73
|
+
|
|
74
|
+
First alpha pre-release.
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Roadmap
|
|
3
|
+
description: Planned features and future direction for labb
|
|
4
|
+
doc_show_toc: false
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Roadmap to v1.0.0
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
This roadmap outlines the planned direction for labb. Priorities may shift based on community feedback. Have a feature request? Open a discussion on [GitHub](https://github.com/labbhq/labb/discussions).
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
<div class="not-prose">
|
|
14
|
+
<c-lb.timeline direction="vertical" snap compact>
|
|
15
|
+
<c-lb.timeline.item first variant="success" icon="rmx.checkbox-circle">
|
|
16
|
+
<c-slot name="endSlot">
|
|
17
|
+
<c-lb.timeline.end box class="my-6">
|
|
18
|
+
<span class="font-bold">v0.3.0</span>
|
|
19
|
+
<p class="text-sm">Full daisyUI components support</p>
|
|
20
|
+
</c-lb.timeline.end>
|
|
21
|
+
</c-slot>
|
|
22
|
+
</c-lb.timeline.item>
|
|
23
|
+
<c-lb.timeline.item variant="warning" icon="rmx.loader-4">
|
|
24
|
+
<c-slot name="endSlot">
|
|
25
|
+
<c-lb.timeline.end box class="my-6">
|
|
26
|
+
<span class="font-bold">v0.4.0</span>
|
|
27
|
+
<p class="text-sm">AlpineJS integration</p>
|
|
28
|
+
</c-lb.timeline.end>
|
|
29
|
+
</c-slot>
|
|
30
|
+
</c-lb.timeline.item>
|
|
31
|
+
<c-lb.timeline.item icon="rmx.time">
|
|
32
|
+
<c-slot name="endSlot">
|
|
33
|
+
<c-lb.timeline.end box class="my-6">
|
|
34
|
+
<span class="font-bold">IDE extensions</span>
|
|
35
|
+
<p class="text-sm">Autocomplete and inline documentation</p>
|
|
36
|
+
</c-lb.timeline.end>
|
|
37
|
+
</c-slot>
|
|
38
|
+
</c-lb.timeline.item>
|
|
39
|
+
<c-lb.timeline.item icon="rmx.time">
|
|
40
|
+
<c-slot name="endSlot">
|
|
41
|
+
<c-lb.timeline.end box class="my-6">
|
|
42
|
+
<span class="font-bold">Charts</span>
|
|
43
|
+
<p class="text-sm">Interactive charts and data visualization</p>
|
|
44
|
+
</c-lb.timeline.end>
|
|
45
|
+
</c-slot>
|
|
46
|
+
</c-lb.timeline.item>
|
|
47
|
+
<c-lb.timeline.item icon="rmx.time">
|
|
48
|
+
<c-slot name="endSlot">
|
|
49
|
+
<c-lb.timeline.end box class="my-6">
|
|
50
|
+
<span class="font-bold">labbwire</span>
|
|
51
|
+
<p class="text-sm">HTML over the wire, the Django (cotton) way</p>
|
|
52
|
+
</c-lb.timeline.end>
|
|
53
|
+
</c-slot>
|
|
54
|
+
</c-lb.timeline.item>
|
|
55
|
+
<c-lb.timeline.item icon="rmx.time">
|
|
56
|
+
<c-slot name="endSlot">
|
|
57
|
+
<c-lb.timeline.end box class="my-6">
|
|
58
|
+
<span class="font-bold">Playground</span>
|
|
59
|
+
<p class="text-sm">Testing and experimenting with components</p>
|
|
60
|
+
</c-lb.timeline.end>
|
|
61
|
+
</c-slot>
|
|
62
|
+
</c-lb.timeline.item>
|
|
63
|
+
<c-lb.timeline.item icon="rmx.time">
|
|
64
|
+
<c-slot name="endSlot">
|
|
65
|
+
<c-lb.timeline.end box class="my-6">
|
|
66
|
+
<span class="font-bold">Blocks and templates</span>
|
|
67
|
+
<p class="text-sm">Pre-built page sections and full page layouts</p>
|
|
68
|
+
</c-lb.timeline.end>
|
|
69
|
+
</c-slot>
|
|
70
|
+
</c-lb.timeline.item>
|
|
71
|
+
<c-lb.timeline.item icon="rmx.time">
|
|
72
|
+
<c-slot name="endSlot">
|
|
73
|
+
<c-lb.timeline.end box class="my-6">
|
|
74
|
+
<span class="font-bold">More icon packs</span>
|
|
75
|
+
<p class="text-sm">Additional icon libraries beyond Remix Icons</p>
|
|
76
|
+
</c-lb.timeline.end>
|
|
77
|
+
</c-slot>
|
|
78
|
+
</c-lb.timeline.item>
|
|
79
|
+
<c-lb.timeline.item icon="rmx.time">
|
|
80
|
+
<c-slot name="endSlot">
|
|
81
|
+
<c-lb.timeline.end box class="my-6">
|
|
82
|
+
<span class="font-bold">Advanced components</span>
|
|
83
|
+
<p class="text-sm">Date pickers, calendars, rich text editors, file upload, forms</p>
|
|
84
|
+
</c-lb.timeline.end>
|
|
85
|
+
</c-slot>
|
|
86
|
+
</c-lb.timeline.item>
|
|
87
|
+
|
|
88
|
+
<c-lb.timeline.item last icon="rmx.time">
|
|
89
|
+
<c-slot name="endSlot">
|
|
90
|
+
<c-lb.timeline.end box class="my-6">
|
|
91
|
+
<span class="font-bold">Starter kits</span>
|
|
92
|
+
<p class="text-sm">Pre-built project templates for common use cases</p>
|
|
93
|
+
</c-lb.timeline.end>
|
|
94
|
+
</c-slot>
|
|
95
|
+
</c-lb.timeline.item>
|
|
96
|
+
</c-lb.timeline>
|
|
97
|
+
</div>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Credits
|
|
3
|
+
description: The projects and people that make labb possible
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{% load docs_tags %}
|
|
7
|
+
|
|
8
|
+
labb is built on the shoulders of excellent open source projects.
|
|
9
|
+
|
|
10
|
+
## Core Dependencies
|
|
11
|
+
|
|
12
|
+
- **[Django](https://www.djangoproject.com/)** — The web framework that powers everything
|
|
13
|
+
- **[Django Cotton](https://django-cotton.com/)** — Component syntax and template loader that makes `<c-lb.*>` possible
|
|
14
|
+
- **[daisyUI](https://daisyui.com/)** — Component classes and theming for Tailwind CSS
|
|
15
|
+
- **[Tailwind CSS](https://tailwindcss.com/)** — Utility-first CSS framework
|
|
16
|
+
|
|
17
|
+
## CLI and Tooling
|
|
18
|
+
|
|
19
|
+
- **[Typer](https://typer.tiangolo.com/)** — CLI framework powering the `labb` command
|
|
20
|
+
- **[Rich](https://rich.readthedocs.io/)** — Terminal formatting and output
|
|
21
|
+
|
|
22
|
+
## Icons
|
|
23
|
+
|
|
24
|
+
- **[Remix Icon](https://remixicon.com/)** — 2,800+ open source icons included via `labbicons`
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Similar Projects
|
|
30
|
+
|
|
31
|
+
- **[shadcn-django](https://shadcn-django.com/)** — shadcn/ui components for Django
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## License
|
|
37
|
+
|
|
38
|
+
labb is released under the [MIT License](https://github.com/labbhq/labb/blob/main/LICENSE).
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Theming"
|
|
3
|
+
description: "Customize themes, create custom color schemes, and integrate daisyUI theming with labb components."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{% load docs_tags %}
|
|
7
|
+
|
|
8
|
+
labb's theming is built on <a href="https://daisyui.com/docs/themes/" target="_blank">daisyUI 5</a>. Themes are defined as CSS variables in `input.css`, applied via template tags, and optionally persisted server-side.
|
|
9
|
+
|
|
10
|
+
## Setup
|
|
11
|
+
|
|
12
|
+
Add the `{% verbatim %}{% labb_theme %}{% endverbatim %}` tag to your `<html>` element and register the theme persistence URL:
|
|
13
|
+
|
|
14
|
+
<c-lbdocs.codeblock.title title="templates/base.html">
|
|
15
|
+
{% verbatim %}
|
|
16
|
+
```html
|
|
17
|
+
{% load lb_tags %}
|
|
18
|
+
|
|
19
|
+
<!DOCTYPE html>
|
|
20
|
+
<html lang="en" {% labb_theme %}>
|
|
21
|
+
<head>
|
|
22
|
+
<meta charset="UTF-8">
|
|
23
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
24
|
+
<title>My labb App</title>
|
|
25
|
+
<c-lb.m.dependencies setThemeEndpoint="{% url 'set_theme' %}" />
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
{% csrf_token %}
|
|
29
|
+
<!-- Your content -->
|
|
30
|
+
</body>
|
|
31
|
+
</html>
|
|
32
|
+
```
|
|
33
|
+
{% endverbatim %}
|
|
34
|
+
</c-lbdocs.codeblock.title>
|
|
35
|
+
|
|
36
|
+
<c-lbdocs.codeblock.title title="urls.py">
|
|
37
|
+
```python
|
|
38
|
+
from django.urls import path
|
|
39
|
+
from labb.shortcuts import set_theme_view
|
|
40
|
+
|
|
41
|
+
urlpatterns = [
|
|
42
|
+
# ... your other URLs
|
|
43
|
+
path('set-theme/', set_theme_view, name='set_theme'),
|
|
44
|
+
]
|
|
45
|
+
```
|
|
46
|
+
</c-lbdocs.codeblock.title>
|
|
47
|
+
|
|
48
|
+
`{% verbatim %}{% labb_theme %}{% endverbatim %}` outputs `data-theme="theme-name"` on the `<html>` element, reading from the user's session or falling back to `LABB_SETTINGS['DEFAULT_THEME']`. The `{% verbatim %}{% csrf_token %}{% endverbatim %}` is required for the theme persistence POST request.
|
|
49
|
+
|
|
50
|
+
<c-lb.alert variant="info" style="outline" class="mt-4">
|
|
51
|
+
<span>Use `{% verbatim %}{% labb_theme_val %}{% endverbatim %}` instead if you need the raw theme value for conditional logic (e.g., `{% verbatim %}{% labb_theme_val as current_theme %}{% endverbatim %}`).</span>
|
|
52
|
+
</c-lb.alert>
|
|
53
|
+
|
|
54
|
+
## Built-in Themes
|
|
55
|
+
|
|
56
|
+
`labb init` generates an `input.css` with four themes:
|
|
57
|
+
|
|
58
|
+
- `labb-light` (default) — custom labb light theme
|
|
59
|
+
- `labb-dark` — custom labb dark theme
|
|
60
|
+
- `light` — daisyUI default light
|
|
61
|
+
- `dark` — daisyUI default dark
|
|
62
|
+
|
|
63
|
+
<c-lbdocs.codeblock.title title="static_src/input.css">
|
|
64
|
+
```css
|
|
65
|
+
@import "tailwindcss";
|
|
66
|
+
@plugin "daisyui" {
|
|
67
|
+
themes: light, dark;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@plugin "daisyui/theme" {
|
|
71
|
+
name: "labb-light";
|
|
72
|
+
default: true;
|
|
73
|
+
prefersdark: false;
|
|
74
|
+
color-scheme: light;
|
|
75
|
+
|
|
76
|
+
--color-base-100: oklch(100% 0 0);
|
|
77
|
+
--color-primary: oklch(9% 0.005 247);
|
|
78
|
+
/* ... */
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@plugin "daisyui/theme" {
|
|
82
|
+
name: "labb-dark";
|
|
83
|
+
default: false;
|
|
84
|
+
prefersdark: true;
|
|
85
|
+
color-scheme: dark;
|
|
86
|
+
/* ... */
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
</c-lbdocs.codeblock.title>
|
|
90
|
+
|
|
91
|
+
## Custom Themes
|
|
92
|
+
|
|
93
|
+
Add `@plugin "daisyui/theme"` blocks to `input.css`. Use the <a href="https://daisyui.com/theme-generator/" target="_blank">daisyUI Theme Generator</a> for interactive creation.
|
|
94
|
+
|
|
95
|
+
<c-lbdocs.codeblock.title title="static_src/input.css">
|
|
96
|
+
```css
|
|
97
|
+
@plugin "daisyui/theme" {
|
|
98
|
+
name: "my-brand";
|
|
99
|
+
default: false;
|
|
100
|
+
color-scheme: light;
|
|
101
|
+
|
|
102
|
+
--color-primary: oklch(55% 0.3 240);
|
|
103
|
+
--color-secondary: oklch(70% 0.25 200);
|
|
104
|
+
--color-accent: oklch(65% 0.25 160);
|
|
105
|
+
--color-base-100: oklch(98% 0.02 240);
|
|
106
|
+
--color-base-content: oklch(20% 0.05 240);
|
|
107
|
+
--radius-selector: 1rem;
|
|
108
|
+
--radius-field: 0.25rem;
|
|
109
|
+
--radius-box: 0.5rem;
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
</c-lbdocs.codeblock.title>
|
|
113
|
+
|
|
114
|
+
See the <a href="https://daisyui.com/docs/themes/" target="_blank">daisyUI themes documentation</a> for all available variables.
|
|
115
|
+
|
|
116
|
+
## Theme Controllers
|
|
117
|
+
|
|
118
|
+
Any radio or checkbox component becomes a theme switcher by adding the `theme-controller` class. When server-side persistence is enabled, the choice is automatically sent to the server.
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<!-- Toggle between light and dark -->
|
|
122
|
+
<c-lb.toggle class="theme-controller" value="labb-dark" size="sm" title="Toggle theme" />
|
|
123
|
+
|
|
124
|
+
<!-- Or use a checkbox -->
|
|
125
|
+
<c-lb.checkbox class="theme-controller" value="labb-dark" title="Dark mode" />
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
See the <a href="{% doc_url '1_actions/theme-controller.md' 'ui' %}">Theme Controller component documentation</a> for more examples.
|
|
129
|
+
|
|
130
|
+
## Django Settings
|
|
131
|
+
|
|
132
|
+
<c-lbdocs.codeblock.title title="settings.py">
|
|
133
|
+
```python
|
|
134
|
+
LABB_SETTINGS = {
|
|
135
|
+
'DEFAULT_THEME': 'labb-light', # Fallback when no theme is set
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
</c-lbdocs.codeblock.title>
|
|
139
|
+
|
|
140
|
+
See <a href="{% doc_url '3_references/2_django_settings.md' 'guide' %}">settings reference</a> for all options.
|
|
141
|
+
|
|
142
|
+
## Advanced Usage
|
|
143
|
+
|
|
144
|
+
<c-lb.collapse title="Custom theme view" class="my-4" style="arrow">
|
|
145
|
+
If you need custom logic instead of the pre-built `set_theme_view`, use the utility functions directly:
|
|
146
|
+
|
|
147
|
+
<c-lbdocs.codeblock.title title="views.py">
|
|
148
|
+
```python
|
|
149
|
+
from django.http import JsonResponse
|
|
150
|
+
from django.views.decorators.http import require_http_methods
|
|
151
|
+
from labb.shortcuts import set_labb_theme, get_labb_theme
|
|
152
|
+
|
|
153
|
+
@require_http_methods(["POST"])
|
|
154
|
+
def set_theme(request):
|
|
155
|
+
theme = request.POST.get("theme")
|
|
156
|
+
if not theme:
|
|
157
|
+
return JsonResponse({"success": False, "error": "Theme parameter is required"}, status=400)
|
|
158
|
+
|
|
159
|
+
success = set_labb_theme(request, theme)
|
|
160
|
+
if success:
|
|
161
|
+
return JsonResponse({"success": True, "theme": theme})
|
|
162
|
+
return JsonResponse({"success": False, "error": "Failed to set theme"}, status=500)
|
|
163
|
+
```
|
|
164
|
+
</c-lbdocs.codeblock.title>
|
|
165
|
+
|
|
166
|
+
**Available functions** (import from `labb.shortcuts`):
|
|
167
|
+
|
|
168
|
+
- `set_labb_theme(request, theme)` — sets the theme in the session, returns `True`/`False`
|
|
169
|
+
- `get_labb_theme(request)` — retrieves the current theme from the session
|
|
170
|
+
- `set_theme_view` — pre-built view for theme persistence
|
|
171
|
+
</c-lb.collapse>
|
|
172
|
+
|
|
173
|
+
## Troubleshooting
|
|
174
|
+
|
|
175
|
+
- **Theme not applying** — Run `labb build` to rebuild CSS, verify theme names match in CSS and HTML
|
|
176
|
+
- **Persistence not working** — Ensure `{% verbatim %}{% csrf_token %}{% endverbatim %}` is in the `<body>` and `setThemeEndpoint` is set on `<c-lb.m.dependencies />`
|
|
177
|
+
- **Styles not updating** — Hard refresh browser, restart `labb dev`
|
|
178
|
+
|
|
179
|
+
## Resources
|
|
180
|
+
|
|
181
|
+
- <a href="https://daisyui.com/docs/themes/" target="_blank">daisyUI Themes Documentation</a>
|
|
182
|
+
- <a href="https://daisyui.com/theme-generator/" target="_blank">daisyUI Theme Generator</a>
|
|
183
|
+
- <a href="https://oklch.com/" target="_blank">OKLCH Color Picker</a>
|
|
@@ -328,7 +328,7 @@ labb components ex modal basic-modal
|
|
|
328
328
|
### `labb icons`
|
|
329
329
|
|
|
330
330
|
<c-lbdocs.indented_block>
|
|
331
|
-
Search and manage icon packs (requires <a href="{% doc_url '1_getting_started/
|
|
331
|
+
Search and manage icon packs (requires <a href="{% doc_url '1_getting_started/1_introduction.md' 'icons' %}">labbicons package</a> to be installed).
|
|
332
332
|
|
|
333
333
|
> *If the `labbicons` package is not installed, the command will show an error with installation instructions.*
|
|
334
334
|
|
|
@@ -29,7 +29,7 @@ css:
|
|
|
29
29
|
|
|
30
30
|
### CSS Build Configuration
|
|
31
31
|
|
|
32
|
-
Controls how CSS is built using Tailwind CSS 4 when using the <a href="{% doc_url '
|
|
32
|
+
Controls how CSS is built using Tailwind CSS 4 when using the <a href="{% doc_url '3_references/0_labb_cli.md' 'guide' %}#labb-build">`labb build`</a> command:
|
|
33
33
|
|
|
34
34
|
```yaml
|
|
35
35
|
css:
|
|
@@ -51,7 +51,7 @@ labb build --no-minify
|
|
|
51
51
|
|
|
52
52
|
### CSS Scan Configuration
|
|
53
53
|
|
|
54
|
-
Controls how templates are scanned for labb components when using the <a href="{% doc_url '
|
|
54
|
+
Controls how templates are scanned for labb components when using the <a href="{% doc_url '3_references/0_labb_cli.md' 'guide' %}#labb-scan">`labb scan`</a> command:
|
|
55
55
|
|
|
56
56
|
```yaml
|
|
57
57
|
css:
|
|
@@ -198,4 +198,4 @@ Returns the raw theme value from the user's session or the default theme from Dj
|
|
|
198
198
|
</c-lbdocs.indented_block>
|
|
199
199
|
|
|
200
200
|
|
|
201
|
-
See the [configuration documentation]({% doc_url '
|
|
201
|
+
See the [configuration documentation]({% doc_url '3_references/1_config_yaml.md' 'guide' %}) and [Django settings documentation]({% doc_url '3_references/2_django_settings.md' 'guide' %}) for more details about using some of these tags.
|
|
@@ -39,7 +39,7 @@ Includes essential CSS, JavaScript, and styling dependencies for labb components
|
|
|
39
39
|
**What it includes:**
|
|
40
40
|
|
|
41
41
|
- **Global CSS**: Automatically includes labb CSS using `lb_css_path` template tag
|
|
42
|
-
- **Theme Controller**: A small piece of JavaScript for handling theme switching with session persistence when the `setThemeEndpoint` parameter is provided. See the [theming documentation]({% doc_url '
|
|
42
|
+
- **Theme Controller**: A small piece of JavaScript for handling theme switching with session persistence when the `setThemeEndpoint` parameter is provided. See the [theming documentation]({% doc_url '2_concepts/1_theming.md' 'guide' %}) for more details.
|
|
43
43
|
|
|
44
44
|
**CSRF Token Requirements:**
|
|
45
45
|
|