-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adjust callout's icon to color mode #3
Comments
Hi! This plugin will embed class names to generated callout icons, so you can use CSS to set the color based on the class. 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 |
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! |
@cswpy You'd also have to include theme support for 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));
} |
@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. |
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.
The text was updated successfully, but these errors were encountered: