FR: Add Alternative Checkboxes toggle in Style Settings

[damiankorcz]

This request comes as part of the initiative I've started for Obsidian October 2024. Additional information and progress on this project can be found here: https://github.com/damiankorcz/Alternative-Checkboxes-Reference-Set

The current goal is to make it easier for users to implement their own CSS Snippets with Alternative Checkboxes, regardless of the theme they use. At the moment, any theme that doesn't present an option to disable their Alternative Checkboxes implementation, requires the snippet to overwrite the existing theme's code. This can become complicated and hard to maintain as currently 44 themes implement Alternative Checkboxes. Ideally, if all themes have the option to disable their implementation, the snippets can be simpler, and work universally across all themes.

If this is something you are interested in implementing, it would require the following code to be added to your theme:

body.enable-alternative-checkboxes {

/* Encapsulate all code relevant to Altenative Checkboxes here */

}

Add a toggle in the Style Settings code:

-
    id: enable-alternative-checkboxes
    title: Enable Alternative Checkboxes
    description: Disable this if you are using your own implementation via a CSS Snippet.
    default: true
    type: class-toggle
-

Since your theme already implements the feature, the code above enables it by default, in order to not change the existing functionality for users.

When the theme implementation is disabled, all additional checkboxes should be styled the same as the default - [x] checked checkbox; removing any changes to color, icons, fonts, backgrounds, etc.

If you need any help implementing this, let me know! I can also look into making a Pull Request if you would prefer.

[drbap]

Thank you for this thoughtful feature request.

One thing to consider: the code you provided to disable the theme checkbox implementation will not work on older versions of Obsidian. Correct me if I'm wrong, but this approach will only work if users have the Style Settings plugin installed. For users without Style Settings, they won't see any alternative checkbox (no .enable-alternative-checkboxes class added to body tag). So ideally, this functionality would also be backwards compatible.

Here are some possibilities to consider:

1. Use CSS selectors that work on older versions of Obsidian (without using CSS nesting) and that will work even without Style Settings plugin installed. For example:

   body:not(.disabled-alternative-checkboxes) selectors {
   /* alternative checkbox code for desired letter*/
   }

or

body:is(.enabled-alternative-checkboxes) selectors {
/* alternative checkbox code for desired letter*/
}

2. Themes with alternative checkboxes can provide a separate CSS file for their alternative checkboxes. This can give users more options. For example, a user can use theme A and alternative checkboxes from theme B.

Benefits:

• Backwards compatibility: users of older versions of Obsidian would not be affected.

• Use of separate CSS file for checkboxes. Themes with alt checkboxes will have a smaller file size. Faster to download/install.

• Developers will have less lines of code to maintain in their themes (by removing the code for alt checkboxes -> creating a specific css file for those checkboxes). The alternative checkboxes would be maintained in a different css file (added via CSS snippet by the user).

• Each theme developer can host this alt checkboxes css file in their theme repository (e.g. name_of_the_theme_alt_checkboxes.css). Users can then download and add the desired checkboxes to their Obsidian setup (theme + alt checkboxes).

Just a few suggestions, sorry if these have already been suggested. Just trying to help and good luck with your project/repository.

[!note] For the MagicUser theme, I will include the suggested functionality, which is backwards compatible with Obsidian. I hope to have this completed soon.

All the best

[damiankorcz]

Hi @drbap, Thanks for bringing forward some of your concerns.

1. In terms of CSS Nesting, the feature has been supported from Obsidian 1.3.7 if I remember correctly. That was released on 26/06/23 (the feature itself has been released with Chromium 112 / Electron v24.0.0) so I think it's safe to say we are ok to use it now and anyone on an installer version that old should update regardless. Although you can obviously prefix each selector independently if you prefer or if you use something like SASS then it's done for you.

2. This round of issues, I've specifically sent out to 24 themes which use Style Settings, so this implementation felt right. If you do want to support users that use your theme without Style Settings, then by all means you can invert the logic however seems appropriate. The main goal is to have an option to disable the Alternative Checkbox styling if a theme uses Style Settings.

3. There are 12 themes we identified that use Alternative Checkboxes but don't use Style Settings. For those ideally their implementation would be provided separately as a CSS snippet or alternatively, we did consider looking into getting those themes to use common, overwritable code. Still discussing how to approach all of that. I agree with all your points you outlined as benefits and they would apply for these themes specifically but would also make things easier for any theme wanting to have Alternative Checkboxes and allowing users the flexibility to use other CSS snippets.

4. The main reason for the feature toggle is so that we can get as many themes to a common ground (pretty much back to untouched default theme styling) and make CSS snippets a lot simpler to make and work universally. As I initially outlined, it becomes a bit of a mess when trying to cover all themes with a CSS reset type snippet. I did make one provisionally here: https://github.com/damiankorcz/Alternative-Checkboxes-Reference-Set/blob/main/.obsidian/snippets/Alternative%20Checkbox%20CSS%20Reset.css

Glad to hear you will implement this. Hopefully the above clears things up. Let me know if you need any help or want to know more.

[drbap]

@damiankorcz Please check theme version 20.9.0. Let me know if it is working as expected. You can disable alternative checkboxes using the Checklist menu (MagicUser -> Style Settings).

If it is working ok, you can close this issue. Congrats on the initiative and thanks for stopping by.

All the best

[damiankorcz]

Hi @drbap, Looks good to me. I'll close this now. If anything else pops up in regards to this I'll circle back. Thanks for doing this!

[drbap]

Sure. You are welcome. Just let me know. Thanks

All the best