mgmeyers / obsidian-style-settings Goto Github PK

After adding my own settings to style settings they appeared as expected but - I had to save the preset colors one by one by myself to apply them - a button to apply all custom css settings in one shot would be useful

Also, the button reload on my custom settings css should reload my own settings as defaults and not - obsidians default settings (I deactivated themes because I like to keep configurations clean)
Not to be ungrateful, but this behavior confused me

Currently it seems not possible to style headers...

id: h1
title: header 1
description: font for header 1
type: variable-text
default: '-apple-system, Arial-BoldMT' 

I checked your style.css template but couldn't find any info in it how to modify headers

I was mostly thinking of having a drop down of different saved configurations of every Style Setting you've changed for those using the plugin

Hi,

I want to make some changes to the current style but I am getting this message. Kindly suggest what needs to be done.

I wrote a snippet to change graph view with Style settings, but I don't seem to work without reload.

I have this in console :

Here is the snippet : https://gist.github.com/Mara-Li/bbda99650f3db6a5f5068309f6806fa8

In the ITS theme, the option to centre the headings with lines on either side puts the heading on the right instead of centre. Would really like this option to work, a solution to this bug will be much appreciated. I have attached the video that shows this. I am on 0.12.13 insider build.

I was thinking that it might be useful to add a way to add extra settings in default theme @settings. E.g. one might want to add a color setting for body text or character spacing to the headers section.

My first thinking was to just copy all settings from the theme, paste it in a custom CSS snippet, add the extra settings and delete the default @settings in the theme. But then theme updates would break things.

So is there a way to deactivate the default @settings or inject settings in the theme CSS to keep settings organized?

Currently, new settings will end up at the bottom of the settings plugin instead of where they would best fit.
There might be better ideas how to do this, so my suggestion is just meant to start the dialogue about it.

PLEASE make a search bar so that we can find the necessary settings, i have too many options due to the plugins now using style settings lol

Hi @mgmeyers,
I've encountered the same issue as #29 but this time with HSL-Values instead of HSL-Split.

The settings page can get super long, and will probably only grow over time.

Some ideas:

• Collapsable sections
• Dropdown for each config

due to the appearing/disappearing scrollbar, the pane content unnecessarily gets indented at the right and back. Only a minor thing, but I haven't found out how to fix it myself :/

Hi @mgmeyers,
I've encountered an issue with the HSL Split when selecting pure white and pure black values (including shades in between). The Hue returns NaN making it unusable. It's quite strange since choosing anything that only just increases the Saturation fixes the Hue value. I'm unsure if this could be fixed by clamping the values or something along those lines.

Example for pure white:

Example for pure black:

This would require adding more formats:

• hexa
• rgba
• rgba-values
• rgba-split
• hsla
• hsla-values
• hsla-split

This would work similarly to variable-toggle except allow you to switch between 3 or more different values that are not compatible with each other.

When I try to change or import from settings some color, I have :

File :

{
    "icons color@@F60@@light": "#A88282",
    "icons color@@F60@@dark": "#5778BA",
    "nested@@bg60@@dark": "#3B4FAC2C",
    "nested@@bg80@@light": "#6F569A2C",
    "nested@@bg80@@dark": "#A882822C",
    "icons color@@F50@@light": "#3B87AC",
    "icons color@@F50@@dark": "#3B87AC",
    "nested@@bg50@@light": "#3B87AC2C",
    "nested@@bg50@@dark": "#3B87AC2C",
    "nested@@bg60@@light": "#A882822C",
    "icons color@@F40@@light": "#327CCA",
    "icons color@@F40@@dark": "#327CCA",
    "nested@@bg40@@light": "#327CCA2C",
    "nested@@bg40@@dark": "#327CCA2C",
    "icons color@@F80@@light": "#899A56",
    "icons color@@F80@@dark": "#A88282",
    "icons color@@FZZ@@dark": "#98727D",
    "nested@@bgZZ@@dark": "#98727D2C",
}

Many people use both, light and dark mode by switching between them depending on the time of the day.

For those people, it might be useful to have a switch in the Style Settings tab, to see how their settings affect the mode they are currently not using.

When the color picker dialog gets toggled, it would be great if the cursor jumped right to the box, it would speed up copying and pasting the same code a bunch of times

class-toggle doesn't allow a default value

Hey there @mgmeyers !! Thank you so much for building the Style Settings plugin - it has really helped theme developers offer more for their users! The only problem I have with it is that I am slightly unsatisfied with the current color picker because it lacks HSL. It gets the job done but in my opinion, when one knows how to use HSL, can tackle on picking colors better.

My suggestion: Consider replacing the current color picker (I think it is vanilla picker js if I am not mistaken?) with iro.js as the color picker. It can handle HEX, RGB, HSL/HSLA spaces.

What do you think?

Change the theme and it will be normal，

Can I get an example of how this is meant to be used?

From the readme

class-select creates a dropdown of predefined options for a CSS variable. The id of the setting will be used as the variable name.

With the example given using these as options

id: theme-variant
# ...
options:
    - my-class
    - my-other-class
    - and-yet-another

It seems as if class-select is meant to be a dropdown that lets you pick a class for a css variable, but AFAIK you can't do anything with a classname(so text) set to a css variable. Stuff like blockquote[class=var(--theme-variant)] doesn't work, so I'm confused of how we're supposed to use this option.

Being able to pick a class(which then sets stuff via css) for an element sounds cool, but I'm idk how its supposed to work.

Proposed enhancement

The style settings plugin is awesome, however, it has one fatal flaw. You need to navigate to settings, style settings plugin, open the corresponding dropdowns, and choose your settings. A very long and laborious task to say the least.

Ok maybe it's not as laborious as I make it sound, especially since most settings will be set once and never touched again. However, this process restricts some pretty interesting use cases.

For instance, I have a theme that uses Andy's sliding panes. The option to allow panels to stack is awesome and can be very helpful in viewing in fullscreen mode and looking over notes (as seen below).

But if I snap obsidian to use half my computer screen try to edit 2 pages side by side you can see there isn't enough space to fully see both screens. Very frustrating.

In these scenarios, it makes sense to go into the style settings and temporarily disable the stacking panes option. This will cause the pages to perfectly fit side by side when obsidian is snapped to half my screens resolution.

As you can see this sort of setting isn't a one-and-done sort of thing. I'll constantly be flicking it on and off. So the process listed above is way too long to be a workable solution.

TLDR: We need a quicker way to change certain options. If changing a specific setting was 1 click away it could open up the doors to a lot of cool things. It could also help speed up the sometimes tedious process of going back and forth opening settings panel, changing settings, backing out to see if the settings are ok, not liking your changes, and repeating the process again and again.

I have 2 proposed solutions.

Solution 1
The Ideal solution is to have the settings also be available in it's own pane/page/window that can be dragged around like any other page (A quickSettings panel). Then the pane would be filled only with the settings specifically chosen by the developer and user. So for example, I'm thinking you could add a quickSettings option which when set to true will indicate that that option should be displayed in the quickSetting page.

id: Enable-Stacked-Panes
        title: Enable Stacked Panes
        description: Enable to allow panes/pages to stack side by side
        type: class-select
        allowEmpty: false
        quickSetting: true
        default: stackedPanes
        options:
            - 
                label: Enabled
                value: stackedPanes
            - 
                label: Disabled
                value: 

This is how a theme developer could choose what settings should be in the quickSettings panel by default. But It would be great if the user could go into the settings and click an add to quickSettings button. This way if there is some random setting they change often then they'll be able to also add it to the list.

Solution 2
Very similar except instead of having dev and user pick desired settings you instead literally just take all options and place it into the quickSettings menu. This way would be more cluttered with settings that probably aren't as relevant in day to day use but would still make changing settings a lot quicker.

Use case: Supercharged links likes to prepend emojis. I want users to set those from Style Settings. However, this isn't currently possible. When using variable-text, and the following snippet:

.data-link-icon[data-link-category="people"  i]::before {
   content: var(--before);
}

then when Style Settings sets the --before variable to "some string", it is added like content: some string; But this is not parsed as a string! Instead, I would like it to be content: 'some string';.

This could be achieved by adding an optional quotes parameter.

I'm creating Style Settings within my plugin's styles.css and they do not appear to render within the Style Settings pane on app load. The only way to get them to show up is to make a change that triggers CSS change.

After figuring that out, I added this to my onload and that fixed the problem this.app.workspace.trigger("css-change");

This may be an order of operations issue as I do see that you also call this.app.workspace.trigger("css-change"); within your plugin.

Not many plugins are using Style Settings yet but I do see the same behavior with the Buttons plugin.

Hi,

Thanks for the plugin. I was trying to sync my theme settings from desktop (Windows) to the mobile (Android) app and since I couldn't figure it out automatically, I tried to use the export to file on my desktop to then import that file in the app. Every time I try to hit "Import from file" in the Style Settings Import menu for the theme, the app crashes.

I ended up copy-pasting my theme settings to get it to work but wanted to mention the bug as its consistent.

Thanks!

Hi @mgmeyers
I like your plugins very much. You have made plugins which I imagined. Many of these I wished existed. And you made them.

I had another similar idea. Is a code injecting plugin possible?

What it may do:

• It should be able to add .js scripts in Obsidian.
• it should be able to swap or add class names in HTML elements.
• it should be able to add id to html elements.
• it should be able to add/remove html elements.

Why such plugin

• to add CSS frameworks.
• to add js for styling.
• to add html or delete html elements.

Do ping me if you have doubts. Sorry I didn't get better place than this to reach you.
You may delete or close this issue if can continue the conversation in a new dedicated repository. Or at forum https://forum.obsidian.md/t/code-injector-plugin-inject-js-css-classes-in-html-elements/18813?u=viaahmed

How it'd work:

Style Settings Builder
What is your theme name? <user answers>
What is your theme id? <user answers>
Would you like to add variable --body-color as an option? <user answers>
<if yes> What kind of control do you want? Options are: slider, toggle, text box. <user answers>
<if slider> What are the limits? (Answer as "<floor>" "<ceiling>") <user answers>
--- do this for every variable
What hierarchy would you like? The available variables are: <list>. Answer like so: "<category name>, <optional sub-category name>" "<--variable1>", "<--variable2>" [...]
<user answers>

And it'd build the settings interactively, and make it more accessible and easy. I think it'd help with getting people to add Style Settings to their themes.

I think there are some "setting"-types that would be super useful to have:

1. simply info text. right now, the only "non-setting" you can add are headings. But sometimes, I want to add explanations for certain settings, that don't make sense in a heading or in the description of a certain setting.
2. Also, being able to enter a link would be awesome. For example: Link to a section of the readme where one can find further info / screenshots. Or a link to a CSS snippet. (an option could also be to add linking capability to the info-text type above.)
3. Many plugins add a Donation button to their settings page, which is a nice and unobtrusive place for that. How about providing themes the a method for doing the same?

It will be cool to add a display name for the variable-select, instead of the full content, something like:

    - 
        id: content-icon-transform
        title: Files icon translate
        type: variable-select
        default: translate(var(--icon-x), var(--icon-y))
        options-name: 
            - default
            - option1
        options-value: 
            - translate(-3px, 3px)
            -  translate(0px, 3px)
    - 

Changing body font size does not have any effect on both edit and preview mode.
Other values such as font line height right below take effect immediately.

I'm using California Coast theme by the way.

ʕ•́ᴥ•̀ʔっ Hello!!! Would it be possible to get a tooltip to show when hovering over a slider in Style Settings? (My mouse is hovering over the sliders in both images btw).

Currently it looks like this :

Could you please implement this feature in a future update? Thanks in advance!

For example, Yin and Yang does it this way :

Right now we have the option to do a variable selection but not for colors.

the option to create a color picker can be nice but in other circumstances, we may want the user to select from a dropdown of predefined colors and use the chosen color as a variable.

Furthermore, and in a similar vein, It would be really great to be able to have the option to create a color variable selection that will create multiple variables depending on the choice.

The main use case for this would be setting up alternative premade theme colors. So I could choose theme 1 or 2 from a dropdown and multiple color variables will be replaced with unique colors depending on the theme chosen.

Hi, this issue was reported originally in obsidian-california-coast-theme repo.
mgmeyers/obsidian-california-coast-theme#61

I came across the same problem while using "California Coast Obsidian Theme" and it seems the issue might be caused by the Style Settings plugin / "Seamless Embed" feature.

If it's turned ON, scrolling within page preview will break. Turning it OFF fixes the problem.

Feature turned ON

Feature turned OFF

It seems that percent % is not a valid value for format on variable-number and variable-number-slider

I am confused by the setup guide. Based on my reading, I'm supposed to go to .obsidian/plugins/obsidia-style-settings and eddit the styles CSS folder. I did this:

but when I go back to the app:

Maybe there could be a styles.css.example file?

The font size remains same even after I change it. Or do I miss something?

@mgmeyers Hi, this plug-in doesn't support Translucent window, can you fix it?

Setting like this:

I'm thinking I might add an option to the variable-color config for light/dark mode options. I'm thinking, when it's turned on, it'll display two color pickers side-by-side for that setting.

I great feature I could imagine is toggling selected class-toggles via a command/hotkey. For example, one could add a add-command key to the yaml:

id: my-css-class
title: My Toggle
description: Adds my-css-class to the body element
type: class-toggle
add-command: true

When set to true, it will register a command that enables toggling that specific class-toggle. This could be very useful for some features like a focus mode, changing readable line length, toggling between two sizes, etc.

It will be good to have, for the variable toggle, a way to disable a class and enable another.

Noticed this recently and was curious if this is an intentional behaviour. No real harm with it all there. Just curious.

Hi @mgmeyers,
I've encountered an issue with the text-variable. I'm trying to pass in a very long string (5k+ characters) into a text-variable. I can't quite figure out if it's a length issue or possibly the characters that are used. Trying the same string directly in the CSS or swapping it out in the DevTools works fine.

The main use case I want this for is to be able to set an image that is base64 encoded for icons and backgrounds; effectively making them work offline.

Here is an example of a string I'm trying to pass through:

Also on a side note, would it be possible to have a text box similar to one found in your Obsidian Icon Swapper plugin for a Text-Variable or another variant of the variable? Would really help with viewing and editing long strings such as the one above.

If a label is provided for class-select the description default should use the label text.

The description text shows that default is minimal-light but the dropdown is labeled Default. This could be confusing to users.

Example:

Is there any way to control the appearance/visibility of the title bar? I don't see it in the sample css file or in the settings for "Style Settings". I'm trying to get @jplattel's plugin to work with either Minimal or California Coast: https://github.com/jplattel/open-note-to-window-title, but both make the title bar invisible.

Use case as background: I sometime have different versions of a vault open, and it's useful to be able to see at a glance which one I'm in. (Also, with 6 leaves open in one vault, it's nice to see what the full title is of the focal leaf.)

Hi,

Thanks for the great plug-in. I found the example in your readme about the line-width, was looking for something like that. However, I am not seeing it working (maybe coz I use a theme?).

Need

• If the readme is wrong, hope there can be a fix.
• Else, if it is right, can you show some pointers on how to write a setting to adjust the max-width (possibly a different setting) as in the details I added under here?

I know it is a bit more than an Issue request, but because this was in the Readme so I feel somewhat justified to post this issue. Really want to use your plugin as it solves my exact pain point, just that I don't know how to make it to work in my usecase.

Thanks,
NA

Details
To be exact:

/* @settings
name: Your Section Name Here
id: a-unique-id
settings:
- 
id: line-width
title: Line width
description: The maximum line width in rem units
type: variable-number
default: 42
format: rem
*/

My other solution, a CSS snippets: (work in all theme, with the Readable line settings on).

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer, .markdown-source-view.is-readable-line-width .CodeMirror 
{ max-width:42rem; }