diff --git a/docs/src/theme/Admonition/index.js b/docs/src/theme/Admonition/index.js
index dbe85ea9b8..a5e00f2aae 100644
--- a/docs/src/theme/Admonition/index.js
+++ b/docs/src/theme/Admonition/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { ThemeClassNames, useColorMode } from '@docusaurus/theme-common';
+import { ThemeClassNames } from '@docusaurus/theme-common';
 import Translate from '@docusaurus/Translate';
 import styles from './styles.module.css';
 
@@ -68,7 +68,6 @@ const aliases = {
 };
 
 export default function Admonition(props) {
-  const { colorMode } = useColorMode();
   const {
     children,
     type,
@@ -89,7 +88,9 @@ export default function Admonition(props) {
       )}>
       <div className={styles.admonitionHeading}>
         <div className={styles.admonitionIcon}>
-          {colorMode === 'light' ? <Danger /> : <DangerDark />}
+          {/* one of the icons is always hidden in css */}
+          <Danger />
+          <DangerDark />
         </div>
 
         {titleLabel}
diff --git a/docs/src/theme/Admonition/styles.module.css b/docs/src/theme/Admonition/styles.module.css
index c3393c4209..199669933a 100644
--- a/docs/src/theme/Admonition/styles.module.css
+++ b/docs/src/theme/Admonition/styles.module.css
@@ -6,10 +6,6 @@
   margin-bottom: 1.5em;
 }
 
-[data-theme='dark'] .admonition {
-  color: var(--swm-off-white);
-}
-
 .admonitionHeading {
   display: flex;
   font-family: var(--swm-admonition-heading-font-family);
@@ -31,6 +27,14 @@
   height: 27px;
 }
 
+[data-theme='dark'] .admonitionIcon svg:first-child {
+  display: none;
+}
+
+[data-theme='light'] .admonitionIcon svg:nth-child(2) {
+  display: none;
+}
+
 .admonitionIcon svg {
   display: inline-block;
   height: 100%;