Lately, I’ve been writing at night, and the Block Editor feels like a spotlight shining straight into my face. After adding dark mode to my blog’s front end recently, I decided it was time to give the editor a little night-vision treatment too. Naturally, I wasn’t about to rely on a plugin — keeping my blog lightweight and secure is non-negotiable.
But after several failed attempts, I discovered that normal custom CSS doesn’t affect the editor interface because it runs in an isolated environment. The solution was to enqueue the styles properly using PHP — here’s how I did it.
This is the result:
Why Normal Custom CSS Doesn’t Work
The WordPress post editor is an isolated environment. It loads its own styles inside the admin area and wraps the content editing area inside a container called .editor-styles-wrapper.
When I add CSS via a snippet plugin, it doesn’t reach the editor because WordPress doesn’t enqueue those styles there. It only works if the CSS is explicitly enqueued for the block editor.
The Correct Way: Enqueue the Styles
WordPress provides a dedicated action hook, enqueue_block_editor_assets, specifically for loading custom styles and scripts into the block editor.
Here’s a fully working example that applies a dark background and light text to the editor — without touching the sidebar to preserve contrast and usability (actually because the sidebar uses so many pseudo-elements and complex selectors that I haven’t had time to deal with yet).
Use the snippet plugin to create a new PHP snippet like this:
add_action('enqueue_block_editor_assets', function() {
wp_add_inline_style('wp-block-library', '
@media (prefers-color-scheme: dark) {
:root {
--bg-color-100: rgb(32 33 36 / 1);
--text-color-100: rgb(255 252 239 / 1);
--link-color-100: rgb(0 166 251 / 1);
}
/* EDITOR */
.editor-styles-wrapper {
background-color: var( --bg-color-100 ) !important;
color: var( --text-color-100 ) !important;
}
/* PARAGRAPH & HEADINGS */
.editor-styles-wrapper p,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
color: var( --text-color-100 ) !important;
}
/* LINKS */
.editor-styles-wrapper a { color: var( --link-color-100 ) !important; }
/* COMPONENTS BUTTON */
.block-editor-inserter__toggle.components-button.has-icon {
background-color: var( --text-color-100 ) !important;
}
.block-editor-inserter__toggle.components-button.has-icon svg {
color: var( --bg-color-100 );
}
}
');
});
Code language: PHP (php)How It Works
The editor automatically switches to dark mode when the device is set to dark, and reverts to light mode when the device returns to light. I’ve found this approach to be simple, convenient, and easy to use.
Why This Works
The code uses wp_add_inline_style() attached to the wp-block-library handle, which ensures my custom CSS is injected after the core Gutenberg styles.
The use of @media (prefers-color-scheme: dark) allows the editor to respond dynamically to the system’s scheme.
Because I target .editor-styles-wrapper, the change applies only to the content editing area, keeping the rest of the UI (sidebar, toolbar, etc.) untouched and readable. These areas occupy only about 10% of the screen, and for now, I’m comfortable keeping them as default. This setup provides a balanced writing experience in any environment and I’m happy with it.