Change Whiteboard theme only about logseq

[rpoovey]

Let me give it a shot and get back to you. Your approach is correct, we will have to style the whiteboard separately with frappe styles. But instead of defining the colors, we can use a more specific scope that targets the whiteboard and override the variables.

On a side note, I kind of like this requirement and can look into making this a separate setting of its own.

Thanks! I thought of this from not being able to use the --ctp-base color from Frappe on the whiteboard as a pencil/marker color because its the background...

Assuming you want to achieve something like in screenshot. In the current state of the theme, this will require some major tweaks to how whiteboard is currently themed as it is based on global light/dark theme selection. Will spend some time and if I can up with something feasible.

What you got in the screen shot is exactly what I was looking for! Well that and adjusting the color swatches, but thats another issue. hah. Well done on working that up so quickly. How could I assist in the rework of the css?

[rpoovey]

Oh man, that is a mess. Thanks for the description.

I did not know that about dev tools, that should make it easier to mess around.

Thanks again for your help here. I look forward to what can be done with styles once the Logseq team finishes implementing a proper design system. Until then, this will work just fine for my needs.

[griimick]

@rpoovey Currently the way themes are defined right now, you can only access one flavor at a time as they are defined as separate themes (selected via Theme settings in Logseq).

Let me give it a shot and get back to you. Your approach is correct, we will have to style the whiteboard separately with frappe styles. But instead of defining the colors, we can use a more specific scope that targets the whiteboard and override the variables.

On a side note, I kind of like this requirement and can look into making this a separate setting of its own.

[griimick]

Assuming you want to achieve something like in screenshot. In the current state of the theme, this will require some major tweaks to how whiteboard is currently themed as it is based on global light/dark theme selection. Will spend some time and if I can up with something feasible.

[griimick]

Thanks for confirming the requirement. I wouldn't recommend reworking on css for this theme right away because Logseq itself is rapidly tweaking styles in every release as they are implementing a proper design system. I would wait a few releases before we clean up the whiteboard styles.

I am sharing a custom css with you to get the screenshot styles which I jerry-rigged to meet the requirements. Just add the following line in your custom.css

@import url('https://gist.githubusercontent.com/griimick/7dc2dcdbffff4b14e38f2b61e2f5ada1/raw/336fb061d7f204060ad0890805d4ec3a5a0b1c6b/ctp-frappe.css')

[rpoovey]

@griimick Thank you so much! That all makes sense and this works for now.

Do you know off the top of your head the section that sets the colors in the color swatch picker?

I thought it was this section but thats not having any affect on the colors:

  --ctp-wb-background-color-gray: color-mix(in srgb, rgb(var(--ctp-gray)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-red: color-mix(in srgb, rgb(var(--ctp-red)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-yellow: color-mix(in srgb, rgb(var(--ctp-yellow)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-green: color-mix(in srgb, rgb(var(--ctp-green)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-blue: color-mix(in srgb, rgb(var(--ctp-blue)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-purple: color-mix(in srgb, rgb(var(--ctp-mauve)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-pink: color-mix(in srgb, rgb(var(--ctp-pink)), rgb(var(--ctp-base)) 60%);

If this is too much tweaking for you at this point I'll just deal. haha.

[griimick]

No worries, there are multiple definitions for different things in whiteboard which makes this confusing. An example why I say whiteboard styles need cleanup :)

/* Shape background color */
--ctp-wb-background-color-yellow: color-mix(in srgb, rgb(var(--ctp-yellow)), rgb(var(--ctp-base)) 60%);
/* Shape outline color */
--ctp-wb-stroke-color-yellow: rgb(var(--ctp-yellow));
/* Shape label color */
--ctp-wb-shape-label-color-yellow: rgb(var(--ctp-yellow));
/* Pen path color */
--ctp-wb-text-color-yellow: rgb(var(--ctp-yellow));
/* Color swatch color */
.bg-yellow-500 {
  background-color: rgb(var(--ctp-yellow));
}

Note changing the color for swatch will only change the color of the swatches themselves, you will have to tweak other related variables as well for swatch color changes to take affect for the required whiteboard tools.

In case you aren't aware of this, you can Toggle Developer Tools in your Logseq App and inspect the elements to see what styles or variables are used.

[griimick]

I just released a new version of the theme v0.6.0 which introduces setting light theme for whiteboard separately under theme settings. see #30 description. This means the jerry rigged external styles I shared above aren't required anymore.

You can now customize whiteboard color swatches just by overriding a few variables.

/* custom.css */
.whiteboard-page {
    --ctp-wb-color-gray: gray !important;
    --ctp-wb-color-red: red !important;
    --ctp-wb-color-yellow: yellow !important;
    --ctp-wb-color-green: green !important;
    --ctp-wb-color-blue: blue !important;
    --ctp-wb-color-purple: purple !important;
    --ctp-wb-color-pink: pink !important;
}

I am closing this issue now. Feel free to reopen this if you face any issues or create a new one. Thanks!