How to make custom frames switch Light mode or Dark mode automatically?

[FeiLZX3Km]

How to make custom frames switch Light mode or Dark mode automatically?

[vivimage]

+1. Also looking for this feature to be implemented

[BrightStar219]

+1 too.

Google Calendar: Replaced the original CSS with this one (stupid hack), and managed to get it in dark mode. html { -webkit-filter: invert(90%) hue-rotate(180deg)!important; filter: invert(90%) hue-rotate(180deg)!important; background: rgb(25, 25, 25)!important; }

[joshuadanpeterson]

Nice! @BrightStar219 I modified it into a slightly more refined version that also keeps the images and videos in their original colors:

/* Apply the dark filter and background to the HTML and specific divs, set text to white */
html, .view-content.custom-frames-view, .workspace-leaf.mod-active {
  -webkit-filter: invert(90%) hue-rotate(180deg) !important;
  filter: invert(90%) hue-rotate(180deg) !important;
  background: rgb(25, 25, 25) !important;
  color: var(--text-white) !important;
}

/* Reset filters for images and other elements you don't want to be affected */
img, video {
  -webkit-filter: invert(100%) hue-rotate(-180deg) !important;
  filter: invert(100%) hue-rotate(-180deg) !important;
}

This should give you the dark mode feel without messing up your images or videos. Cheers! 🌙

Edit: Nvm, it kept the images the same but messed up the video. Need to work on that, but that'll come later

[renierseric]

Hi guys i want to implement this (the dark mode for, custom frames plugin) but i have no idea what files where and what to change. I'm not a coder I'm just an animator. pls help, the white background is burning my eyes.

[joshuadanpeterson]

@renierseric You have to go to the Custom Frames settings, and then click on the Show Settings button of the Frame you want to implement dark mode. Scroll down to where it says "Additional CSS" and paste the code in there. Then you have to restart Obsidian for the changes to be applied.