Styling Discord dengan BetterDiscord dengan cara Miq
If you’re building websites in 2020 you MUST add an option to toggle light 🌞 dark 🌑 mode - at the very least. You can really impress your users by adding a button to toggle multiple themes. That might sound complicated, but user-controlled themes are actually very easy to implement in sites the utilize CSS variables. The snippet below demonstrates multiple methods for theming a website dynamically at runtime.
Option 1 - Media Query prefers-color-scheme
How do you get a user’s preferred color scheme with CSS?
As of 2020, it is possible in most browsers to run a media query for the user’s preferred color scheme at the system level. If their macbook is set to dark mode, then your app can automatically run with a dark theme. In the code below, we change CSS variables at the root of the application based on the result of the media query.
Light/Dark CSS
Option 2 - Toggle CSS Variables
How do you toggle multiple themes with CSS variables?
The Media Query above is great for light/dark mode, but does not help sites with multiple custom themes. To handle that feature, we will need a little bit of JavaScript. Notice how the demo below allows the user to cycle between multiple themes by clicking a button.
Multiple CSS Themes
First, define a set of theme values and use them throughout your CSS code.
In this example, the theme is attached to the <body>, but feel free to use
it on any element that is theme-able.
JavaScript Theme Toggle
The code below provides map that creates a circular list, so the user can toggle themes in an infinite loop by clicking one button. The user’s preferred theme is stored in the browser’s local storage - this allows it to remain active between browser refreshes or visits from other windows.