Reading time: 2 minutes
Hello, today we are going to learn how to add dark mode to our WordPress using only custom CSS from our theme.
There are various plugins available that can generate a dark mode, but most of them are paid or have limitations. With this method, we will learn how to add an automatic dark mode that adapts based on whether the device has dark mode enabled or not, and we will achieve this using only CSS.
The first thing we are going to do is go to Appearance:
And click on Customize:
Now, let’s go to Additional CSS:
Inside this section, we can add the CSS we need to display the dark mode:
@media (prefers-color-scheme: dark) {
}
The expression @media (prefers-color-scheme: dark) is a CSS rule used to apply specific styles when the user has enabled a dark color scheme (dark mode) on their device or browser.
Now we need to customize the elements that we want to change. For example:
@media (prefers-color-scheme: dark) {
body {
color: #FDF9F9;
background: #1E1E1E;
}
body a {
color: #809fff;
}
}
We have added a dark background color to the body and white text color for the content. The links are styled in blue.
Now, we can inspect the elements we need and change their color to see which one fits best. Some interesting elements to customize are:
@media (prefers-color-scheme: dark) {
body {
color: #FDF9F9;
background: #1E1E1E;
}
body a {
color: #809fff;
}
.site-header{
}
.main-title a{
}
.entry-title a{
}
.posted-on{
}
.entry-meta{
color: #FDF9F9 ;
}
.main-navigation, .main-navigation ul ul{
background: #444444 ;
}
.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items{
}
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header{
background: #444444 ;
}
.widget {
}
.comments-area{
}
.site-footer{
}
.footer-widgets{
}
.site-info{
}
}
We have edited the top bar, footer, post cards, various widgets, and more.
If we need to add more elements, we have to inspect them and modify them by their respective classes.
I hope this has been helpful, and don’t hesitate to visit the website regularly to learn more programming tricks.
Reading time: 2 minutes
Hello, today we are going to learn how to add dark mode to our WordPress using only custom CSS from our theme.
There are various plugins available that can generate a dark mode, but most of them are paid or have limitations. With this method, we will learn how to add an automatic dark mode that adapts based on whether the device has dark mode enabled or not, and we will achieve this using only CSS.
The first thing we are going to do is go to Appearance:
And click on Customize:
Now, let’s go to Additional CSS:
Inside this section, we can add the CSS we need to display the dark mode:
@media (prefers-color-scheme: dark) {
}
The expression @media (prefers-color-scheme: dark) is a CSS rule used to apply specific styles when the user has enabled a dark color scheme (dark mode) on their device or browser.
Now we need to customize the elements that we want to change. For example:
@media (prefers-color-scheme: dark) {
body {
color: #FDF9F9;
background: #1E1E1E;
}
body a {
color: #809fff;
}
}
We have added a dark background color to the body and white text color for the content. The links are styled in blue.
Now, we can inspect the elements we need and change their color to see which one fits best. Some interesting elements to customize are:
@media (prefers-color-scheme: dark) {
body {
color: #FDF9F9;
background: #1E1E1E;
}
body a {
color: #809fff;
}
.site-header{
}
.main-title a{
}
.entry-title a{
}
.posted-on{
}
.entry-meta{
color: #FDF9F9 ;
}
.main-navigation, .main-navigation ul ul{
background: #444444 ;
}
.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items{
}
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header{
background: #444444 ;
}
.widget {
}
.comments-area{
}
.site-footer{
}
.footer-widgets{
}
.site-info{
}
}
We have edited the top bar, footer, post cards, various widgets, and more.
If we need to add more elements, we have to inspect them and modify them by their respective classes.
I hope this has been helpful, and don’t hesitate to visit the website regularly to learn more programming tricks.
