Skip to content

feat: dark mode in gutenberg editor #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciorici merged 1 commit into from
May 17, 2026
Merged

feat: dark mode in gutenberg editor #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ module.exports = function (grunt) {
'*.css',
'!*-rtl.css',
'!colors-dark.css',
'!editor-colors-dark.css',
'!customize-controls.css',
'!customize-guided-tour.css',
'!welcome-notice.css',
Expand Down Expand Up @@ -109,6 +110,8 @@ module.exports = function (grunt) {
'assets/css/unminified/style.css': 'scss/style.scss',
'assets/css/unminified/editor-style.css':
'scss/editor-style.scss',
'assets/css/unminified/editor-colors-dark.css':
'scss/editor-colors-dark.scss',
'assets/css/unminified/colors-dark.css':
'scss/colors-dark.scss',
'assets/css/unminified/customize-controls.css':
Expand Down
1 change: 1 addition & 0 deletions assets/css/minified/editor-colors-dark.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

124 changes: 124 additions & 0 deletions assets/css/unminified/editor-colors-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/**
* Inspiro: Block editor canvas when Color Scheme is Dark.
* Scoped to .editor-styles-wrapper (loaded in the editor iframe only).
*/
:root {
--inspiro-primary-color: #0bb4aa;
--inspiro-dark-color: #101010;
--inspiro-light-grey-color: #f2f4f6;
--inspiro-color-background-body: #fff;
--inspiro-color-link-hover: #000;
}

.editor-styles-wrapper {
background-color: var(--inspiro-dark-color, #101010);
color: #eee;
--inspiro-color-link-hover: #fff;
}
.editor-styles-wrapper .has-light-background-background-color {
background-color: var(--wp--preset--color--primary) !important;
}
.editor-styles-wrapper .has-black-color {
color: var(--wp--preset--color--white) !important;
}
.editor-styles-wrapper .has-background-background-color {
background-color: var(--wp--preset--color--foreground) !important;
}
.editor-styles-wrapper p,
.editor-styles-wrapper li,
.editor-styles-wrapper td,
.editor-styles-wrapper th,
.editor-styles-wrapper .wp-block {
color: inherit;
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,
.editor-styles-wrapper .wp-block-heading,
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .wp-block-post-title .rich-text,
.editor-styles-wrapper .wp-block-query-title {
color: #ddd;
}
.editor-styles-wrapper .editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title :where(.rich-text, [contenteditable=true]) {
color: #ddd !important;
}
.editor-styles-wrapper .block-editor-rich-text__editable[data-is-placeholder-visible=true]::before,
.editor-styles-wrapper .block-editor-rich-text__placeholder {
color: #888 !important;
opacity: 1 !important;
}
.editor-styles-wrapper ::placeholder {
color: #888;
opacity: 1;
}
.editor-styles-wrapper a:where(:not(.wp-element-button)) {
color: var(--wp--preset--color--secondary);
}
.editor-styles-wrapper a:where(:not(.wp-element-button)):hover, .editor-styles-wrapper a:where(:not(.wp-element-button)):focus {
color: var(--inspiro-color-link-hover);
}
.editor-styles-wrapper .has-text-color a:where(:not(.wp-element-button)) {
color: inherit;
}
.editor-styles-wrapper figcaption,
.editor-styles-wrapper .wp-element-caption,
.editor-styles-wrapper .wp-block-image figcaption {
color: #ccc;
}
.editor-styles-wrapper blockquote,
.editor-styles-wrapper .wp-block-quote {
color: #ccc;
border-color: #555;
}
.editor-styles-wrapper .wp-block-pullquote {
border-color: #555;
color: #ddd;
}
.editor-styles-wrapper hr,
.editor-styles-wrapper .wp-block-separator {
border-color: #555;
color: #555;
}
.editor-styles-wrapper pre,
.editor-styles-wrapper code,
.editor-styles-wrapper kbd,
.editor-styles-wrapper .wp-block-code,
.editor-styles-wrapper .wp-block-preformatted {
color: #eee;
background-color: #1a1a1a;
border-color: #333;
}
.editor-styles-wrapper .wp-block-table,
.editor-styles-wrapper .wp-block-table table {
color: #eee;
}
.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-table td {
border-color: #555;
}
.editor-styles-wrapper input:not([type=checkbox]):not([type=radio]),
.editor-styles-wrapper textarea,
.editor-styles-wrapper select {
color: #ccc;
background-color: #333;
border-color: #444;
}
.editor-styles-wrapper .wp-block-search__input {
color: #eee;
background-color: #333;
border-color: #444;
}
.editor-styles-wrapper .wp-block-read-more {
color: var(--wp--preset--color--secondary);
}
.editor-styles-wrapper .wp-block-latest-comments__comment-meta,
.editor-styles-wrapper .wp-block-latest-posts__post-author,
.editor-styles-wrapper .wp-block-latest-posts__post-date {
color: #777;
}
13 changes: 10 additions & 3 deletions inc/editor-fonts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,21 @@ function inspiro_block_editor_fonts_styles() {
}
";

// Create editor-specific stylesheet
$css_dir = ( SCRIPT_DEBUG ) ? 'unminified' : 'minified';
$css_suffix = ( SCRIPT_DEBUG ) ? '' : '.min';

// Create editor-specific stylesheet (order: base theme editor, then dark canvas when applicable).
$editor_style = array(
'assets/css/' . ((SCRIPT_DEBUG) ? 'unminified' : 'minified') . '/editor-style' . ((SCRIPT_DEBUG) ? '' : '.min') . '.css'
'assets/css/' . $css_dir . '/editor-style' . $css_suffix . '.css',
);

if ( 'dark' === inspiro_get_theme_mod( 'colorscheme' ) ) {
$editor_style[] = 'assets/css/' . $css_dir . '/editor-colors-dark' . $css_suffix . '.css';
}

// Get Google Fonts URL
$google_fonts_url = Inspiro_Fonts_Manager::get_google_font_url();
if (!empty($google_fonts_url)) {
if ( ! empty( $google_fonts_url ) ) {
$editor_style[] = $google_fonts_url;
}

Expand Down
148 changes: 148 additions & 0 deletions scss/editor-colors-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
/**
* Inspiro: Block editor canvas when Color Scheme is Dark.
* Scoped to .editor-styles-wrapper (loaded in the editor iframe only).
*/

@import "variables-site/colors";

.editor-styles-wrapper {
background-color: var(--inspiro-dark-color, #101010);
color: #eee;

--inspiro-color-link-hover: #fff;

// Match frontend dark palette utility overrides
.has-light-background-background-color {
background-color: var(--wp--preset--color--primary) !important;
}

.has-black-color {
color: var(--wp--preset--color--white) !important;
}

.has-background-background-color {
background-color: var(--wp--preset--color--foreground) !important;
}

// Default text + blocks
p,
li,
td,
th,
.wp-block {
color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-post-title .rich-text,
.wp-block-query-title {
color: #ddd;
}

// Legacy + modern post title field
.editor-post-title__block .editor-post-title__input,
.editor-visual-editor__post-title-wrapper .editor-post-title__input,
.wp-block-post-title :where(.rich-text, [contenteditable="true"]) {
color: #ddd !important;
}

// Rich text placeholders (Gutenberg)
.block-editor-rich-text__editable[data-is-placeholder-visible="true"]::before,
.block-editor-rich-text__placeholder {
color: #888 !important;
opacity: 1 !important;
}

::placeholder {
color: #888;
opacity: 1;
}

a:where(:not(.wp-element-button)) {
color: var(--wp--preset--color--secondary);

&:hover,
&:focus {
color: var(--inspiro-color-link-hover);
}
}

.has-text-color a:where(:not(.wp-element-button)) {
color: inherit;
}

figcaption,
.wp-element-caption,
.wp-block-image figcaption {
color: #ccc;
}

blockquote,
.wp-block-quote {
color: #ccc;
border-color: #555;
}

.wp-block-pullquote {
border-color: #555;
color: #ddd;
}

hr,
.wp-block-separator {
border-color: #555;
color: #555;
}

pre,
code,
kbd,
.wp-block-code,
.wp-block-preformatted {
color: #eee;
background-color: #1a1a1a;
border-color: #333;
}

.wp-block-table,
.wp-block-table table {
color: #eee;
}

.wp-block-table th,
.wp-block-table td {
border-color: #555;
}

// Form-ish blocks
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
color: #ccc;
background-color: #333;
border-color: #444;
}

.wp-block-search__input {
color: #eee;
background-color: #333;
border-color: #444;
}

.wp-block-read-more {
color: var(--wp--preset--color--secondary);
}

.wp-block-latest-comments__comment-meta,
.wp-block-latest-posts__post-author,
.wp-block-latest-posts__post-date {
color: #777;
}
}
Loading