Customized icons (annotation) for dark/light theme

[sham-Ann]

Hi all,

I'm trying to customize dark and light theme, and I want to make different icons for annotation.
Right now that is what I have in my *.yml file:

theme:
  palette:
    # Palette toggle for light mode
    - scheme: default
      toggle:
        icon: material/lightbulb-outline
        name: Switch to dark mode
      icon:
        annotation: material/arrow-right-circle-outline

    # Palette toggle for dark mode
    - scheme: slate
      toggle:
        icon: material/lightbulb
        name: Switch to light mode
      icon:
        annotation: material/arrow-right-circle

Switching between themes works fine. But I want to change default icon (this round plus) for annotation and make it in two styles.

As I understand, the part with "icon -> annotation" should belong somewhere else, but I can't get where to put it.
Could you help me?
and maybe also tell me how to delete this DRAFT, it appeared on the top of new page and I have no idea why 🙃

[alexvoss]

You are assuming that the icon setting can be moved under the palette setting. However, the icon for a scheme is the icon used to represent it in the color scheme toggle. To get the effect you are looking for you would need to customize the theme.

The annotation icon is produced by CSS using the variables --md-annotation-bg-icon and --md-annotation-icon, so these are what you would need to toggle depending on light/dark mode. So, if you want a different icon in dark mode, you would have some extra CSS like so:

[data-md-color-scheme="slate"] {
    --md-annotation-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.45 4.73L5.82 21 12 17.27Z"/></svg>')
}

Insert the SVG of your choice in the above. Hope this helps.