Adapt light/dark mode to system easier to toggl

Use case or problem

When I use dark/light mode command. I can’t revert to adapt to system from the command palette, I have to do it manually from the settings.

Proposed solution

  1. Either have dark and light mode commands not permanent and leave it to adapt to system at all time (because I’m only using them to test something)
  2. Or add another command option for adapt to system

Current workaround (optional)

Go to settings, appearance tab and change it to adapt to system with mouse.

2 Likes

The asymmetry of a command that you can’t undo with another command from the command palette is really inconvenient.
This would make testing out themes and reverting to my base settings way easier.
If there was a command you could even assign a hotkey to it.

1 Like
  1. Create a Templater template:
<%*
app.adaptToSystemTheme()
%>
  1. Assign it to a hotkey.
1 Like

Tried it, did not change the settings in appearance to adapt to system

It changes the visual theme to adapt to the system theme. If you don’t believe me, change to either Light or Dark, whatever your system theme is not, and then run the command.

If you want to also change the setting in the dropdown menu in the config for whatever reason, then you’ll have to find the command to save the config.

Alright, I’ll search for the command to save the config, thanks.

I would like the dropdown to reflect the change too, and more importantly save the change to disk, which this code doesn’t do. Right now, the changes get lost on an app reload and don’t show up in version control.
I haven’t used Templater before, but to me it looks like it needs an active file, so I can’t use the command with no files open. I also haven’t found a way to use it directly from the command palette. Having to type the Templater command and then the template’s name is not really more convenient than going into the menu.

What was Step 2 in my original message?

I had read your message. My primary use is not as a hotkey, but as a command.
I had just made four points on why I find this solution lacking for me. I appreciate your help though.
As a more experienced Templater user, do you know workarounds for the things I brought up, other than a hotkey?

You can’t execute templater scripts if there is no active file. However, you can add the scripts to the command palette in templater plugin setings under template hotkeys.

I was just going based off this:

If there was a command you could even assign a hotkey to it.

Anything you assign a hotkey to in Templater becomes available in the command palette:

Of course if you don’t like Templater you can use any other solution that lets you run arbitrary Javascript. CustomJS, Dataview, etc etc.

1 Like

I found the User Plugins best suited for this.
I also found the way to save the setting to disk (persist). But for my use case, I only wanted it to save so that I go back to system every time. So I made all the variants for commands that don’t save (that are transient) too, if someone also finds them useful.

const adaptToSystem = 'system';
const light = 'moonstone';
const dark = 'obsidian';

// transient
plugin.addCommand({
  id: 'use-light-transient',
  name: 'Use light mode (transient)',
  callback: () => {
    app.updateTheme(light);
  },
});
plugin.addCommand({
  id: 'use-dark-transient',
  name: 'Use dark mode (transient)',
  callback: () => {
    app.updateTheme(dark);
  },
});
plugin.addCommand({
  id: 'use-adapt-to-system-transient',
  name: 'Use Adapt to system mode (transient)',
  callback: () => {
    // app.updateTheme(adaptToSystem); // doesn't work
    app.adaptToSystemTheme();
  },
});

// persisted
plugin.addCommand({
  id: 'use-light-persisted',
  name: 'Use light mode (persisted)',
  callback: () => {
    app.changeTheme(light);
  },
});
plugin.addCommand({
  id: 'use-dark-persisted',
  name: 'Use dark mode (persisted)',
  callback: () => {
    app.changeTheme(dark);
  },
});
plugin.addCommand({
  id: 'use-adapt-to-system-persisted',
  name: 'Use Adapt to system mode (persisted)',
  callback: () => {
    app.changeTheme(adaptToSystem);
  },
});