Merge pull request #13 from etherlinkcom/sasha@add-dark-mode

added dark mode

docusaurus.config.js

@@ -57,8 +57,8 @@ const config = {
     ({
       colorMode: {
         defaultMode: 'light',
-        disableSwitch: true,
-        respectPrefersColorScheme: false,
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
       },
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',

src/css/custom.css

@@ -55,14 +55,17 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #7b9efc;
+  --ifm-font-color-base: #FFFFFF;
+  --ifm-navbar-link-color: #FFFFFF;
+  --ifm-color-primary: #3835d9;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -139,6 +142,10 @@ nav.navbar {
   transition: color 0.3s;
 }
 
+[data-theme='dark'] .menu__link {
+  color: #FFFFFF; /* Or any color you prefer for dark mode */
+}
+
 .menu__link:hover,
 .menu__link:focus {
   color: #0D61FF !important;
@@ -204,6 +211,10 @@ article a[target="_blank"]:after {
   padding-left: 5px;
 }
 
+[data-theme='dark'] article a[target="_blank"]:after {
+  content: url("/img/external_link_white.svg");
+}
+
 /* more space between sidebar categories */
 .theme-doc-sidebar-item-category:not(:first-child) {
   margin-top: 30px;