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:
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.
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]
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
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.
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.
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: 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.
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?
