adds dark mode colors

Author: ZPain8464

src/theme/Admonition/Types.js

@@ -1,17 +1,38 @@
 import React from 'react';
 import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
 import BusinessIcon from '@mui/icons-material/Business';
+import {useColorMode} from '@docusaurus/theme-common';
 
-import './types.css';
+// import './types.css';
+import styles from './types.module.css';
 
 function EnterpriseAdmonition(props) {
+  const {colorMode} = useColorMode();
+
   return (
-    <div className="custom_admonition">
-      <div className="custom_admonition_header">
-        <span><BusinessIcon style={{color: 'rgb(86 83 83)'}}/></span>
-        <h5>{props.title}</h5>
+    <div className={
+      colorMode === 'dark'
+        ? styles.custom_admonition_dark_mode
+        : styles.custom_admonition_light_mode
+      }
+      >
+      <div className={styles.custom_admonition_header}>
+        <span><BusinessIcon style={
+          colorMode === 'dark'
+            ? {color: '#ECE5FF'}
+            : {color: 'rgb(86 83 83)'}
+          }/></span>
+        <h5 className={
+          colorMode === 'dark'
+            ? styles.custom_admonition_title_dark_mode
+            : styles.custom_admonition_title_light_mode
+          }>{props.title}</h5>
       </div>
-      <div className="custom_admonition_text">
+      <div className={
+        colorMode === 'dark'
+          ? styles.custom_admonition_text_dark_mode
+          : styles.custom_admonition_text
+      }>
         <p>{props.children}</p>
       </div>
     </div>

src/theme/Admonition/types.css

@@ -0,0 +1,51 @@
+.custom_admonition_light_mode {
+  border: #ededed 1px solid;
+  border-left: #6F43E7 solid 4px;
+  border-radius: 10px;
+  margin: 0 0 16px 0;
+  padding: 16px;
+  background-color: #f6f3ff;
+}
+
+.custom_admonition_dark_mode {
+  border: #612fea 1px solid;
+  border-left: #e6bffa solid 4px;
+  border-radius: 10px;
+  margin: 0 0 16px 0;
+  padding: 16px;
+  background-color: #7161ef;
+}
+
+.custom_admonition_header {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.custom_admonition_header span {
+  margin-right: 5px;
+}
+
+.custom_admonition_title_light_mode {
+  color: #6F43E7;
+  font-size: 16px;
+}
+
+.custom_admonition_title_dark_mode {
+  color: #ECE5FF;
+  font-size: 16px;
+}
+
+.custom_admonition_text p {
+ margin: 0 0 0 0;
+ font-size: 16px;
+}
+
+.custom_admonition_text_dark_mode p {
+  margin: 0 0 0 0;
+  font-size: 16px;
+}
+
+.custom_admonition_text_dark_mode a {
+  color: #f1e8f9;
+  font-weight: bold;
+}