Edit-mode in page preview does not apply cssclasses

Custom CSS & Theme Design
1

Steps to reproduce

Add any class name to the cssclasses property of a note and target them via user styles.

Expected result

As in the regular reading and editing view, I’d expect my cssclasses to be added to the page preview container in both the reading and edit-mode.

Actual result

They are applied to the reading view of the page preview, but not when I activate the edit mode by clicking on the preview.

Environment

SYSTEM INFO:
Obsidian version: v1.8.7
Installer version: v1.8.4
Operating system: Darwin Kernel Version 24.3.0: Thu Jan 2 20:23:36 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T8112 24.3.0
Login status: logged in
Language: en
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 2
Restricted mode: off
Plugins installed: 1
Plugins enabled: 0

RECOMMENDATIONS:
Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.

2

I’ve moved this to Custom CSS & Theme Design for now

Whether this is a bug or CSS help, it would make sense to share the CSS code you’re trying to use, including the cssclasses property you have set, so people can help you, or so a bug can be reproduced and verified.

1 Like
3

For example, using this CSS:

.dark-note-rises {
    background-color: rgba(68, 68, 38);
    --text-normal: rgb(209,209,209);
    color: var(--text-normal);
    --metadata-input-text-color: limegreen;
    --h1-color: salmon;
}

and dark-note-rises as a cssclass in a note, I can see the behavior.

vivaldi_fENkJdDc5j

Editing in Page preview popups is fairly recent, so this many not be implemented yet.

Not the same issue (I don’t think), but there’s a semi-related feature request here: