# Django Bootstrap 5 Dark Mode Switch
[![image](https://img.shields.io/pypi/v/django-bootstrap5-dark-mode-switch)](https://pypi.python.org/pypi/django-bootstrap5-dark-mode-switch)
[![PyPI - Downloads](https://img.shields.io/pypi/dm/django-bootstrap5-dark-mode-switch)](https://pypi.python.org/pypi/django-bootstrap5-dark-mode-switch)
Use of bootstrap 5 dark mode made easy.
## What is this for?
django-bootstrap5-dark-mode-switch enables you to use the
[Bootstrap 5 dark mode](https://getbootstrap.com/docs/5.3/customize/color-modes/)
in your Django projects. With this library installed you get a menu from which
you can select light mode, dark mode and an auto mode that automatically adapts
your theme to the theme selected with your browser or operating system.
The dark mode switch is fully compatible with the django admin dark mode. So if
you select dark mode in your django admin it will also be enabled with your
frontend templates and vice versa.
## Installing
`django-bootstrap5-dark-mode-switch` can be found on pypi. Run
`pip install django-bootstrap5-dark-mode-switch` to install the
package on your machine or in your virtual environment.
## Getting Started
You need to have [django-bootstrap5](https://django-bootstrap5.readthedocs.io/en/latest/) >= 24.2 installed.
Add the app to your settings.py:
```
INSTALLED_APPS = [
...,
'dark_mode_switch',
...,
]
```
Include the css file in your base template:
```
{% block bootstrap5_extra_head %}
{{ block.super }}
<link href="{% static 'dark_mode_switch/dark-mode-switch.css' %}" rel="stylesheet" type="text/css">
{% endblock %}
```
Include the javascript file in your base template:
```
{% block bootstrap5_extra_script %}
{{ block.super }}
<script src="{% static 'dark_mode_switch/dark-mode-switch.js' %}"></script>
{% endblock %}
```
Finally include the html for the switch into your navbar:
```
<nav class="navbar navbar-expand">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">
Your app name
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
{% include 'dark_mode_switch/dark_mode_switch.html' %}
</ul>
</div>
</div>
</nav>
```
If you like to have the switch outside the navbar you can create your own
template by overriding it in `templates/dark_mode_switch/dark_mode_switch.html`.
Please pay attention to the classes and ids of the options.
## Colors
As long as you stick with the standard bootstrap themes you don't have to
worry about colors. If you like to use your own color definitions you should
define also the dark mode color set
(see [Bootstrap 5 dark mode](https://getbootstrap.com/docs/5.3/customize/color-modes/)).
Raw data
{
"_id": null,
"home_page": "https://github.com/christianwgd/django-bootstrap5-dark-mode-switch",
"name": "django-bootstrap5-dark-mode-switch",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": "django, bootstrap, dark mode",
"author": "Christian Wiegand",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/98/35/ee868ed049fdedf89dcda7caf64553a814e7304d97bf9baa54af6ef36cbb/django_bootstrap5_dark_mode_switch-0.2.2.tar.gz",
"platform": null,
"description": "# Django Bootstrap 5 Dark Mode Switch\n\n[![image](https://img.shields.io/pypi/v/django-bootstrap5-dark-mode-switch)](https://pypi.python.org/pypi/django-bootstrap5-dark-mode-switch)\n[![PyPI - Downloads](https://img.shields.io/pypi/dm/django-bootstrap5-dark-mode-switch)](https://pypi.python.org/pypi/django-bootstrap5-dark-mode-switch)\n\nUse of bootstrap 5 dark mode made easy.\n\n## What is this for?\n\ndjango-bootstrap5-dark-mode-switch enables you to use the \n[Bootstrap 5 dark mode](https://getbootstrap.com/docs/5.3/customize/color-modes/) \nin your Django projects. With this library installed you get a menu from which \nyou can select light mode, dark mode and an auto mode that automatically adapts \nyour theme to the theme selected with your browser or operating system.\n\nThe dark mode switch is fully compatible with the django admin dark mode. So if \nyou select dark mode in your django admin it will also be enabled with your \nfrontend templates and vice versa.\n\n## Installing\n\n`django-bootstrap5-dark-mode-switch` can be found on pypi. Run \n`pip install django-bootstrap5-dark-mode-switch` to install the \npackage on your machine or in your virtual environment.\n\n## Getting Started\n\nYou need to have [django-bootstrap5](https://django-bootstrap5.readthedocs.io/en/latest/) >= 24.2 installed.\n\nAdd the app to your settings.py:\n\n```\nINSTALLED_APPS = [\n ...,\n 'dark_mode_switch',\n ...,\n]\n```\n\nInclude the css file in your base template:\n\n```\n{% block bootstrap5_extra_head %}\n{{ block.super }}\n<link href=\"{% static 'dark_mode_switch/dark-mode-switch.css' %}\" rel=\"stylesheet\" type=\"text/css\">\n{% endblock %}\n```\n\nInclude the javascript file in your base template:\n\n```\n{% block bootstrap5_extra_script %}\n{{ block.super }}\n<script src=\"{% static 'dark_mode_switch/dark-mode-switch.js' %}\"></script>\n{% endblock %}\n```\n\nFinally include the html for the switch into your navbar:\n\n```\n<nav class=\"navbar navbar-expand\">\n <div class=\"container-fluid\">\n <a class=\"navbar-brand\" href=\"{% url 'home' %}\">\n Your app name\n </a>\n <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n <ul class=\"navbar-nav ms-auto\">\n {% include 'dark_mode_switch/dark_mode_switch.html' %}\n </ul>\n </div>\n </div>\n</nav>\n```\n\nIf you like to have the switch outside the navbar you can create your own\ntemplate by overriding it in `templates/dark_mode_switch/dark_mode_switch.html`.\nPlease pay attention to the classes and ids of the options.\n\n## Colors\n\nAs long as you stick with the standard bootstrap themes you don't have to \nworry about colors. If you like to use your own color definitions you should \ndefine also the dark mode color set \n(see [Bootstrap 5 dark mode](https://getbootstrap.com/docs/5.3/customize/color-modes/)).\n\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Dark mode switch for Django with Bootstrap 5",
"version": "0.2.2",
"project_urls": {
"Homepage": "https://github.com/christianwgd/django-bootstrap5-dark-mode-switch"
},
"split_keywords": [
"django",
" bootstrap",
" dark mode"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "80ff11dff316ecaec645afa6bd6a1dc43f7124887e8c8cea702ad85766a6a3cf",
"md5": "978c38c5a4fe6145bc158b9371bc8bbf",
"sha256": "c267da689768af94f96a910a1c0ea45e7dab6fae4b287edd9dec0957ef838764"
},
"downloads": -1,
"filename": "django_bootstrap5_dark_mode_switch-0.2.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "978c38c5a4fe6145bc158b9371bc8bbf",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 5569,
"upload_time": "2024-05-20T14:14:22",
"upload_time_iso_8601": "2024-05-20T14:14:22.395483Z",
"url": "https://files.pythonhosted.org/packages/80/ff/11dff316ecaec645afa6bd6a1dc43f7124887e8c8cea702ad85766a6a3cf/django_bootstrap5_dark_mode_switch-0.2.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "9835ee868ed049fdedf89dcda7caf64553a814e7304d97bf9baa54af6ef36cbb",
"md5": "dc5ab462d6419b85f4cd49ab55160f51",
"sha256": "bb2b6d523fc65a6df1a664a0a86ee5fed93b14c3b51c5c47a2237a7de63438d2"
},
"downloads": -1,
"filename": "django_bootstrap5_dark_mode_switch-0.2.2.tar.gz",
"has_sig": false,
"md5_digest": "dc5ab462d6419b85f4cd49ab55160f51",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 5294,
"upload_time": "2024-05-20T14:14:57",
"upload_time_iso_8601": "2024-05-20T14:14:57.230298Z",
"url": "https://files.pythonhosted.org/packages/98/35/ee868ed049fdedf89dcda7caf64553a814e7304d97bf9baa54af6ef36cbb/django_bootstrap5_dark_mode_switch-0.2.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-05-20 14:14:57",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "christianwgd",
"github_project": "django-bootstrap5-dark-mode-switch",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "django-bootstrap5-dark-mode-switch"
}