Canvas: add more color options AND separate color sets for different canvases

[v.khatuntsevv]

hi, i just discovered canvas for myself which is a life savior since i was using a separate site for mind-maps, and now i know that i can do it even better in obsidian. but the thing is:

1. color picker sucks. like really. really. sucks. sure, it’s fine on PC, you can still switch between HSL, RGB and HEX, but on mobile devices which i constantly use, it’s only HSL. without even definite numbers – just a slider which is very unspecific for me since i have specified certain colors for myself.
2. and then i understood that i am limited to custom colors choice. like i’m getting only 6 of them, but i want more! especially when in some point of time in future i will have more canvas with other different colors to apply, and picking a color out of this set is much easier than color picking

What I’m trying to do

firstly, i want to increase the number of colors i can choose from here:

secondly, as you can see, i have a certain set of colors here: green, turqoise, cyan, aqua, etc. what i would want to have is to have these sets different depending on canvas. for example, one canvas has shades of green; the other one has shades of red depending on i dunno, tag? cssclasses if it’s even possible to apply for the whole canvas?

Things I have tried

tried adding another .mod-canvas-color-7 – does not work this way

for separate canvases with separate colors i literally don’t know how to do it

i assume it can be somehow done with css style, but i suck at it and i do not understand how to do that

[v.khatuntsevv]

to anyone wondering:
i did not solve point 1. still don’t know how to add more colors
but i solved point 2. Canvas CSS class solved it for me. Install the plugin, see how it works in Discussions - Plan on github. in order to make your own colors just do this:

/* css class for canvas, let it be red-colors */

.red-colors {
  .mod-canvas-color-1 {
    --canvas-color: 255, 50, 20;
  }
  .mod-canvas-color-2 {
    --canvas-color: 255, 20, 50;
  }
}

up to 6 .mod-canvas-colors. again, no clue how to add more

[v.khatuntsevv]

alright, folks, i got it

1. How to increase the number of colors?
Answer: Advanced Canvas. Install it, i already linked you a paragraph which states how to add your colors. works fine for me (important note: you can add 7+ colors with this plugins, but not change the existing 6. to change existing 6, you need to change .mod-canvas-color-1-6 in whatever the file is (i dunno im not css specialist sorry, buuuuuuuuuuut! next question)
2. How to have different sets of colors for different canvases?
Answer: Canvas CSS class
More specifically: Explaination. here you can see how to apply css-classes to your canvas.

alright, so, i got it alright – but i got it separately from each other. :root thingy in Advanced Canvas works differently, as far as i understood, it’s overweighting css class, so no change or add color. but the answer is pretty simple as i got it

0. you better make a separate css file for all these machinations with css canvas lmao
1. you need to add more colors:

:root {
--canvas-color-7: 255, 60, 20;
--canvas-color-8: 255, 20, 60
}

good! we added 2 more colors, 7th and 8th one (to my understanding you can add a lot of them if you wish)
2. change the colors for different css class
alright, so. you go do the thing i linked in 2. More specifically. then you add css-class:

/* css class for canvas, let it be red-colors */

.red-colors {
  .mod-canvas-color-1 {
    --canvas-color: 255, 50, 20;
  }
  ...
  .mod-canvas-color-6 {
    --canvas-color: 255, 20, 50;
  }
  --canvas-color-7: 255, 90, 30;
}

and that’s the whole trick. since you already added more colors BEFORE that with :root, now you can simply just change the values you yourself set, and they will apply for cssclass

full file looks smth like this:

:root {
.mod-canvas-color-1 {
  --canvas-color: 255, 255, 255;
}
.mod-canvas-color-2 {
  --canvas-color: 0, 0, 0;
}
--canvas-color-7: 119, 119, 119;
--canvas-color-8: 119, 119, 119;
}

/* blues */

.blues {
.mod-canvas-color-1 {
  --canvas-color: 0, 127, 255;
}
.mod-canvas-color-2 {
  --canvas-color: 0, 31, 127;
}
--canvas-color-7: 32, 41, 183;
--canvas-color-8: 18, 67, 219;
}

ta-daaa! this is nutz.

dm if have questions