mgmeyers / obsidian-style-settings Goto Github PK
View Code? Open in Web Editor NEWA dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian
License: GNU General Public License v3.0
A dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian
License: GNU General Public License v3.0
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
class-toggle
doesn't allow a default value
This would require adding more formats:
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.
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.
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.
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 @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.
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
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; }
@mgmeyers Hi, this plug-in doesn't support Translucent window, can you fix it?
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",
}
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.
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 :/
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.
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?
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
It seems that percent %
is not a valid value for format
on variable-number
and variable-number-slider
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.
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!
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)
-
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?
I wrote a snippet to change graph view with Style settings, but I don't seem to work without reload.
Here is the snippet : https://gist.github.com/Mara-Li/bbda99650f3db6a5f5068309f6806fa8
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 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.
I think there are some "setting"-types that would be super useful to have:
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.)
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.
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, 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.
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.
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
It will be good to have, for the variable toggle, a way to disable a class and enable another.
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.
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.
The settings page can get super long, and will probably only grow over time.
Some ideas:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.