The Theme Switcher Component by B-iggy was introduced to toggle between light and dark modes via a button, originally derived from the Alien Night Theme. Users requested features like admin-configurable themes, logo color switching, and placement customization (e.g., near the search bar or in the user menu). While awesomerobot created a more robust theme toggle using theme IDs, B-iggy acknowledged its superiority and considered his component redundant. However, awesomerobot noted advantages in CSS-based switching (no full refresh needed). Users reported issues: logo color not adapting (Anatolia), layout conflicts (jrgong), and admin panel text invisibility (TheSahil). Feature requests included translation support (Rahim), sidebar compatibility (AquaL1te), and location flexibility (jrgong). B-iggy clarified the component was never meant to toggle full themes but only predefined CSS modes. In post 40, B-iggy officially deprecated the component, recommending the newer Dark/Light Mode Toggle which leverages CSS variables for cleaner, maintainable theme switching. The component remains available but is no longer actively developed.
after a lot of requests I share a Theme Switcher component, encapsulated from my Alien Night Theme.
For now, once pressed the button it will switch your theme into a dark mode theme.
Later on I can maybe implement a setting page, where you can define your own global CSS class your theme should switch into.
Or just toggle between the first two themes you allowed for users to choose from…
You can let admins select which themes they want to use. We have two different themes and each theme has it own dark mode.
When we click the switch to change light to dark, this component below should have change the logo’s color to light as the opposite. Now it doesn’t work with this switch.
Defining the themes in the settings is possible, but will complicate things. The hamburger menu theme selector is a good working example of how you’d change the theme based on ID.
Not necessarily, there are some benefits of switching the CSS rather than switching the entire theme. Everything’s self contained and you don’t need to fully refresh for all the changes to take effect.
Instead of changing the code on your end I think it makes sense to have it next to the search icon per default.
So I pushed this change now. Let me know if it’s fine
Also is there any workaround to add an alternative logo? My current one is not readable on dark bg, hence I want to add a inverted one for the dark mode
My theme has lots of hardcoded colors and only works properly with a light color scheme. Open to fixing this but for now it does not work right in dark mode.
Any thoughts about making the bottom smaller? When using additional component, it takes a lot of space in the header. For example I like the dark mode button in this ghost theme at top right:
