:root {
  --icon-filter-black: invert(100%);
  --icon-filter-white: invert(0%);
  --btn-icon-filter: invert(100%);
  --btn-icon-filter-dark: invert(0%);
}

.colorize--white {
  filter: var(--icon-filter-white);
}

.colorize--black {
  filter: var(--icon-filter-black);
}

html[data-theme="mideval"] {
  --icon-filter-black: invert(78%) sepia(28%) saturate(520%) hue-rotate(6deg) brightness(92%) contrast(92%);
  --icon-filter-white: invert(88%) sepia(12%) saturate(400%) hue-rotate(12deg) brightness(96%) contrast(95%);
  --btn-icon-filter: var(--icon-filter-black);
  --btn-icon-filter-dark: brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(300%) hue-rotate(20deg) brightness(90%) contrast(95%);
}

html[data-theme="ember"] {
  --icon-filter-black: invert(82%) sepia(22%) saturate(420%) hue-rotate(2deg) brightness(92%) contrast(92%);
  --icon-filter-white: invert(90%) sepia(12%) saturate(320%) hue-rotate(4deg) brightness(96%) contrast(94%);
  --btn-icon-filter: var(--icon-filter-black);
  --btn-icon-filter-dark: brightness(0) saturate(100%) invert(16%) sepia(18%) saturate(300%) hue-rotate(12deg) brightness(90%) contrast(95%);
}

html[data-theme="sage"] {
  --icon-filter-black: invert(86%) sepia(24%) saturate(420%) hue-rotate(92deg) brightness(92%) contrast(90%);
  --icon-filter-white: invert(90%) sepia(16%) saturate(360%) hue-rotate(98deg) brightness(96%) contrast(94%);
  --btn-icon-filter: var(--icon-filter-black);
  --btn-icon-filter-dark: brightness(0) saturate(100%) invert(18%) sepia(26%) saturate(360%) hue-rotate(120deg) brightness(90%) contrast(95%);
}

html[data-theme="noir"] {
  --icon-filter-black: invert(90%) sepia(14%) saturate(360%) hue-rotate(200deg) brightness(94%) contrast(92%);
  --icon-filter-white: invert(92%) sepia(10%) saturate(320%) hue-rotate(210deg) brightness(98%) contrast(95%);
  --btn-icon-filter: var(--icon-filter-black);
  --btn-icon-filter-dark: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(300%) hue-rotate(220deg) brightness(92%) contrast(95%);
}

html[data-theme="oasis"] {
  --icon-filter-black: invert(86%) sepia(26%) saturate(420%) hue-rotate(155deg) brightness(92%) contrast(90%);
  --icon-filter-white: invert(90%) sepia(18%) saturate(360%) hue-rotate(160deg) brightness(96%) contrast(94%);
  --btn-icon-filter: var(--icon-filter-black);
  --btn-icon-filter-dark: brightness(0) saturate(100%) invert(18%) sepia(26%) saturate(360%) hue-rotate(175deg) brightness(90%) contrast(95%);
}

html[data-theme="citrus"] {
  --icon-filter-black: invert(88%) sepia(26%) saturate(420%) hue-rotate(72deg) brightness(92%) contrast(90%);
  --icon-filter-white: invert(92%) sepia(16%) saturate(320%) hue-rotate(76deg) brightness(98%) contrast(94%);
  --btn-icon-filter: var(--icon-filter-black);
  --btn-icon-filter-dark: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(340%) hue-rotate(92deg) brightness(90%) contrast(95%);
}

html[data-theme="harbor"] {
  --icon-filter-black: invert(88%) sepia(24%) saturate(420%) hue-rotate(190deg) brightness(92%) contrast(90%);
  --icon-filter-white: invert(92%) sepia(16%) saturate(360%) hue-rotate(195deg) brightness(98%) contrast(94%);
  --btn-icon-filter: var(--icon-filter-black);
  --btn-icon-filter-dark: brightness(0) saturate(100%) invert(18%) sepia(22%) saturate(320%) hue-rotate(205deg) brightness(90%) contrast(95%);
}