{"id":16174992,"url":"https://github.com/app-generator/sample-bootstrap5-dark-mode","last_synced_at":"2026-01-20T11:32:04.243Z","repository":{"id":41050051,"uuid":"504754264","full_name":"app-generator/sample-bootstrap5-dark-mode","owner":"app-generator","description":"Soft UI Dashboard - Dark Mode Support | AppSeed","archived":false,"fork":false,"pushed_at":"2022-06-22T14:28:31.000Z","size":29136,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-07T18:52:07.499Z","etag":null,"topics":["appseed","creative-tim","soft-ui-dashboard"],"latest_commit_sha":null,"homepage":"https://appseed.us/product/soft-ui-dashboard/","language":"SCSS","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/app-generator.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}},"created_at":"2022-06-18T05:37:55.000Z","updated_at":"2022-09-20T06:46:15.000Z","dependencies_parsed_at":"2022-09-23T19:52:45.148Z","dependency_job_id":null,"html_url":"https://github.com/app-generator/sample-bootstrap5-dark-mode","commit_stats":null,"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"purl":"pkg:github/app-generator/sample-bootstrap5-dark-mode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-bootstrap5-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-bootstrap5-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-bootstrap5-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-bootstrap5-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/app-generator","download_url":"https://codeload.github.com/app-generator/sample-bootstrap5-dark-mode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-bootstrap5-dark-mode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28602448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T10:46:13.255Z","status":"ssl_error","status_checked_at":"2026-01-20T10:42:51.865Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["appseed","creative-tim","soft-ui-dashboard"],"created_at":"2024-10-10T04:43:55.630Z","updated_at":"2026-01-20T11:32:04.226Z","avatar_url":"https://github.com/app-generator.png","language":"SCSS","readme":"# Soft UI Dashboard - `Dark Mode` Support\n\nSoft UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files and classes.\n\n\u003cbr /\u003e\n\n\u003e **Enhanced version** of the [original version](https://www.creative-tim.com/product/soft-ui-dashboard?AFFILIATE=128200) with `Dark Mode` - [LIVE Demo](https://django-soft-ui-dashboard.appseed-srv1.com/)\n\n- 👉 [Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/django/) `Dark Support` - **Django Version** (free product)\n- 👉 [Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/flask/) `Dark Support` - **Flask Version** (free product)\n- 🚀 [Soft Dashboard Generator](https://appseed.us/generator/soft-ui-dashboard/) - LIVE \u0026 Free Service\n\n\u003cbr /\u003e\n\n![Soft UI Dashboard - dark Mode Enhancement](https://user-images.githubusercontent.com/51070104/174716339-53c95c87-3842-4878-aef8-a675b0eca5b1.gif) \n\n\u003cbr /\u003e\n\n## 👉 How it works\n\nThis enhancement was made by coding the following steps: \n\n- Create a new `JS` file that handles the user interactions\n  - Source code: [dark-mode-handler.js](https://github.com/app-generator/sample-bootstrap5-dark-mode/blob/main/assets/js/dark-mode-handler.js)\n- CSS/SCSS files for the style changes\n  - Sources: [CSS](https://github.com/app-generator/sample-bootstrap5-dark-mode/blob/main/assets/css/dark-theme-core.css) and [SCSS](https://github.com/app-generator/sample-bootstrap5-dark-mode/blob/main/assets/scss/dark-theme-core.scss)\n- Gulp scripts update to handle the new SCSS file\n\nThe new files (`dark-mode-handler.js` and `dark-theme-core.css`) are included in the pages. The CSS file goes to the `header` and the `JS` goes at the bottom, just before closing `\u003c/body\u003e`.\n\nOn top of this, the `dark mode` is provided to be persistent and the current state of the theme (`dark` or `light`) is saved in the local storage on the browser. \n\n\u003cbr /\u003e\n\n### 👉 JS Code\n\nOnce the `dark theme` control is saved in the navigation bar, and a simple event listener is attached that handles the user interaction.\n\n```javascript\nconst themeSwitch = document.getElementById(\"theme-switch\");\nconst themeIndicator = document.getElementById(\"theme-indicator\");\nconst page = document.body;\n\nconst themeStates = [\"light\", \"dark\"]               // here we manage the states\nconst indicators = [\"fa-moon\", \"fa-sun\"]            // here is managed the icon \nconst pageClass = [\"bg-gray-100\", \"dark-page\"]      // CSS class, where `bg-gray-100` was the original, light theme \n\nlet currentTheme = localStorage.getItem(\"theme\");   // Use the browser localStorage for persistence \n\nfunction setTheme(theme) {\n    localStorage.setItem(\"theme\", themeStates[theme])\n}\n\nfunction setIndicator(theme) {\n    themeIndicator.classList.remove(indicators[0])\n    themeIndicator.classList.remove(indicators[1])\n    themeIndicator.classList.add(indicators[theme])\n}\n\nfunction setPage(theme) {\n    page.classList.remove(pageClass[0])\n    page.classList.remove(pageClass[1])\n    page.classList.add(pageClass[theme])\n}\n\n\nif (currentTheme === null) {\n    localStorage.setItem(\"theme\", themeStates[0])\n    setIndicator(0)\n    setPage(0)\n    themeSwitch.checked = true;\n}\nif (currentTheme === themeStates[0]) {\n    setIndicator(0)\n    setPage(0)\n    themeSwitch.checked = true;\n\n}\nif (currentTheme === themeStates[1]) {\n    setIndicator(1)\n    setPage(1)\n    themeSwitch.checked = false;\n}\n\n\nthemeSwitch.addEventListener('change', function () {\n    if (this.checked) {\n        setTheme(0)\n        setIndicator(0)\n        setPage(0)\n    } else {\n        setTheme(1)\n        setIndicator(1)\n        setPage(1)\n    }\n});\n\n```\n\n\u003cbr /\u003e\n\n### 👉 `Dark Mode` CSS File\n\nKeep in in mind the rules of specificity [read more about it](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) we start our SCSS file with the dark theme class selector for body tag. We will write all our code inside this code block. The css rules are pretty straightforward. \n\nThe main thing to understand here is, when the dark mode is toggled, our body element gets a class of `dark-page` otherwise, it has the default class of “bg-gray-100”\nIn our main code block, we targetted our “dark-page” class and all elements are inside this body class, thus we can easily write new styles for this.\n\n\u003e Tips To Easily Change Dark Mode Colors\n\nIn the dark mode, we are not overwriting every bit of the page. The accent colors will remain the same. For example, buttons, alerts, badges, icons, etc.\nThe things we need to take care of includes, background for body, cards, card headers, list items, navigation buttons, input elements, svg icons, fontawesome icons, switches, and tables.\n\n\u003cbr /\u003e\n\n---\nSoft UI Dashboard `Dark Mode` Support - Open-source sample provided by **[AppSeed](https://appseed.us/generator)**.  \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fsample-bootstrap5-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapp-generator%2Fsample-bootstrap5-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fsample-bootstrap5-dark-mode/lists"}