Having a dark mode can be extremely simple to achieve, or super hard. It depends how you set your styles architecture. I believe the most straightforward way, with vanilla CSS, would be something like:
:root { --light-text: #eee; --light-background: #bbb; --dark-text: #222; --dark-background: #333; } body { color: var(--dark-text); background-color: var(--light-background); transition: all 300ms linear; /* 😉 */ } body[data-theme="dark"] { color: var(--light-text); background-color: var(--dark-background); }
Example in JSBin
As others have said, if you aren't using variables, you'll probably will want to do some refactoring first. Search/Replace is your friend! 😅
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Having a dark mode can be extremely simple to achieve, or super hard. It depends how you set your styles architecture. I believe the most straightforward way, with vanilla CSS, would be something like:
Example in JSBin
As others have said, if you aren't using variables, you'll probably will want to do some refactoring first. Search/Replace is your friend! 😅