Fix/dark mode ui/ux (#565)

* Fix mobile layout for Algolia search modal

* Fix text wrap in search modal at certain screen widths

* Dark Mode: Fix parts of the background on search results page

* Dark Mode: Improve general experience, contrast, backgrounds, buttons, etc.

Author: DanPiazza-Netwrix

docusaurus.config.js

@@ -218,7 +218,7 @@ const config = {
         logo: {
           alt: 'Netwrix Logo',
           src: 'branding/Netwrix_Logo_Dark.svg',
-          srcDark: 'branding/Netwrix_Logo_Light.svg',
+          srcDark: 'branding/logo-light.svg',
           href: '/',
         },
         items: [

src/components/CommunityHighlights/styles.module.css

@@ -105,6 +105,11 @@
   border-color: var(--ifm-color-emphasis-200);
 }
 
+[data-theme='dark'] .featuredLabel {
+  background: linear-gradient(45deg, #8d1f1f, #835b00);
+  color: #fff;
+}
+
 .featuredCard::before {
   content: '';
   position: absolute;

src/pages/index.module.css

@@ -234,6 +234,10 @@
   background: var(--ifm-background-color);
 }
 
+[data-theme='dark'] .stats {
+  background: linear-gradient(135deg, #003c6c 0%, #005a9e 100%);
+}
+
 /* Responsive */
 @media screen and (max-width: 996px) {
   .heroBanner {

src/theme/ColorModeToggle/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
+import IconDarkMode from '@theme/Icon/DarkMode';
+import IconLightMode from '@theme/Icon/LightMode';
+import styles from './styles.module.css';
+
+/**
+ * Swizzled ColorModeToggle.
+ *
+ * Docusaurus default shows the current-mode icon (sun in light, moon in dark).
+ * This version shows the target-mode icon instead:
+ * - Light mode → moon ("switch to dark")
+ * - Dark mode  → sun  ("switch to light")
+ */
+export default function ColorModeToggle({className, buttonClassName, value, onChange}) {
+  const isBrowser = useIsBrowser();
+  const title = translate(
+    {
+      message: 'Switch between dark and light mode (currently {mode})',
+      id: 'theme.colorToggle.ariaLabel',
+      description: 'The ARIA label for the navbar color mode toggle',
+    },
+    {
+      mode:
+        value === 'dark'
+          ? translate({
+              message: 'dark mode',
+              id: 'theme.colorToggle.ariaLabel.mode.dark',
+              description: 'The name for the dark color mode',
+            })
+          : translate({
+              message: 'light mode',
+              id: 'theme.colorToggle.ariaLabel.mode.light',
+              description: 'The name for the light color mode',
+            }),
+    },
+  );
+
+  return (
+    <div className={clsx(styles.toggle, className)}>
+      <button
+        className={clsx('clean-btn', buttonClassName, styles.toggleButton, {
+          [styles.toggleButtonDisabled]: !isBrowser,
+        })}
+        type="button"
+        onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
+        disabled={!isBrowser}
+        title={title}
+        aria-label={title}
+        aria-live="polite">
+        {/* Moon shown in light mode → "click to switch to dark" */}
+        <IconDarkMode className={clsx(styles.icon, styles.lightModeIcon)} />
+        {/* Sun shown in dark mode → "click to switch to light" */}
+        <IconLightMode className={clsx(styles.icon, styles.darkModeIcon)} />
+      </button>
+    </div>
+  );
+}

src/theme/ColorModeToggle/styles.module.css

@@ -0,0 +1,36 @@
+.toggle {
+  display: flex;
+  align-items: center;
+}
+
+.toggleButton {
+  display: flex;
+  overflow: hidden;
+}
+
+.toggleButtonDisabled {
+  cursor: not-allowed;
+}
+
+.icon {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+
+/* Moon (lightModeIcon) visible in light mode */
+.lightModeIcon {
+  display: block;
+}
+
+/* Sun (darkModeIcon) hidden in light mode */
+.darkModeIcon {
+  display: none;
+}
+
+[data-theme='dark'] .lightModeIcon {
+  display: none;
+}
+
+[data-theme='dark'] .darkModeIcon {
+  display: block;
+}

src/theme/SearchBar/index.js

@@ -390,7 +390,7 @@ function MultiSelectDropdown({label, options, selectedValues, onChange, placehol
                                     padding: '8px 12px',
                                     cursor: 'pointer',
                                     fontSize: '14px',
-                                    background: isSelected ? 'var(--docsearch-hit-active-color)' : 'transparent',
+                                    background: 'transparent',
                                 }}
                                 onMouseEnter={(e) => {
                                     if (!isSelected) {

src/theme/SearchPage/index.js

@@ -683,7 +683,7 @@ function SearchPageContent() {
                         position: 'sticky',
                         top: 'var(--ifm-navbar-height)',
                         zIndex: 10,
-                        backgroundColor: 'var(--ifm-navbar-background-color)',
+                        backgroundColor: 'var(--ifm-background-color)',
                         paddingTop: '16px',
                         paddingBottom: '12px',
                     }}>
@@ -708,6 +708,8 @@ function SearchPageContent() {
                                         fontSize: '16px',
                                         borderRadius: '8px',
                                         border: '2px solid var(--ifm-color-emphasis-300)',
+                                        background: 'var(--ifm-background-color)',
+                                        color: 'var(--ifm-font-color-base)',
                                         marginBottom: '0',
                                         transition: 'border-color 0.2s',
                                     }}
@@ -852,7 +854,7 @@ function SearchPageContent() {
                         flexDirection: 'column',
                         paddingTop: '16px',
                         paddingBottom: '16px',
-                        backgroundColor: 'var(--ifm-navbar-background-color)',
+                        backgroundColor: 'var(--ifm-background-color)',
                     }}>
                         <MultiSelect
                             label="Products"