Dark Theme Switcher with Bootstrap 5.3
A few years ago I posted an article on how to make a CSS theme switcher using CSS and I had a post on how to switch modes when using TailWinds. With Bootstrap 5.3 there is a quick and easy way to change the application theme from light to dark and vice versa. You can still use the CSS method and it does give you more flexibility, but you have to do all the CSS styling yourself. In the CSS model, you would dynamically change the overall style sheet. While with the Tailwinds solution, you had to set a dark attribute on the elements to control the theme. In Bootstrap 5.3 and beyond, you just use a new data attribute on the body element in App.razor: <body data-bs-theme:"dark"> With Bootstrap, you have to use JavaScript to do the actual switching of the data attribute. These are the parts you have to implement to have just switch the dark mode on and off: 1. Service to handle the state...
