Dark Themes with Gutenberg Block Editor

I recently worked on a project with a dark background. The block editor was hard to use because the colors on the site hid all the elements within the block editor. I was able to add a simple line of code to my functions.php file to adjust the color of the UI to work on dark backgrounds:

add_theme_support( 'editor-styles' );
add_theme_support( 'dark-editor-style' );Code language: PHP (php)

Note you don’t need to add add_theme_support( 'editor-styles' ); twice, but that rule does need to be present for the dark-editor-style rule to work.

Published on June 27, 2020

Share this Article


Reader Interactions

Leave A Reply