search

rk-terence / gz-remark-callout

A remark plugin to support Obsidian-like callouts.
https://www.npmjs.com/package/remark-callout
MIT License
6 stars 1 forks source link

Adjust callout's icon to color mode #3

Open cswpy opened 9 months ago

cswpy commented 9 months ago

Thanks for the plugin! I want to use it for my Astro blog which has a dark and a light mode. Right now, the icon just appears as a dot in light mode since the background is almost the same color as the SVG used in the callouts. I am pretty new to Astro and remark in general, but I am not sure whether there is a good way to change the icon's color according to the color mode? Thanks.

rk-terence commented 9 months ago

Hi! This plugin will embed class names to generated callout icons, so you can use CSS to set the color based on the class. As for different color for dark and light modes, you can give your html element a attribute such as data-theme, and set different color variables in CSS like

html[data-theme="light"] {
   --icon-color: 0, 0, 0;
html[data-theme="dark"] {                                                    
   --icon-color: 255, 255, 255;                                                                                            
 }

and 

.callout-icon {
    color: rgb(var(--icon-color));
}

Remember to togger the data-theme attribute when color theme changes. This should work.

cswpy commented 9 months ago

Thanks! I was able to adjust the fill color of the icon, though it seems that the color of the SVG itself is kinda tricky to get right for two color modes. Still figuring out that part. Thanks again!

djmtype commented 9 months ago

@cswpy You'd also have to include theme support for @media (prefers-color-scheme: dark)


html,
html[data-theme="light"] {
  --icon-color: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
  html {
    --icon-color: 255, 255, 255; 
  }
}

html[data-theme="dark"] {
  --icon-color: 255, 255, 255; 
}

.callout-icon {
  color: rgb(var(--icon-color));
}
cswpy commented 9 months ago

@djmtype thanks for chiming in, though I tried that to no avail. Maybe I should clarify the situation a bit more. The color property in .callout-icon is not the color of the icon, it's the fill color of the icon. If I set it to the theme color, it would mean that the negative space in the icon and the border are colored, not the icon itself. Again, I think this means that I need to get an entirely different icon since this means that I need to get a different colored icon for different color themes.