Dark mode theme
Todays website is looking very clean and solid whit white background and colorful buttons, I want to add simple and efficient way to switch light whit dark mode to prevent my eyes from burning when I`m updating my website.
This feature will make your app to shine as all the industry now support it.
Our website is a simple web app which can generate random secret keys for your api or other authentication base. Is build oppon simple html, js and almost no css whit the help of bootstrap and angularjs, as I'am using standard bootstrap colors and angular for dinamisator the app.
I'm using this strategy because one every few years your web/mobile/whatever product theme will look outdated and will need rewriting. Using standard and clean style will make your app theme ever green. Mine project is very small and for now it dont need creating theme and color identity for it.
Update bootstrap class whit angularjs
- Adding ng-class="dark" for angular and change bootstrap classes
<body ng-class="dark?'bg-secondary text-light':'bg-light text-dark'" ng-app="mainApp">
- Adding toggle switch to change the angular "dark" model
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="darkModeSwitch" ng-model="dark">
<label class="custom-control-label" for="darkModeSwitch">Dark Mode</label>
</div>
Also you can use pure html and javascript to get the same result, if you want that example, please write me in the comment section.
And voila, you have night mode with exactly 5 rows of code. You will need to probably apply the ng-class property on other html elements to to achieve better app dark mode consistency theme.
Preview of the working example here, and the project github repo if you have interes to check out the code.
No comments:
Post a Comment