{"id":24364188,"url":"https://github.com/christianwgd/django-bootstrap5-dark-mode-switch","last_synced_at":"2025-07-07T04:08:13.687Z","repository":{"id":240406114,"uuid":"802547885","full_name":"christianwgd/django-bootstrap5-dark-mode-switch","owner":"christianwgd","description":"Easily use the bootstrap 5 dark mode","archived":false,"fork":false,"pushed_at":"2024-07-29T18:01:11.000Z","size":43,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T19:35:54.448Z","etag":null,"topics":["bootstrap","dark-mode","django","python"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/christianwgd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-18T15:52:08.000Z","updated_at":"2025-05-26T19:00:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"29bf95eb-f88a-4fdf-9ffe-5e84c598b7bb","html_url":"https://github.com/christianwgd/django-bootstrap5-dark-mode-switch","commit_stats":null,"previous_names":["christianwgd/django-bootstrap5-dark-mode-switch"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/christianwgd/django-bootstrap5-dark-mode-switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianwgd%2Fdjango-bootstrap5-dark-mode-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianwgd%2Fdjango-bootstrap5-dark-mode-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianwgd%2Fdjango-bootstrap5-dark-mode-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianwgd%2Fdjango-bootstrap5-dark-mode-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christianwgd","download_url":"https://codeload.github.com/christianwgd/django-bootstrap5-dark-mode-switch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianwgd%2Fdjango-bootstrap5-dark-mode-switch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264010949,"owners_count":23543716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","dark-mode","django","python"],"created_at":"2025-01-18T23:51:23.607Z","updated_at":"2025-07-07T04:08:13.670Z","avatar_url":"https://github.com/christianwgd.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 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/) \u003e= 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\u003clink href=\"{% static 'dark_mode_switch/dark-mode-switch.css' %}\" rel=\"stylesheet\" type=\"text/css\"\u003e\n{% endblock %}\n```\n\nInclude the javascript file in your base template:\n\n```\n{% block bootstrap5_extra_script %}\n{{ block.super }}\n\u003cscript src=\"{% static 'dark_mode_switch/dark-mode-switch.js' %}\"\u003e\u003c/script\u003e\n{% endblock %}\n```\n\nFinally include the html for the switch into your navbar:\n\n```\n\u003cnav class=\"navbar navbar-expand\"\u003e\n    \u003cdiv class=\"container-fluid\"\u003e\n        \u003ca class=\"navbar-brand\" href=\"{% url 'home' %}\"\u003e\n            Your app name\n        \u003c/a\u003e\n        \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n            \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n        \u003c/button\u003e\n\n        \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarNav\"\u003e\n            \u003cul class=\"navbar-nav ms-auto\"\u003e\n                {% include 'dark_mode_switch/dark_mode_switch.html' %}\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/nav\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianwgd%2Fdjango-bootstrap5-dark-mode-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristianwgd%2Fdjango-bootstrap5-dark-mode-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianwgd%2Fdjango-bootstrap5-dark-mode-switch/lists"}