Toggle new macOS Tahoe native-like styling

Feature requests
1

Use case or problem

Obsidian version 1.11.4 Desktop or later on macOS has introduced styles that emulate the native environment. See the changelog notes for v1.11.4:

## Improvements
- ...
- macOS: Toggles and sliders are now styled to match their native counterparts.

It appears to mimic the new system appearance of macOS Tahoe, and looks out of place on macOS Sequoia and earlier. For those that are intentionally holding off on upgrading, or aren’t able to upgrade due to hardware limitations, this introduces a weird mismatch between the system UI, Obsidian’s supposedly native UI, and several themes/customizations meant for the (previous) default UI.
It seems impossible to opt-out of and disable this change, even on older versions of macOS.

Proposed solution

A toggle to disable the new style on macOS, or automatic disabling on older versions of macOS that don’t match the new look.
I’m not aware of any workarounds, but would appreciate help.

2

For workarounds, one or more people have posted CSS snippets on the forum that undo at least some of the changes. I don’t have the links handy at the moment, but you can use the forum search.

3

You can change the shape of the toggles with a CSS snippet.

This is an example of a theme I developed.

You would only need to replace the colors or shape with whatever you want.

/* Toggle Snippet */
body {
–toggle-track-radius: 0px !important;
–toggle-thumb-radius: 50% !important;
}

/* Light/Dark Mode Color Variables */
.theme-dark { --toggle-on-color: #448494; }
.theme-light { --toggle-on-color: #ff7700; }

/* The Toggle Track */
.checkbox-container {
width: 42px !important;
height: 22px !important;
border-radius: var(–toggle-track-radius) !important;
background: var(–text-faint) !important;
position: relative !important;
top: 0 !important;
border: 1px solid transparent !important;
box-sizing: border-box !important;
}

/* The Toggle Thumb /
.checkbox-container::after,
.checkbox-container:active::after {
content: “” !important;
display: block !important;
position: absolute !important;
width: 14px !important;
height: 14px !important;
border-radius: var(–toggle-thumb-radius) !important;
left: 3px !important; / Exact alignment from your theme /
margin: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important; / Initial vertical centering */
transition: transform 0.2s, background 0.2s !important;
background: var(–background-primary) !important;
box-shadow: none !important;
border: none !important;
}

/* Toggle ‘On’ State Track */
.checkbox-container.is-enabled {
background: var(–toggle-on-color) !important;
}

/* Toggle ‘On’ State Thumb Movement /
/ translate3d(X, Y, Z) - The -50% keeps it vertically centred during the move */
.checkbox-container.is-enabled::after,
.checkbox-container.is-enabled:active::after {
transform: translate3d(20px, -50%, 0) !important;
}
4

@CawlinTeffid I’ve tried searching the forum several times but wasn’t able to find any existing threads or solutions. It seems this issue hasn’t been addressed before.
I’ve compared an older binary with the current styles and these are the overrides needed to revert the toggles/checkboxes:

body {
  --toggle-radius: 18px !important;
  --toggle-width: 40px !important;
  --toggle-thumb-radius: 18px !important;
  --toggle-thumb-width: 18px !important;
  --toggle-thumb-height: 18px !important;
  --toggle-s-thumb-width: 18px !important;
  --toggle-s-thumb-height: 18px !important;
}

.checkbox-container::after {
  width: var(--toggle-thumb-width) !important;
  height: var(--toggle-thumb-height) !important;
  margin: var(--toggle-border-width) 0 0 0 !important;
}

Didn’t have the time yet to check the sliders, but I presume it’ll be mostly adjusting globals as well. Would be greatly appreciated if the Obsidian team could document these changes in more detail in their technical docs.
Thank you for your help!

5

On rereading your post I’m not sure if you’re looking to revert the new look generally or just the specific item mentioned in the changelog item you quoted. My answer is for the former; I don’t know for sure if the latter has been addressed.

I believe these are the 2 I was thinking of:

There is also: