From b3cf9bee78b051b2d91edf3840810d40d760b1bc Mon Sep 17 00:00:00 2001 From: Esaia Date: Wed, 13 May 2026 15:02:23 +0400 Subject: [PATCH] feat: dark mode in gutenberg editor --- Gruntfile.js | 3 + .../css/minified/editor-colors-dark.min.css | 1 + assets/css/unminified/editor-colors-dark.css | 124 +++++++++++++++ inc/editor-fonts.php | 13 +- scss/editor-colors-dark.scss | 148 ++++++++++++++++++ 5 files changed, 286 insertions(+), 3 deletions(-) create mode 100644 assets/css/minified/editor-colors-dark.min.css create mode 100644 assets/css/unminified/editor-colors-dark.css create mode 100644 scss/editor-colors-dark.scss diff --git a/Gruntfile.js b/Gruntfile.js index dbe3d4e9..2baa3723 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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', @@ -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': diff --git a/assets/css/minified/editor-colors-dark.min.css b/assets/css/minified/editor-colors-dark.min.css new file mode 100644 index 00000000..3e7adbe1 --- /dev/null +++ b/assets/css/minified/editor-colors-dark.min.css @@ -0,0 +1 @@ +: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 .wp-block,.editor-styles-wrapper li,.editor-styles-wrapper p,.editor-styles-wrapper td,.editor-styles-wrapper th{color:inherit}.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,.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:#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)):focus,.editor-styles-wrapper a:where(:not(.wp-element-button)):hover{color:var(--inspiro-color-link-hover)}.editor-styles-wrapper .has-text-color a:where(:not(.wp-element-button)){color:inherit}.editor-styles-wrapper .wp-block-image figcaption,.editor-styles-wrapper .wp-element-caption,.editor-styles-wrapper figcaption{color:#ccc}.editor-styles-wrapper .wp-block-quote,.editor-styles-wrapper blockquote{color:#ccc;border-color:#555}.editor-styles-wrapper .wp-block-pullquote{border-color:#555;color:#ddd}.editor-styles-wrapper .wp-block-separator,.editor-styles-wrapper hr{border-color:#555;color:#555}.editor-styles-wrapper .wp-block-code,.editor-styles-wrapper .wp-block-preformatted,.editor-styles-wrapper code,.editor-styles-wrapper kbd,.editor-styles-wrapper pre{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 td,.editor-styles-wrapper .wp-block-table th{border-color:#555}.editor-styles-wrapper input:not([type=checkbox]):not([type=radio]),.editor-styles-wrapper select,.editor-styles-wrapper textarea{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} \ No newline at end of file diff --git a/assets/css/unminified/editor-colors-dark.css b/assets/css/unminified/editor-colors-dark.css new file mode 100644 index 00000000..cb3dd0f7 --- /dev/null +++ b/assets/css/unminified/editor-colors-dark.css @@ -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; +} \ No newline at end of file diff --git a/inc/editor-fonts.php b/inc/editor-fonts.php index 33f5ed37..2f4f2a3d 100644 --- a/inc/editor-fonts.php +++ b/inc/editor-fonts.php @@ -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; } diff --git a/scss/editor-colors-dark.scss b/scss/editor-colors-dark.scss new file mode 100644 index 00000000..75202ee9 --- /dev/null +++ b/scss/editor-colors-dark.scss @@ -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; + } +}