Where do I author my custom CSS?

Resolved Trace Meek
(@tracemeek)

3 weeks, 4 days ago
Hi, I would like to change not only the color scheme in the admin area (which the plugin does great), but also the font family and font size of the text when I am writing posts and pages.

I see in the documentation that the plugin provides a filter for customization:

add_filter( 'dark_mode_dashboard_css', 'your_custom_stylesheet' ) — load a custom stylesheet

Where is this file? Or do I create a file from scratch? And if the latter, where do I upload it in my theme’s directory (or plugins directory)? Or is the idea that I need to add that line to my functions.php file, and then add a “your_custom_stylesheet.css” file to the root of my site’s theme?

I tried editing /wp-content/plugins/dark-mode-for-wp-dashboard/assets/css/dark-mode-editor.css

I added a font rule on line 47:
```
body.dark-mode .editor-styles-wrapper p {
    color: var(--dm-text-primary);
    font: 22px/1.5 "Noto Serif", Georgia, serif !important;
}
```
But my blog posts and pages are still showing (in the Admin area) in the default font that WordPress ships with.

I’m sorry if all of this seems elementary to you—my expertise is in CSS, but not WordPress-flavored PHP. Thanks!
- This topic was modified 3 weeks, 4 days ago by Trace Meek.
- This topic was modified 3 weeks, 4 days ago by Trace Meek. Reason: clarified my question
- This topic was modified 3 weeks, 4 days ago by Trace Meek. Reason: Clarified again

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Naiche
(@naiches)

3 weeks, 1 day ago
Hi Trace, You found a genuine documentation bug, so thanks. I’ve corrected the readme and added an FAQ covering both halves of this.

Why your rule did nothing. In the block editor the post content renders in an iframe, and inside that iframe the body element is the .editor-styles-wrapper element, not its parent. So with a space between them:
```
body.dark-mode .editor-styles-wrapper p   /* looks for a wrapper inside body — matches nothing */
body.dark-mode.editor-styles-wrapper p    /* one compound selector — works */
```
I tested this in the canvas: your version has no effect, while body.dark-mode.editor-styles-wrapper p and plain body.dark-mode p both apply. So body.dark-mode p { font: 22px/1.5 “Noto Serif”, Georgia, serif; } is all you need.

Where to put it. Not in the plugin folder; updates overwrite it. And dark_mode_dashboard_css was the wrong signpost, my fault. It replaces the plugin’s admin stylesheet rather than adding to it, and it never reaches the editor iframe. The readme said “load a custom stylesheet”, which reads as though it appends. That’s now fixed.

The canvas only receives styles enqueued on enqueue_block_assets. In your theme’s functions.php:
```
add_action( 'enqueue_block_assets', function () {
    if ( ! is_admin() ) {
        return;
    }
    wp_enqueue_style(
        'my-editor-fonts',
        get_stylesheet_directory_uri() . '/editor-fonts.css',
        array(),
        '1.0'
    );
} );
```
Then editor-fonts.css in your theme folder:
```
body.editor-styles-wrapper p {
    font: 22px/1.5 "Noto Serif", Georgia, serif;
}
```
Leave .dark-mode out as above and it applies in both modes; add it as body.dark-mode.editor-styles-wrapper p for dark only. On a block theme, theme.json typography can compete, say so if it does.

Your CSS was fine, by the way. The docs and one space were the problem.
Thread Starter Trace Meek
(@tracemeek)

2 weeks, 6 days ago

Wow, thank you so much, Naiche, for your clear explanation.

I corrected my space mistake (oops! late-night coding—it happens).

I followed your instructions on updating my functions.php file, and adding a custom editor-fonts.css file to my theme’s directory. (I gave the file a different name, and changed the corresponding reference in functions.php).

It all works perfectly, and it’s so much easier on the eyes! Something about writing in my preferred typeface for journaling subtly shapes the writing in a pleasing way.

I appreciate all your help—you rock!

Plugin Author Naiche
(@naiches)

2 weeks, 5 days ago

You’re welcome! Thank you for your kind words 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.