Style Settings Plugin

[mgmeyers]

Greetings everyone!

I’d like to introduce a new plugin I’ve been working on called Style Settings. This plugin was inspired by the Minimal Theme and California Coast settings plugins. It allows theme authors and every day users to easily tweak CSS variables via Obsidian settings. My hope is that this can eventually replace theme specific plugins.

This plugin allows snippet, theme, and plugin CSS files to define a dynamic set of configuration options. It then allows users to see all of the tweakable settings in one settings pane. It allows both toggling classes on and off the body element, as well as setting numeric, string, and color CSS variables. For example, say I wanted to tweak Obsidian’s default font, default text color, and accent text color. I could do so by adding this to a CSS snippet:

/* @settings

name: Font Overrides
id: font-overrides
settings:
    - 
        id: default-font
        title: Base Font
        type: variable-text
        default: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif'
    - 
        id: text-normal
        title: Base Font Color
        type: variable-color
        format: hex
        default: '#2e3338'
    - 
        id: text-accent
        title: Accent Font Color
        type: variable-color
        format: hex
        default: '#705dcf'
    - 
        id: text-accent-hover
        title: Accent Hover Color
        type: variable-color
        format: hex
        default: '#7a6ae6'

*/

The Style Settings plugin will then convert this into a list of tweakable settings:

To see a more details on how this works and how to define settings, see the github repo here: GitHub - mgmeyers/obsidian-style-settings

Please report any bugs or issues here: Issues · mgmeyers/obsidian-style-settings · GitHub

[janpeeters]

I guess that some sort of repository for code snippets, that users in the community create and care to share, for changes to a specific theme would come in handy.

[Felipe]

I’m sorry for my dumb question. Newbie here. I’m using ITS Theme integrated with Style Settings plug-in.

I don’t know how to change the TEXT FONT

How to interact with the text box? [Inter, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’, ‘Microsoft YaHei Light’, sans-serif]

I can’t read what this font names mean.

I’m glad if someone could help me.

[mgmeyers]

Hey @Felipe. Not sure exactly what you mean, but you can interact with the text box like any other.

The big list you see is called a “font stack”, so if Inter isn’t installed on a user’s computer, it will check for -apple-system, then BlinkMacSystemFont, and so on…

But you only really need the name of one font in there.

Here I click into it, hit cmd+a to select all the text and replace it with Lora

[Felipe]

Hello @mgmeyers. Thank you very much. That’s exactly what I was asking!

I was afraid to change and destroy Obsidian.

By the way, thank you for this Plug-in. I am facing some monitor issues and be able to change the interface without coding is something vital to me.

[janpeeters]

I’ve noticed that if I set colours for headers (after adding them as a setting through the CSS @settings comment) they are only visible in Preview mode and not in Edit mode. Is there a way to also have the colours in Edit mode?
Thanks for suggestions how to achieve this.

[mgmeyers]

Hey @janpeeters, this was an issue with California Coast. Download the theme again and it should be fixed!

[amarionette]

This would be perfect as a CSS Snippet Store for users to fetch and use community snippets, much like we can already do for plugins and themes! Would love to see such functionality in the future.

[mgmeyers]

v0.1.0 Has been released!

This isn’t a major update, but does add a useful feature: collapsable sections:

[mgmeyers]

v0.2.0 Has been released!

• Allows color values to be input in rgb or hex format
• Adds ability to reset an entire section of settings

• Major performance improvements

[mgmeyers]

Also: this CSS snippet can be used to tweak every CSS variable of the default Obsidian theme: obsidian-style-settings/obsidian-default-theme.css at main · mgmeyers/obsidian-style-settings · GitHub

[Klaas]

I have Style Settings installed, but not your theme, and I have the snippet in the snippets folder. The snippet does not show up in SS. Does it only work with your theme or Minimal?

[mgmeyers]

Just to double check, is the snippet activated?

In theory, that’s all you should need to see this in Style Settings (dropdown is collapsed by default):

Maybe double check that the plugin is up to date, just in case.

[Klaas]

@mgmeyers: I had forgotten to enable the plug-in. I then refreshed Obs, but it it still does not show up in SS, which I have the latest version of: 0.2.1.

[mgmeyers]

Hmm, strange. Are there any errors in the javascript console?

[Klaas]

@mgmeyers: it’s sorted. I deleted the snippet, then put it back, and that did the trick. Thanks for your help and apologies for having bothered you

[mgmeyers]

Weird! Well, glad it’s working!

[janpeeters]

Note: Edited this post heavily due to new insights

Hi @mgmeyers I had the same problem as @Klaas. I was using the Panic Nova code editor to copy the code into a CSS file (in general a really nice editor) and it didn’t work. I tried the same with BBEdit and then it did I have no clue what might have caused the problem though.

Thanks for creating this settings file, must have been a laborious work.

I was wondering, are you also considering doing this for all variables in your own Theme?

[Daveb08]

Just tried to install on Mac with Minimal Theme. No options appeared. Please attached screen grab.

[mgmeyers]

Hmm, thanks for the info. I’ll investigate! I know that YAML is sensitive to indentation getting misaligned, but a copy/paste shouldn’t be an issue