Change Whiteboard theme only #25
Comments
|
@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. |
|
|
Thanks! I thought of this from not being able to use the
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? |
|
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 @import url('https://gist.githubusercontent.com/griimick/7dc2dcdbffff4b14e38f2b61e2f5ada1/raw/336fb061d7f204060ad0890805d4ec3a5a0b1c6b/ctp-frappe.css') |
|
@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. |
|
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. |
|
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. |
|
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! |
I'm struggling here to find all the areas specific to the whiteboard. What I would like to accomplish is Frappé all the journal pages, and Latte for the whiteboard. Basically so that I can have a "white" background in the whiteboard section.
Possible you can point me to the right areas? My current custom.css. I'm sure that I am missing a ton of areas though as my css knowledge is novice at best.
The text was updated successfully, but these errors were encountered: