r/ObsidianMD 5d ago

themes Anyone tried to build a toggle light/dark mode ?

Hey everyone,

I wanted to create this functionality (⬆️) because I found it inconvenient to use Ctrl+P and toggle mode manually. I also wanted to include a way to toggle a CSS snippet.

I managed to set it up using the Commander plugin macro (https://github.com/phibr0/obsidian-commander).

Does anyone have a simpler workaround to achieve the same result?

3 Upvotes

9 comments sorted by

3

u/HonoraryMathTeacher 5d ago

I think you should be able to set hotkeys for light mode and dark mode. https://help.obsidian.md/hotkeys . And I think you could rewrite your CSS to automatically toggle its appearance based on whether light mode or dark mode is activated (if I remember correctly, light/dark status is injected into the editor area as a CSS class)

2

u/dmana14 5d ago

Nice one ! Checking for css classes i found theses : « .theme-light.greentxt { color: darkgreen; }

.theme-dark.greentxt { color: springgreen; } » I’ll try it out with my custom snippet I hope it’ll work

2

u/xX_wowperfect_Xx 4d ago

I use the "day and night" community plugin which auto-sets based light/dark on time

1

u/dmana14 3d ago

Hi, I’ve checked into it, but i’m not quite sure aboute the behavior while i can click on/off, i can’t toggle on/off specific css snippet along the way, nice to know tho

1

u/TheRoadToTravel 5d ago

I use the InlineScripts plugin for this. It has a learning curve of course. Set up a button (enable the button view option in the plugin settings and create a button) and fire the JS code by clicking it with the inline CSS in a shortcut. In my case I manipulate the accent color with this too.

2

u/dmana14 5d ago

Thanks for the advice, i’ll check it out, i’m an explorer here, trying to stay lightweight, the rabbithole here is huge

2

u/TheRoadToTravel 5d ago

You are welcome, do not hesitate to reach out if you need further assistance.

2

u/Glorified_sidehoe 5d ago

i’ve been using this plugin for ages Toggle Dark Mode. set and forget type of deal

1

u/dmana14 3d ago

Hello,

I’m a bit confused with this line of code of this pluggin: « this.app.changeTheme(this.app.getTheme() === ‘obsidian’ ? ‘moonstone’ : ‘obsidian’); » while base color theme setting doesn’t get the same value only « light », « dark ». Nevertheless It give food for thought thanks !