I don’t see the style.css theme file going away any time soon. I still need it.
It’s a great thing that we can use style.css and theme.json at the same time, because the WordPress Site Editor is not 100% all the way there yet as far as providing all the customization options I need.
For example, today I’ve changed many things such as margin on the pagination block and I’ve started creating my own customized dark theme. The WordPress Site Editor completely ignores my dark theme from my style.css file, but it still displays accurately on the live version of the website. Weird…
I’m not hard coding any colors, but instead I’m using the theme’s color palette variables I established in my theme.json file, which is also ever-evolving. Via the Site Editor, I added some custom class names such as ‘.feed-image’ to my block theme’s elements in order to target them more easily and specifically in my CSS. Of course, I ran my CSS through a prefixer and a validator before finishing up.
Enqueue style.css and scripts.js files inside my theme’s functions.php file
if ( ! function_exists( 'swd2_load_scripts' ) ) :
/**
* Styles and scripts
*/
function swd2_load_scripts() {
// Enqueue style.css.
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array(), filemtime( get_template_directory() . '/style.css' ), false );
// Enqueue custom scripts.js
wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), filemtime( get_template_directory() . '/js/scripts.js' ), 1.1, true );
}
endif; // swd2_setup
add_action( 'wp_enqueue_scripts', 'swd2_load_scripts' );style.css file that I wrote:
Your mileage may vary. I still link this through my functions.php file, as you can see above.
Starting on line 72, I’m using a (prefers-color-scheme: dark) media query to detect if the user prefers a dark color scheme in their operating system. The default styles I wrote are for a light background, so the media query does the rest of the heavy lifting for detecting dark mode users. I had to use ‘!important’ on a few things and get pretty specific with some of my CSS selectors, but I guess that’s WordPress life now with all these crazy inline styles and stuff.
/*
Theme Name: SWD2
Theme URI:
Author:
Author URI:
Description: SWD2
Requires at least: 6.0
Tested up to: 6.3.2
Requires PHP: 5.7
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swd2
Tags: blog, education, portfolio, full-site-editing, custom
*/
/* DEFAULT GLOBAL STYLES - LIGHT THEME */
body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23f2f2f2' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.feed-image {
border: 1px solid var(--wp--preset--color--contrast);
}
.feed-image img.wp-post-image {
opacity: 1;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition: visibility .25s ease-in, -webkit-transform .25s;
transition: visibility .25s ease-in, -webkit-transform .25s;
transition: transform .25s, visibility .25s ease-in;
transition: transform .25s, visibility .25s ease-in, -webkit-transform .25s;
}
.feed-image a img.wp-post-image:hover {
opacity: 0.5;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
-webkit-transition: all .25s ease-in;
transition: all .25s ease-in;
-webkit-transform: scale(2);
transform: scale(2);
}
.feed-image img.wp-post-image {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.feed-image.wp-block-post-featured-image {
overflow: hidden;
}
#pagination {
border-width: 1px;
border-style: solid;
}
#pagination .wp-block-query-pagination>.wp-block-query-pagination-next,
#pagination .wp-block-query-pagination>.wp-block-query-pagination-previous,
#pagination .wp-block-query-pagination>.wp-block-query-pagination-numbers {
margin-bottom: 0;
}
#pagination .page-numbers {
margin: 0 0.25rem;
}
/* DEFAULT GLOBAL STYLES - DARK THEME */
@media (prefers-color-scheme: dark) {
body {
background-color: var(--wp--preset--color--contrast);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23111111' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
color: var(--wp--preset--color--base);
}
#header-main,
#footer-main,
#pagination,
.feed-image {
border-color: var(--wp--preset--color--base) !important;
}
p,
.wp-block-post-title a,
a.wp-block-post-excerpt__more-link,
.taxonomy-category,
.taxonomy-category a,
.taxonomy-post_tag,
.taxonomy-post_tag a,
.wp-block-image figcaption,
div.wpforms-container-full .wpforms-field-label,
div.wpforms-container-full .wpforms-field-sublabel {
color: var(--wp--preset--color--base);
}
a,
p a,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.taxonomy-category a,
.taxonomy-post_tag a {
color: var(--wp--preset--color--primary);
text-decoration: 1px dotted underline;
}
a:hover {
color: var(--wp--preset--color--base);
}
.entry-date,
.feed-image img.has-contrast-border-color.wp-post-image {
border: 1px solid var(--wp--preset--color--base) !important;
}
img.custom-logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}
}theme.json vs. style.css
I’ve been making style.css based custom WordPress themes for years now.
With that being said, I feel that I have some kind of position to chime in about the theme.json vs. style.css topic now that I’ve got a solid 40+ hours of developing and tinkering logged on the latest version of WordPress, while trying to use it as close as possible to how “they” want us to use it. That means I’m using theme.json as much as possible to make all of my theme options as dynamic as possible from the Site Editor. It’s pretty cool how many options there are available in the Site Editor, but they aren’t all there… yet.
Let’s face it, the WordPress Site Editor is not all the way there yet when it comes to being a full-blown WYSIWYG editor that allows you to fully customize the look and feel of your site. I’m talking spacing on every element, dark and light themes, the works, etc. Simply using an inline SVG logo like I used to do in my old theme’s header.php file with a logo.php template part is proving to be quite challenging now. I’ve managed to accomplish it with a custom HTML block by pasting my SVG code into it, but that’s about it and that doesn’t fully satisfy my needs to adopt the new WordPress way of building websites. We’re still missing many options that I’m eager to see built into the Site Editor. We’ll get there soon!
I know my style.css file is just going to keep on growing in size as I custom code my dark theme, because I just don’t think there is a way to do a lot of my customization needs in the Site Editor, as of now. I like to get super OCD about margins and centering elements and the Site Editor doesn’t provide everything I need yet. Maybe one day the WordPress development gurus will build a way for us to create a dynamic dark theme in the Site Editor, but for now I’m having to write my dark CSS theme custom.
Dark and light CSS themes are becoming a requirement for modern websites
We’re all in different environments – some light and some dark.
If the primary thing your website visitors do on your website is read and learn, you should highly consider creating a dark mode for your website. What if John Doe is reading your website in a very dark room? Cut ol’ Johnny a break on his eyes and automatically serve him a dark color scheme instead. If he chooses to use a light color scheme because he’s outdoors during the day, he can just switch his operating system to a light theme and your website will adapt respectively. You can also offer your website visitors the option to click an icon in your website’s user interface to switch to a dark or light mode on the fly, although this will require some deeper customization and is not currently native to WordPress.
Some websites are still ignoring the dark and light color scheme trend and are becoming outdated in comparison to modernized websites. Get with the times!
Leave a Reply