django-bootstrap5-dark-mode-switch


Namedjango-bootstrap5-dark-mode-switch JSON
Version 0.2.2 PyPI version JSON
download
home_pagehttps://github.com/christianwgd/django-bootstrap5-dark-mode-switch
SummaryDark mode switch for Django with Bootstrap 5
upload_time2024-05-20 14:14:57
maintainerNone
docs_urlNone
authorChristian Wiegand
requires_python>=3.10
licenseMIT
keywords django bootstrap dark mode
VCS
bugtrack_url
requirements No requirements were recorded.
Travis-CI No Travis.
coveralls test coverage No coveralls. 
            # 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"
}
Christian Wiegand
Elapsed time: 0.75537s