From 813dda273f123042a49df912f087ccb671b1db3d Mon Sep 17 00:00:00 2001
From: banteg <4562643+banteg@users.noreply.github.com>
Date: Wed, 14 Jan 2026 03:36:17 +0400
Subject: [PATCH 1/3] feat(admonitions): style custom types from extra

Signed-off-by: banteg <4562643+banteg@users.noreply.github.com>
---
 dist/partials/icons.html | 94 ++++++++++++++++++++++++++++++++++++++
 src/partials/icons.html  | 99 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 193 insertions(+)

diff --git a/dist/partials/icons.html b/dist/partials/icons.html
index 3dc3cdaf..48d164ba 100644
--- a/dist/partials/icons.html
+++ b/dist/partials/icons.html
@@ -17,6 +17,100 @@
   {% set _.style = _.style ~ "}\u003c/style\u003e" %}
   {{ _.style }}
 {% endif %}
+{% set admonition_icons = config.theme.icon.admonition | d({}, true) %}
+{% set admonition_extra = config.extra.admonitions | d({}, true) %}
+{% if admonition_extra is mapping %}
+  {% set _ = namespace(style = "\u003cstyle\u003e:root{", has_icon = false) %}
+  {% for type, data in admonition_extra | items %}
+    {% if type %}
+      {% if data is mapping %}
+        {% set icon = data.icon %}
+      {% else %}
+        {% set icon = data %}
+      {% endif %}
+      {% if icon %}
+        {% import ".icons/" ~ icon ~ ".svg" as icon %}
+        {% set _.style = _.style ~
+          "--md-admonition-icon--" ~ type ~ ":" ~
+          "url('data:image/svg+xml;charset=utf-8," ~
+            icon | replace("\n", "") | urlencode ~
+          "');"
+        %}
+        {% set _.has_icon = true %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+  {% if _.has_icon %}
+    {% set _.style = _.style ~ "}\u003c/style\u003e" %}
+    {{ _.style }}
+  {% endif %}
+{% endif %}
+{% set types = [] %}
+{% if admonition_icons is mapping %}
+  {% for type, icon in admonition_icons | items %}
+    {% if type and type not in types %}
+      {% set _ = types.append(type) %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+{% if admonition_extra is mapping %}
+  {% for type, data in admonition_extra | items %}
+    {% if type and type not in types %}
+      {% set _ = types.append(type) %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+{% if types %}
+  <style>
+  {% for type in types %}
+    {% set data = admonition_extra.get(type) if admonition_extra is mapping else None %}
+    {% if data is mapping %}
+      {% set color = data.color %}
+      {% set icon = data.icon %}
+    {% elif data %}
+      {% set color = None %}
+      {% set icon = data %}
+    {% else %}
+      {% set color = None %}
+      {% set icon = None %}
+    {% endif %}
+    {% if not icon and admonition_icons is mapping %}
+      {% set icon = admonition_icons.get(type) %}
+    {% endif %}
+    {% if color or icon %}
+    .md-typeset .admonition.{{ type }} {
+      {% if color %}
+      background-color: color-mix(in srgb, {{ color }} 10%, transparent);
+      border-color: {{ color }};
+      {% endif %}
+    }
+    .md-typeset .admonition.{{ type }}:focus-within {
+      {% if color %}
+      box-shadow: 0 0 0 0.25rem color-mix(in srgb, {{ color }} 10%, transparent);
+      {% endif %}
+    }
+    .md-typeset .{{ type }} > .admonition-title {
+      {% if color %}
+      background-color: color-mix(in srgb, {{ color }} 10%, transparent);
+      {% endif %}
+    }
+    .md-typeset .{{ type }} > .admonition-title::before {
+      {% if color %}
+      background-color: {{ color }};
+      {% endif %}
+      {% if icon %}
+      mask-image: var(--md-admonition-icon--{{ type }});
+      {% endif %}
+    }
+    .md-typeset .{{ type }} > .admonition-title::after {
+      {% if color %}
+      color: {{ color }};
+      {% endif %}
+    }
+    {% endif %}
+  {% endfor %}
+  </style>
+{% endif %}
 {% if config.theme.icon.annotation %}
   {% set _ = namespace(style = "\u003cstyle\u003e:root{") %}
   {% import ".icons/" ~ config.theme.icon.annotation ~ ".svg" as icon %}
diff --git a/src/partials/icons.html b/src/partials/icons.html
index dbb35dca..d116e077 100644
--- a/src/partials/icons.html
+++ b/src/partials/icons.html
@@ -41,6 +41,105 @@
   {{ _.style }}
 {% endif %}
 
+{% set admonition_icons = config.theme.icon.admonition | d({}, true) %}
+{% set admonition_extra = config.extra.admonitions | d({}, true) %}
+
+<!-- Custom admonition icons from extra -->
+{% if admonition_extra is mapping %}
+  {% set _ = namespace(style = "\u003cstyle\u003e:root{", has_icon = false) %}
+  {% for type, data in admonition_extra | items %}
+    {% if type %}
+      {% if data is mapping %}
+        {% set icon = data.icon %}
+      {% else %}
+        {% set icon = data %}
+      {% endif %}
+      {% if icon %}
+        {% import ".icons/" ~ icon ~ ".svg" as icon %}
+        {% set _.style = _.style ~
+          "--md-admonition-icon--" ~ type ~ ":" ~
+          "url('data:image/svg+xml;charset=utf-8," ~
+            icon | replace("\n", "") | urlencode ~
+          "');"
+        %}
+        {% set _.has_icon = true %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+  {% if _.has_icon %}
+    {% set _.style = _.style ~ "}\u003c/style\u003e" %}
+    {{ _.style }}
+  {% endif %}
+{% endif %}
+
+<!-- Custom admonition styles -->
+{% set types = [] %}
+{% if admonition_icons is mapping %}
+  {% for type, icon in admonition_icons | items %}
+    {% if type and type not in types %}
+      {% set _ = types.append(type) %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+{% if admonition_extra is mapping %}
+  {% for type, data in admonition_extra | items %}
+    {% if type and type not in types %}
+      {% set _ = types.append(type) %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+{% if types %}
+  <style>
+  {% for type in types %}
+    {% set data = admonition_extra.get(type) if admonition_extra is mapping else None %}
+    {% if data is mapping %}
+      {% set color = data.color %}
+      {% set icon = data.icon %}
+    {% elif data %}
+      {% set color = None %}
+      {% set icon = data %}
+    {% else %}
+      {% set color = None %}
+      {% set icon = None %}
+    {% endif %}
+    {% if not icon and admonition_icons is mapping %}
+      {% set icon = admonition_icons.get(type) %}
+    {% endif %}
+    {% if color or icon %}
+    .md-typeset .admonition.{{ type }} {
+      {% if color %}
+      background-color: color-mix(in srgb, {{ color }} 10%, transparent);
+      border-color: {{ color }};
+      {% endif %}
+    }
+    .md-typeset .admonition.{{ type }}:focus-within {
+      {% if color %}
+      box-shadow: 0 0 0 0.25rem color-mix(in srgb, {{ color }} 10%, transparent);
+      {% endif %}
+    }
+    .md-typeset .{{ type }} > .admonition-title {
+      {% if color %}
+      background-color: color-mix(in srgb, {{ color }} 10%, transparent);
+      {% endif %}
+    }
+    .md-typeset .{{ type }} > .admonition-title::before {
+      {% if color %}
+      background-color: {{ color }};
+      {% endif %}
+      {% if icon %}
+      mask-image: var(--md-admonition-icon--{{ type }});
+      {% endif %}
+    }
+    .md-typeset .{{ type }} > .admonition-title::after {
+      {% if color %}
+      color: {{ color }};
+      {% endif %}
+    }
+    {% endif %}
+  {% endfor %}
+  </style>
+{% endif %}
+
 <!-- Custom annotation icon -->
 {% if config.theme.icon.annotation %}
   {% set _ = namespace(style = "\u003cstyle\u003e:root{") %}

From 35dc961b2accba5018cb7becd4b1c1f4ca2c985a Mon Sep 17 00:00:00 2001
From: banteg <4562643+banteg@users.noreply.github.com>
Date: Wed, 14 Jan 2026 04:14:11 +0400
Subject: [PATCH 2/3] fix(ui): harden custom admonition styles

Signed-off-by: banteg <4562643+banteg@users.noreply.github.com>
---
 dist/partials/icons.html | 100 +++++++++++++++++-------------------
 src/partials/icons.html  | 107 ++++++++++++++++++---------------------
 2 files changed, 95 insertions(+), 112 deletions(-)

diff --git a/dist/partials/icons.html b/dist/partials/icons.html
index 48d164ba..a741ccbb 100644
--- a/dist/partials/icons.html
+++ b/dist/partials/icons.html
@@ -1,64 +1,59 @@
 {#-
   This file was automatically generated - do not edit
 -#}
-{% if config.theme.icon.admonition %}
-  {% set _ = namespace(style = "\u003cstyle\u003e:root{") %}
-  {% for type, icon in config.theme.icon.admonition | items %}
-    {% if type and icon %}
-      {% import ".icons/" ~ icon ~ ".svg" as icon %}
-      {% set _.style = _.style ~
-        "--md-admonition-icon--" ~ type ~ ":" ~
-        "url('data:image/svg+xml;charset=utf-8," ~
-          icon | replace("\n", "") | urlencode ~
-        "');"
-      %}
+{% set admonition_icons = config.theme.icon.admonition | d({}, true) %}
+{% set admonition_extra = config.extra.admonitions | d({}, true) %}
+{% set types = [] %}
+{% if admonition_icons is mapping %}
+  {% for type, icon in admonition_icons | items %}
+    {% if type and icon and type not in types %}
+      {% set _ = types.append(type) %}
     {% endif %}
   {% endfor %}
-  {% set _.style = _.style ~ "}\u003c/style\u003e" %}
-  {{ _.style }}
 {% endif %}
-{% set admonition_icons = config.theme.icon.admonition | d({}, true) %}
-{% set admonition_extra = config.extra.admonitions | d({}, true) %}
 {% if admonition_extra is mapping %}
-  {% set _ = namespace(style = "\u003cstyle\u003e:root{", has_icon = false) %}
   {% for type, data in admonition_extra | items %}
-    {% if type %}
+    {% if type and type not in types %}
       {% if data is mapping %}
-        {% set icon = data.icon %}
+        {% set has_data = data.icon or data.color %}
       {% else %}
-        {% set icon = data %}
+        {% set has_data = data %}
       {% endif %}
-      {% if icon %}
-        {% import ".icons/" ~ icon ~ ".svg" as icon %}
-        {% set _.style = _.style ~
-          "--md-admonition-icon--" ~ type ~ ":" ~
-          "url('data:image/svg+xml;charset=utf-8," ~
-            icon | replace("\n", "") | urlencode ~
-          "');"
-        %}
-        {% set _.has_icon = true %}
+      {% if has_data %}
+        {% set _ = types.append(type) %}
       {% endif %}
     {% endif %}
   {% endfor %}
-  {% if _.has_icon %}
-    {% set _.style = _.style ~ "}\u003c/style\u003e" %}
-    {{ _.style }}
-  {% endif %}
 {% endif %}
-{% set types = [] %}
-{% if admonition_icons is mapping %}
-  {% for type, icon in admonition_icons | items %}
-    {% if type and type not in types %}
-      {% set _ = types.append(type) %}
+{% if types %}
+  {% set _ = namespace(style = "\u003cstyle\u003e:root{", has_icon = false) %}
+  {% for type in types %}
+    {% set data = admonition_extra.get(type) if admonition_extra is mapping else None %}
+    {% if data is mapping %}
+      {% set icon = data.icon %}
+    {% elif data %}
+      {% set icon = data %}
+    {% else %}
+      {% set icon = None %}
     {% endif %}
-  {% endfor %}
-{% endif %}
-{% if admonition_extra is mapping %}
-  {% for type, data in admonition_extra | items %}
-    {% if type and type not in types %}
-      {% set _ = types.append(type) %}
+    {% if not icon and admonition_icons is mapping %}
+      {% set icon = admonition_icons.get(type) %}
+    {% endif %}
+    {% if icon %}
+      {% import ".icons/" ~ icon ~ ".svg" as icon %}
+      {% set _.style = _.style ~
+        "--md-admonition-icon--" ~ type ~ ":" ~
+        "url('data:image/svg+xml;charset=utf-8," ~
+          icon | replace("\n", "") | urlencode ~
+        "');"
+      %}
+      {% set _.has_icon = true %}
     {% endif %}
   {% endfor %}
+  {% if _.has_icon %}
+    {% set _.style = _.style ~ "}\u003c/style\u003e" %}
+    {{ _.style }}
+  {% endif %}
 {% endif %}
 {% if types %}
   <style>
@@ -77,35 +72,32 @@
     {% if not icon and admonition_icons is mapping %}
       {% set icon = admonition_icons.get(type) %}
     {% endif %}
-    {% if color or icon %}
-    .md-typeset .admonition.{{ type }} {
-      {% if color %}
+    {% if color %}
+    .md-typeset :is(.admonition, details).{{ type }} {
       background-color: color-mix(in srgb, {{ color }} 10%, transparent);
       border-color: {{ color }};
-      {% endif %}
     }
-    .md-typeset .admonition.{{ type }}:focus-within {
-      {% if color %}
+    .md-typeset :is(.admonition, details).{{ type }}:focus-within {
       box-shadow: 0 0 0 0.25rem color-mix(in srgb, {{ color }} 10%, transparent);
-      {% endif %}
     }
     .md-typeset .{{ type }} > .admonition-title {
-      {% if color %}
       background-color: color-mix(in srgb, {{ color }} 10%, transparent);
-      {% endif %}
     }
+    {% endif %}
+    {% if color or icon %}
     .md-typeset .{{ type }} > .admonition-title::before {
       {% if color %}
       background-color: {{ color }};
       {% endif %}
       {% if icon %}
+      -webkit-mask-image: var(--md-admonition-icon--{{ type }});
       mask-image: var(--md-admonition-icon--{{ type }});
       {% endif %}
     }
+    {% endif %}
+    {% if color %}
     .md-typeset .{{ type }} > .admonition-title::after {
-      {% if color %}
       color: {{ color }};
-      {% endif %}
     }
     {% endif %}
   {% endfor %}
diff --git a/src/partials/icons.html b/src/partials/icons.html
index d116e077..59c33b18 100644
--- a/src/partials/icons.html
+++ b/src/partials/icons.html
@@ -23,49 +23,58 @@
   IN THE SOFTWARE.
 -->
 
-<!-- Custom admonition icons -->
-{% if config.theme.icon.admonition %}
-  {% set _ = namespace(style = "\u003cstyle\u003e:root{") %}
-  {% for type, icon in config.theme.icon.admonition | items %}
-    {% if type and icon %}
-      {% import ".icons/" ~ icon ~ ".svg" as icon %}
-      {% set _.style = _.style ~
-        "--md-admonition-icon--" ~ type ~ ":" ~
-        "url('data:image/svg+xml;charset=utf-8," ~
-          icon | replace("\n", "") | urlencode ~
-        "');"
-      %}
-    {% endif %}
-  {% endfor %}
-  {% set _.style = _.style ~ "}\u003c/style\u003e" %}
-  {{ _.style }}
-{% endif %}
-
 {% set admonition_icons = config.theme.icon.admonition | d({}, true) %}
 {% set admonition_extra = config.extra.admonitions | d({}, true) %}
 
-<!-- Custom admonition icons from extra -->
+{% set types = [] %}
+{% if admonition_icons is mapping %}
+  {% for type, icon in admonition_icons | items %}
+    {% if type and icon and type not in types %}
+      {% set _ = types.append(type) %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
 {% if admonition_extra is mapping %}
-  {% set _ = namespace(style = "\u003cstyle\u003e:root{", has_icon = false) %}
   {% for type, data in admonition_extra | items %}
-    {% if type %}
+    {% if type and type not in types %}
       {% if data is mapping %}
-        {% set icon = data.icon %}
+        {% set has_data = data.icon or data.color %}
       {% else %}
-        {% set icon = data %}
+        {% set has_data = data %}
       {% endif %}
-      {% if icon %}
-        {% import ".icons/" ~ icon ~ ".svg" as icon %}
-        {% set _.style = _.style ~
-          "--md-admonition-icon--" ~ type ~ ":" ~
-          "url('data:image/svg+xml;charset=utf-8," ~
-            icon | replace("\n", "") | urlencode ~
-          "');"
-        %}
-        {% set _.has_icon = true %}
+      {% if has_data %}
+        {% set _ = types.append(type) %}
       {% endif %}
     {% endif %}
   {% endfor %}
+{% endif %}
+
+<!-- Custom admonition icons -->
+{% if types %}
+  {% set _ = namespace(style = "\u003cstyle\u003e:root{", has_icon = false) %}
+  {% for type in types %}
+    {% set data = admonition_extra.get(type) if admonition_extra is mapping else None %}
+    {% if data is mapping %}
+      {% set icon = data.icon %}
+    {% elif data %}
+      {% set icon = data %}
+    {% else %}
+      {% set icon = None %}
+    {% endif %}
+    {% if not icon and admonition_icons is mapping %}
+      {% set icon = admonition_icons.get(type) %}
+    {% endif %}
+    {% if icon %}
+      {% import ".icons/" ~ icon ~ ".svg" as icon %}
+      {% set _.style = _.style ~
+        "--md-admonition-icon--" ~ type ~ ":" ~
+        "url('data:image/svg+xml;charset=utf-8," ~
+          icon | replace("\n", "") | urlencode ~
+        "');"
+      %}
+      {% set _.has_icon = true %}
+    {% endif %}
+  {% endfor %}
   {% if _.has_icon %}
     {% set _.style = _.style ~ "}\u003c/style\u003e" %}
     {{ _.style }}
@@ -73,21 +82,6 @@
 {% endif %}
 
 <!-- Custom admonition styles -->
-{% set types = [] %}
-{% if admonition_icons is mapping %}
-  {% for type, icon in admonition_icons | items %}
-    {% if type and type not in types %}
-      {% set _ = types.append(type) %}
-    {% endif %}
-  {% endfor %}
-{% endif %}
-{% if admonition_extra is mapping %}
-  {% for type, data in admonition_extra | items %}
-    {% if type and type not in types %}
-      {% set _ = types.append(type) %}
-    {% endif %}
-  {% endfor %}
-{% endif %}
 {% if types %}
   <style>
   {% for type in types %}
@@ -105,35 +99,32 @@
     {% if not icon and admonition_icons is mapping %}
       {% set icon = admonition_icons.get(type) %}
     {% endif %}
-    {% if color or icon %}
-    .md-typeset .admonition.{{ type }} {
-      {% if color %}
+    {% if color %}
+    .md-typeset :is(.admonition, details).{{ type }} {
       background-color: color-mix(in srgb, {{ color }} 10%, transparent);
       border-color: {{ color }};
-      {% endif %}
     }
-    .md-typeset .admonition.{{ type }}:focus-within {
-      {% if color %}
+    .md-typeset :is(.admonition, details).{{ type }}:focus-within {
       box-shadow: 0 0 0 0.25rem color-mix(in srgb, {{ color }} 10%, transparent);
-      {% endif %}
     }
     .md-typeset .{{ type }} > .admonition-title {
-      {% if color %}
       background-color: color-mix(in srgb, {{ color }} 10%, transparent);
-      {% endif %}
     }
+    {% endif %}
+    {% if color or icon %}
     .md-typeset .{{ type }} > .admonition-title::before {
       {% if color %}
       background-color: {{ color }};
       {% endif %}
       {% if icon %}
+      -webkit-mask-image: var(--md-admonition-icon--{{ type }});
       mask-image: var(--md-admonition-icon--{{ type }});
       {% endif %}
     }
+    {% endif %}
+    {% if color %}
     .md-typeset .{{ type }} > .admonition-title::after {
-      {% if color %}
       color: {{ color }};
-      {% endif %}
     }
     {% endif %}
   {% endfor %}

From 92947fce2a768604f80147f6d34b3d4f289522f3 Mon Sep 17 00:00:00 2001
From: banteg <4562643+banteg@users.noreply.github.com>
Date: Wed, 14 Jan 2026 12:40:28 +0400
Subject: [PATCH 3/3] fix: make custom admonition templates minijinja-safe

Signed-off-by: banteg <4562643+banteg@users.noreply.github.com>
---
 dist/partials/icons.html | 47 +++++++++++++++++++++++++++-------------
 src/partials/icons.html  | 47 +++++++++++++++++++++++++++-------------
 2 files changed, 64 insertions(+), 30 deletions(-)

diff --git a/dist/partials/icons.html b/dist/partials/icons.html
index a741ccbb..13fdf486 100644
--- a/dist/partials/icons.html
+++ b/dist/partials/icons.html
@@ -3,32 +3,36 @@
 -#}
 {% set admonition_icons = config.theme.icon.admonition | d({}, true) %}
 {% set admonition_extra = config.extra.admonitions | d({}, true) %}
-{% set types = [] %}
+{% set ns = namespace(types = []) %}
 {% if admonition_icons is mapping %}
   {% for type, icon in admonition_icons | items %}
-    {% if type and icon and type not in types %}
-      {% set _ = types.append(type) %}
+    {% if type and icon and type not in ns.types %}
+      {% set ns.types = ns.types + [type] %}
     {% endif %}
   {% endfor %}
 {% endif %}
 {% if admonition_extra is mapping %}
   {% for type, data in admonition_extra | items %}
-    {% if type and type not in types %}
+    {% if type and type not in ns.types %}
       {% if data is mapping %}
         {% set has_data = data.icon or data.color %}
       {% else %}
         {% set has_data = data %}
       {% endif %}
       {% if has_data %}
-        {% set _ = types.append(type) %}
+        {% set ns.types = ns.types + [type] %}
       {% endif %}
     {% endif %}
   {% endfor %}
 {% endif %}
-{% if types %}
+{% if ns.types %}
   {% set _ = namespace(style = "\u003cstyle\u003e:root{", has_icon = false) %}
-  {% for type in types %}
-    {% set data = admonition_extra.get(type) if admonition_extra is mapping else None %}
+  {% for type in ns.types %}
+    {% if admonition_extra is mapping and type in admonition_extra %}
+      {% set data = admonition_extra[type] %}
+    {% else %}
+      {% set data = None %}
+    {% endif %}
     {% if data is mapping %}
       {% set icon = data.icon %}
     {% elif data %}
@@ -36,8 +40,8 @@
     {% else %}
       {% set icon = None %}
     {% endif %}
-    {% if not icon and admonition_icons is mapping %}
-      {% set icon = admonition_icons.get(type) %}
+    {% if not icon and admonition_icons is mapping and type in admonition_icons %}
+      {% set icon = admonition_icons[type] %}
     {% endif %}
     {% if icon %}
       {% import ".icons/" ~ icon ~ ".svg" as icon %}
@@ -55,10 +59,14 @@
     {{ _.style }}
   {% endif %}
 {% endif %}
-{% if types %}
+{% if ns.types %}
   <style>
-  {% for type in types %}
-    {% set data = admonition_extra.get(type) if admonition_extra is mapping else None %}
+  {% for type in ns.types %}
+    {% if admonition_extra is mapping and type in admonition_extra %}
+      {% set data = admonition_extra[type] %}
+    {% else %}
+      {% set data = None %}
+    {% endif %}
     {% if data is mapping %}
       {% set color = data.color %}
       {% set icon = data.icon %}
@@ -69,10 +77,11 @@
       {% set color = None %}
       {% set icon = None %}
     {% endif %}
-    {% if not icon and admonition_icons is mapping %}
-      {% set icon = admonition_icons.get(type) %}
+    {% if not icon and admonition_icons is mapping and type in admonition_icons %}
+      {% set icon = admonition_icons[type] %}
     {% endif %}
     {% if color %}
+    {% if config.theme.variant == "modern" %}
     .md-typeset :is(.admonition, details).{{ type }} {
       background-color: color-mix(in srgb, {{ color }} 10%, transparent);
       border-color: {{ color }};
@@ -80,10 +89,18 @@
     .md-typeset :is(.admonition, details).{{ type }}:focus-within {
       box-shadow: 0 0 0 0.25rem color-mix(in srgb, {{ color }} 10%, transparent);
     }
+    {% else %}
+    .md-typeset :is(.admonition, details).{{ type }} {
+      border-color: {{ color }};
+    }
+    .md-typeset :is(.admonition, details).{{ type }}:focus-within {
+      box-shadow: 0 0 0 0.25rem color-mix(in srgb, {{ color }} 10%, transparent);
+    }
     .md-typeset .{{ type }} > .admonition-title {
       background-color: color-mix(in srgb, {{ color }} 10%, transparent);
     }
     {% endif %}
+    {% endif %}
     {% if color or icon %}
     .md-typeset .{{ type }} > .admonition-title::before {
       {% if color %}
diff --git a/src/partials/icons.html b/src/partials/icons.html
index 59c33b18..41cf2409 100644
--- a/src/partials/icons.html
+++ b/src/partials/icons.html
@@ -26,34 +26,38 @@
 {% set admonition_icons = config.theme.icon.admonition | d({}, true) %}
 {% set admonition_extra = config.extra.admonitions | d({}, true) %}
 
-{% set types = [] %}
+{% set ns = namespace(types = []) %}
 {% if admonition_icons is mapping %}
   {% for type, icon in admonition_icons | items %}
-    {% if type and icon and type not in types %}
-      {% set _ = types.append(type) %}
+    {% if type and icon and type not in ns.types %}
+      {% set ns.types = ns.types + [type] %}
     {% endif %}
   {% endfor %}
 {% endif %}
 {% if admonition_extra is mapping %}
   {% for type, data in admonition_extra | items %}
-    {% if type and type not in types %}
+    {% if type and type not in ns.types %}
       {% if data is mapping %}
         {% set has_data = data.icon or data.color %}
       {% else %}
         {% set has_data = data %}
       {% endif %}
       {% if has_data %}
-        {% set _ = types.append(type) %}
+        {% set ns.types = ns.types + [type] %}
       {% endif %}
     {% endif %}
   {% endfor %}
 {% endif %}
 
 <!-- Custom admonition icons -->
-{% if types %}
+{% if ns.types %}
   {% set _ = namespace(style = "\u003cstyle\u003e:root{", has_icon = false) %}
-  {% for type in types %}
-    {% set data = admonition_extra.get(type) if admonition_extra is mapping else None %}
+  {% for type in ns.types %}
+    {% if admonition_extra is mapping and type in admonition_extra %}
+      {% set data = admonition_extra[type] %}
+    {% else %}
+      {% set data = None %}
+    {% endif %}
     {% if data is mapping %}
       {% set icon = data.icon %}
     {% elif data %}
@@ -61,8 +65,8 @@
     {% else %}
       {% set icon = None %}
     {% endif %}
-    {% if not icon and admonition_icons is mapping %}
-      {% set icon = admonition_icons.get(type) %}
+    {% if not icon and admonition_icons is mapping and type in admonition_icons %}
+      {% set icon = admonition_icons[type] %}
     {% endif %}
     {% if icon %}
       {% import ".icons/" ~ icon ~ ".svg" as icon %}
@@ -82,10 +86,14 @@
 {% endif %}
 
 <!-- Custom admonition styles -->
-{% if types %}
+{% if ns.types %}
   <style>
-  {% for type in types %}
-    {% set data = admonition_extra.get(type) if admonition_extra is mapping else None %}
+  {% for type in ns.types %}
+    {% if admonition_extra is mapping and type in admonition_extra %}
+      {% set data = admonition_extra[type] %}
+    {% else %}
+      {% set data = None %}
+    {% endif %}
     {% if data is mapping %}
       {% set color = data.color %}
       {% set icon = data.icon %}
@@ -96,10 +104,11 @@
       {% set color = None %}
       {% set icon = None %}
     {% endif %}
-    {% if not icon and admonition_icons is mapping %}
-      {% set icon = admonition_icons.get(type) %}
+    {% if not icon and admonition_icons is mapping and type in admonition_icons %}
+      {% set icon = admonition_icons[type] %}
     {% endif %}
     {% if color %}
+    {% if config.theme.variant == "modern" %}
     .md-typeset :is(.admonition, details).{{ type }} {
       background-color: color-mix(in srgb, {{ color }} 10%, transparent);
       border-color: {{ color }};
@@ -107,10 +116,18 @@
     .md-typeset :is(.admonition, details).{{ type }}:focus-within {
       box-shadow: 0 0 0 0.25rem color-mix(in srgb, {{ color }} 10%, transparent);
     }
+    {% else %}
+    .md-typeset :is(.admonition, details).{{ type }} {
+      border-color: {{ color }};
+    }
+    .md-typeset :is(.admonition, details).{{ type }}:focus-within {
+      box-shadow: 0 0 0 0.25rem color-mix(in srgb, {{ color }} 10%, transparent);
+    }
     .md-typeset .{{ type }} > .admonition-title {
       background-color: color-mix(in srgb, {{ color }} 10%, transparent);
     }
     {% endif %}
+    {% endif %}
     {% if color or icon %}
     .md-typeset .{{ type }} > .admonition-title::before {
       {% if color %}