[DOCS] Theme selector

docs/docusaurus/.gitignore

@@ -1,3 +1,4 @@
 __MACOSX
 oss_docs_versions.zip
 docs/reference/api
+/coverage/

docs/docusaurus/__mocks__/@theme/ThemedImage.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function ThemedImage(props) {
+    return (
+        <div></div>
+    )
+}

docs/docusaurus/docusaurus.config.js

@@ -90,7 +90,7 @@ module.exports = {
       ]
     },
     colorMode: {
-      disableSwitch: true,
+      disableSwitch: false,
     },
     zoomSelector: '.markdown :not(em) > img',
     // announcementBar: {
@@ -107,6 +107,7 @@ module.exports = {
       logo: {
         alt: 'Great Expectations',
         src: 'img/GXDocs.svg',
+        srcDark: 'img/GXDocs-dark.svg',
         href: 'https://greatexpectations.io',
       },
       items: [
@@ -127,6 +128,11 @@ module.exports = {
           position: 'left',
           className: 'custom-search-bar',
         },
+        {
+          type: 'custom-colorModeToggle',
+          position: 'left',
+          className: 'color-mode-toggle',
+        },
         {
           type: 'custom-githubNavbarItem',
           position: 'left',

docs/docusaurus/jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
     "\\.(s?)css$": "identity-obj-proxy",
     "@docusaurus/(BrowserOnly|ComponentCreator|constants|ExecutionEnvironment|Head|Interpolate|isInternalUrl|Link|Noop|renderRoutes|router|Translate|use.*)":
       "identity-obj-proxy",
+    "@theme/ThemedImage": "<rootDir>/__mock__/@theme/ThemedImage.js",
     "@theme/(.*)": "@docusaurus/theme-classic/src/theme/$1",
     "@theme-original/(.*)": "identity-obj-proxy",
     "@site/(.*)": "website/$1",

docs/docusaurus/src/components/GXCard/styles.module.css

@@ -17,10 +17,6 @@
     flex-wrap: wrap;
   }
 
-  html[data-theme="dark"] .gxCard {
-    background-color: var(--orange-700);
-  }
-
   .button {
     display: inline-block;
     position: relative;
@@ -54,6 +50,10 @@
     border-color: var(--blue-600);
     background: none;
   }
+
+  html[data-theme="dark"] .gxCard {
+    background-color: var(--dark-orange-dark-theme);
+  }
 
   html[data-theme="dark"] .button__outline {
     border-color: var(--blue-300);

docs/docusaurus/src/components/LinkCard/styles.module.css

@@ -22,7 +22,7 @@
   }
 
   html[data-theme="dark"] .linkCard[href]:hover {
-    background-color: var(--orange-900);
+    background-color: var(--dark-orange-dark-theme);
   }
 
   .linkCard__icon {
@@ -54,4 +54,15 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-  }
+  }
+
+[data-theme='dark'] .linkCard {
+    background-color: var(--card-background-dark-theme);
+    border-color: #4E4E4E;
+    box-shadow: var(--default-box-shadow);
+}
+
+[data-theme='dark'] :global(.markdown) .linkCard img {
+    background-color: transparent;
+    margin: 0;
+}

docs/docusaurus/src/components/NavbarItems/ColorModeToggle/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ColorModeToggle from '@theme-original/Navbar/ColorModeToggle';
+import styles from './styles.module.scss';
+
+export default function CustomColorModeToggle(props) {
+    return (
+        <div className={styles.colorModeToggle}>
+            <ColorModeToggle {...props} />
+        </div>
+    );
+}

docs/docusaurus/src/components/NavbarItems/ColorModeToggle/styles.module.scss

@@ -0,0 +1,13 @@
+@import '../../../css/sass_variables';
+
+.colorModeToggle {
+  padding: var(--ifm-navbar-item-padding-vertical) 0.5rem var(--ifm-navbar-item-padding-vertical) 0.25rem;
+}
+
+@media (max-width: $mobile-breakpoint) {
+  .colorModeToggle {
+    position: absolute;
+    right: calc(var(--ifm-navbar-padding-horizontal) + 4.5rem);
+    padding-right: 0;
+  }
+}

docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/index.js

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import styles from './styles.module.scss';
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import ThemedImage from '@theme/ThemedImage';
 
 export default function GithubNavbarItem({ owner, repository, className }) {
 
@@ -9,6 +10,7 @@ export default function GithubNavbarItem({ owner, repository, className }) {
     const [showGithubBadgeInfo, setShowGithubBadgeInfo] = useState(true);
 
     useEffect(() => {
+
         fetch(`https://api.github.com/repos/${owner}/${repository}`)
             .then(response => response.json())
             .then(data => {
@@ -29,22 +31,26 @@ export default function GithubNavbarItem({ owner, repository, className }) {
     const githubLogoImg = useBaseUrl(`img/github.svg`);
     const starIcon = useBaseUrl(`img/star.svg`);
     const forkIcon = useBaseUrl(`img/code-branch.svg`);
+    const githubMarkDarkImg = useBaseUrl(`img/github-mark-dark.svg`);
+    const githubLogoDarkImg = useBaseUrl(`img/github-dark.svg`);
+    const starDarkIcon = useBaseUrl(`img/star-dark.svg`);
+    const forkDarkIcon = useBaseUrl(`img/code-branch-dark.svg`);
 
     return repository && (
         <a href={`https://github.com/${owner}/${repository}`} target="_blank"
            className={ className + ' ' + styles.githubBadge + ' ' + (showGithubBadgeInfo ? styles.githubBadgeNoErrors : '')}>
-            <img src={githubMarkImg} className={styles.githubMark}
+            <ThemedImage sources={{ dark: githubMarkDarkImg, light: githubMarkImg}} className={styles.githubMark}
                  alt="Github Invertocat Logo"/>
             { showGithubBadgeInfo && (<div className={styles.githubBadgeInfo}>
-                <img src={githubLogoImg} className={styles.githubLogo}
+                <ThemedImage sources={{ dark: githubLogoDarkImg, light: githubLogoImg}} className={styles.githubLogo}
                      alt="Github Logo"/>
                 <div className={styles.githubStats}>
                     <span>
-                        <img src={starIcon} alt="Github Stargazers Count"/>
+                        <ThemedImage sources={{ dark: starDarkIcon, light: starIcon}} alt="Github Stargazers Count"/>
                         {starsCount}
                     </span>
                     <span>
-                        <img src={forkIcon} alt="Github Forks Count"/>
+                        <ThemedImage sources={{ dark: forkDarkIcon, light: forkIcon}} alt="Github Forks Count"/>
                         {forksCount}
                     </span>
                 </div>

docs/docusaurus/src/components/NavbarItems/GithubNavbarItem/styles.module.scss

@@ -5,7 +5,7 @@
     gap: 0.25rem;
     align-items: flex-start;
     font-size: var(--p-tiny-font-size);
-    padding-right: 2rem;
+    padding: var(--ifm-navbar-item-padding-vertical) 2rem var(--ifm-navbar-item-padding-vertical) 0.25rem;
 }
 
 .githubBadgeNoErrors {
@@ -62,3 +62,4 @@ a:hover {
         display: none;
     }
 }
+

docs/docusaurus/src/components/WasThisHelpful/styles.module.scss

@@ -113,7 +113,7 @@
 .modalHeaderCloseButton {
     align-self: flex-end;
     cursor: pointer;
-    height: 8px;
+    height: 12px;
     margin: auto;
 }
 
@@ -216,3 +216,45 @@
         max-height: unset;
     }
 }
+
+[data-theme='dark'] {
+    .feedbackCard {
+        background-color: var(--payne-gray-color);
+        border-color: var(--payne-gray-color);
+        box-shadow: var(--default-box-shadow);
+    }
+
+    .feedbackCardTitle {
+        color: var(--ifm-font-color-base);
+    }
+
+    .feedbackButton:enabled:hover {
+        background-color: var(--dark-orange-dark-theme);
+    }
+
+    .feedbackDivider {
+        border-color: var(--light-gray-dark-theme);
+    }
+
+    .modal {
+        background-color: #222222;
+    }
+
+    .modalTextInput {
+        border-color: #F4F4F7;
+    }
+
+    .modalTextLabel {
+        color: var(--ifm-font-color-base);
+    }
+
+    .modal .modalHeader img {
+        background-color: transparent;
+        margin: auto;
+    }
+
+    .submitButton:disabled {
+        color: var(--light-gray-dark-theme);
+        background-color: var(--concrete-gray-color);
+    }
+}

docs/docusaurus/src/css/alerts.scss

@@ -9,7 +9,7 @@
   --ifm-color-success-dark: #B6C647;
 
   --ifm-color-warning-contrast-background: #FEFBF3;
-  --ifm-color-warning-dark: #F5CE4A;
+  --ifm-color-warning-dark: #F3C62D;
 
   --ifm-color-danger-contrast-background: #FEF6F9;
   --ifm-color-danger-dark: #E54F54;
@@ -18,6 +18,14 @@
   --color-cta-secondary-dark: var(--ifm-color-primary);
 }
 
+:root[data-theme='dark'] {
+  --ifm-color-info-contrast-background: var(--card-background-dark-theme);
+  --ifm-color-success-contrast-background: var(--card-background-dark-theme);
+  --ifm-color-warning-contrast-background: var(--card-background-dark-theme);
+  --ifm-color-danger-contrast-background: var(--card-background-dark-theme);
+  --ifm-color-cta-contrast-background: var(--card-background-dark-theme);
+}
+
 .alert {
   border-width: 1px;
   border-left-width: var(--ifm-alert-border-left-width);

docs/docusaurus/src/css/api_docs/api_docs.scss

@@ -34,7 +34,26 @@
       background-color: #1e1e1e;
     }
 
+    [data-theme='dark'] & {
+        p {
+          color: var(--ifm-font-color-base);
+        }
+
+        cite {
+          background-color: var(--gray-800);
+          border: none;
+          color: var(--ifm-font-color-base);
+        }
+
+        pre {
+          border: none;
+        }
+
+       .highlight pre {
+         background-color: var(--payne-gray-color);
+         border-color: transparent;
+         box-shadow: 0 3px 6px #00000029;
+         color: var(--ifm-font-color-base);
+       }
+    }
 }
-
-
-