Add more details to customization steps

[mbbroberg]

What is your request / issue?

As a novice to s/css, I can't figure out what of the examples in this wiki page apply to creating the css snippet necessary to customize.

Describe the solution you'd like
I've created the following file (see below), changed the setting to custom, but don't see an error message and don't see anything changing.

Describe alternatives you've considered
I searched quite a bit to find someone else having a snippet that already works but didn't find one.

Additional context

/* Solarized light theme */
.theme-light.pt-color-scheme-custom-lt {
    --color-grey-base-hsl: 0, 0%, 90%;
    --color-red-base-hsl: 7, 90%, 92%;
    --color-orange-base-hsl: 26, 85%, 89%;
    --color-yellow-base-hsl: 42, 88%, 83%;
    --color-green-base-hsl: 101, 49%, 85%;
    --color-mint-base-hsl: 152, 62%, 85%;
    --color-cyan-base-hsl: 184, 60%, 85%;
    --color-blue-base-hsl: 217, 76%, 92%;
    --color-purple-base-hsl: 251, 87%, 94%;
    --color-pink-base-hsl: 328, 79%, 93%;
    --shadow-color-hsl: 0, 0%, 0%;
    --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0;
    --shadow-l: hsla(var(--shadow-color-hsl), 3%) 0 1px 2px, hsla(var(--shadow-color-hsl), 3%) 0 2px 4px, hsla(var(--shadow-color-hsl), 3%) 0 4px 8px, hsla(var(--shadow-color-hsl), 3%) 0 6px 12px;
}

/* Solarized dark theme */
.theme-dark.pt-color-scheme-custom-dt {
    --color-grey-base-hsl: 0, 0%, 16%;
    --color-red-base-hsl: 2, 55%, 19%;
    --color-orange-base-hsl: 26, 65%, 15%;
    --color-yellow-base-hsl: 43, 73%, 12%;
    --color-green-base-hsl: 124, 54%, 12%;
    --color-mint-base-hsl: 165, 88%, 10%;
    --color-cyan-base-hsl: 195, 65%, 13%;
    --color-blue-base-hsl: 225, 50%, 20%;
    --color-purple-base-hsl: 271, 48%, 21%;
    --color-pink-base-hsl: 325, 55%, 18%;
    --shadow-color-hsl: 0, 0%, 0%;
    --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0;
    --shadow-l: hsla(var(--shadow-color-hsl), 3%) 0 1px 2px, hsla(var(--shadow-color-hsl), 3%) 0 2px 4px, hsla(var(--shadow-color-hsl), 3%) 0 4px 8px, hsla(var(--shadow-color-hsl), 3%) 0 6px 12px;
}

[damiankorcz]

Hi @mbbroberg,
Just to confirm, you have created a CSS snippet file and enabled it in your vault?

The snippet you posted appears to be taking variable values from the Bird Colour Scheme - Swan / Raven example. hence why you probably don't see a difference.

By default the Custom option uses those colours to prevent issues such as this one: #158

The custom colour scheme then functions as an override for those values once selected as the colour scheme in Prism's Style Settings.

To create a full colour scheme you will want to use all variables that are in the examples and change each colour to your liking. As described in the examples each variable contains a HSL colour value in a format of each value being comma separated. Depending on if you are creating a colour scheme from scratch or adapting an existing one, unless provided, you will have to convert the colour values to HSL, grab only the values and paste them into the variable you want to change.

[mbbroberg]

@damiankorcz thank you for the guidance! I'm sure this level of detail in the wiki would help others as well, especially extending the example.

Just to confirm, you have created a CSS snippet file and enabled it in your vault?

Yes, I have.

[mbbroberg]

The custom colour scheme then functions as an override for those values once selected as the colour scheme in Prism's Style Settings.

What are those values specifically? I'm looking around and can't put my finger on what it's specifically looking for.

My goal is to implement the minimal solarized color scheme but it's not working so far

[damiankorcz]

Colour Schemes aren't 1:1 between themes unless they have strictly only used variables which Obsidian provides. In Prism's case it's a mix of Prism specific ones and Obsidian ones with the colours being split into 3 distinct shades as described as well as in HSL format.

I've started porting this for you. I'll update you when I'm done and try to explain the process since it's a little tricky especially with a color pallete that doesn't have all the shades and colours to fill all fields for Prism; will basically have to eyeball and improvise to get a good fit. This is also one of the main reasons why I roll my own colours from scratch for all Prism colour schemes.

[mbbroberg]

@damiankorcz thank you for explaining! Please don't feel like you have to do it all unless it's helpful to fleshing out the wiki/where you want the project to go. I care more about your well-being as a maintainer than any feature I'm interested in :)

[damiankorcz]

Hi @mbbroberg,
Right I've ported Solarized and will likely provide support for it in a similar capacity I do with the current CSS snippets. I'll try and flesh out some more details in the wiki for the process I go through and things to look out for when porting existing color pallets.

You can grab the snippet below and put it in your vault's snippet folder. Enable the snippet in Obsidian and set Light and Dark colour schemes to custom in Style Settings.

https://github.com/damiankorcz/Prism-Theme/blob/main/src/snippets/Prism%20Custom%20Ported%20Color%20Schemes/Prism%20Custom%20Color%20Scheme%20-%20Solarized.css

I kept all original colours as-is and added anything that was missing trying to match it as best as I could. Let me know how it feels!

Screenshots:

P.S. Don't worry! I only work on Prism when I feel like it. I've managed burnout quite well so far 😅 Approaching 3 years of maintaining it in a few months 👀