Feature branding

docusaurus.config.js

@@ -180,8 +180,8 @@ const config = {
       navbar: {
         logo: {
           alt: 'Netwrix Logo',
-          src: 'branding/logo-red.svg',
-          srcDark: 'branding/logo-white.svg',
+          src: 'branding/logo-dark.svg',
+          srcDark: 'branding/logo-light.svg',
           href: '/',
         },
         items: [

src/components/HomepageFeatures/styles.module.css

@@ -171,13 +171,13 @@
 }
 
 .latestBadge {
-  background: var(--ifm-color-success);
-  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
+  background: #41F2CC;
+  color: #000000 !important;
 }
 
 .latestBadge:hover {
-  background: var(--ifm-color-success-dark);
-  color: white !important;
+  background: #34C263;
+  color: #000000 !important;
 }
 
 [data-theme='dark'] .versionBadge {
@@ -191,13 +191,13 @@
 }
 
 [data-theme='dark'] .latestBadge {
-  background: var(--ifm-color-success-darker);
-  color: var(--ifm-color-success-lightest);
+  background: #27914A;
+  color: #D9FACB !important;
 }
 
 [data-theme='dark'] .latestBadge:hover {
-  background: var(--ifm-color-success);
-  color: white !important;
+  background: #41F2CC;
+  color: #000000 !important;
 }
 
 /* Dark mode color improvements */

src/css/custom.css

@@ -6,27 +6,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2a5298;
-  --ifm-color-primary-dark: #254a89;
-  --ifm-color-primary-darker: #234582;
-  --ifm-color-primary-darkest: #1c376b;
-  --ifm-color-primary-light: #2f5aa7;
-  --ifm-color-primary-lighter: #325fae;
-  --ifm-color-primary-lightest: #4169c4;
+  --ifm-color-primary: #5851DB;
+  --ifm-color-primary-dark: #4641AF;
+  --ifm-color-primary-darker: #353183;
+  --ifm-color-primary-darkest: #1A1536;
+  --ifm-color-primary-light: #7974E2;
+  --ifm-color-primary-lighter: #9B97E9;
+  --ifm-color-primary-lightest: #BCB9F1;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-font-family-base: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #4d7fd8;
-  --ifm-color-primary-dark: #3770d3;
-  --ifm-color-primary-darker: #2d66d0;
-  --ifm-color-primary-darkest: #1e4fac;
-  --ifm-color-primary-light: #638edd;
-  --ifm-color-primary-lighter: #6d97e0;
-  --ifm-color-primary-lightest: #8eafe8;
+  --ifm-color-primary: #8B51DB;
+  --ifm-color-primary-dark: #7974E2;
+  --ifm-color-primary-darker: #5851DB;
+  --ifm-color-primary-darkest: #4641AF;
+  --ifm-color-primary-light: #9B97E9;
+  --ifm-color-primary-lighter: #BCB9F1;
+  --ifm-color-primary-lightest: #DEDDFC;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
@@ -45,14 +45,14 @@ html {
 
 .button--outline {
   font-weight: 600;
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(88, 81, 219, 0.1);
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(88, 81, 219, 0.3);
 }
 
 .button--outline:hover {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(88, 81, 219, 0.2);
+  border-color: rgba(88, 81, 219, 0.5);
 }
 
 /* Navbar responsive improvements */
@@ -99,7 +99,7 @@ html {
 .navbar-item-latest {
   font-weight: 600 !important;
   color: var(--ifm-color-primary-darkest) !important;
-  background: linear-gradient(90deg, rgba(42, 82, 152, 0.08), rgba(42, 82, 152, 0.03));
+  background: linear-gradient(90deg, rgba(88, 81, 219, 0.08), rgba(88, 81, 219, 0.03));
   border-left: 3px solid var(--ifm-color-primary);
   padding-left: 12px !important;
   margin: 2px 0;
@@ -127,14 +127,14 @@ html {
 .navbar-item-legacy:hover {
   color: var(--ifm-color-primary) !important;
   opacity: 1;
-  background: rgba(42, 82, 152, 0.05);
+  background: rgba(88, 81, 219, 0.05);
   border-radius: 4px;
 }
 
 /* Dark mode adjustments */
 [data-theme='dark'] .navbar-item-latest {
   color: var(--ifm-color-primary-lightest) !important;
-  background: linear-gradient(90deg, rgba(77, 127, 216, 0.1), rgba(77, 127, 216, 0.04));
+  background: linear-gradient(90deg, rgba(139, 81, 219, 0.1), rgba(139, 81, 219, 0.04));
   border-left-color: var(--ifm-color-primary-light);
 }
 
@@ -144,7 +144,7 @@ html {
 
 [data-theme='dark'] .navbar-item-legacy:hover {
   color: var(--ifm-color-primary-light) !important;
-  background: rgba(77, 127, 216, 0.08);
+  background: rgba(139, 81, 219, 0.08);
 }
 
 /* Product grouping visual separation */
@@ -197,14 +197,14 @@ html {
 /* Start of Selection */
 /* Apply borders only to images within docs pages */
 .theme-doc-markdown img {
-  border: 1px solid #e0e0e0;
+  border: 1px solid #E2E1DC;
   border-radius: 4px;
 }
 /* End of Selection */
 
 /* Dark mode image borders */
 [data-theme='dark'] img {
-  border-color: #3a3a3a;
+  border-color: #48445F;
 }
 
 /* Add this to your /src/css/custom.css file */
@@ -288,12 +288,17 @@ html {
 
 /* Highlight search terms more prominently */
 .DocSearch-Hit-content mark {
-  background-color: var(--ifm-color-primary-lighter);
+  background-color: #FDF0CC;
   color: var(--ifm-font-color-base);
   font-weight: 600;
   padding: 0 2px;
 }
 
+[data-theme='dark'] .DocSearch-Hit-content mark {
+  background-color: #624800;
+  color: var(--ifm-color-white);
+}
+
 /* Add product/version badges if needed */
 .DocSearch-Hit-content-wrapper {
   position: relative;

src/theme/Root.js

@@ -1,9 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ProductMetaTags from '@site/src/components/ProductMetaTags';
 
 // Default implementation from Docusaurus
 // https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/Root/index.tsx
 export default function Root({ children }) {
+  useEffect(() => {
+    // Update favicon based on color mode using MutationObserver
+    const updateFavicon = () => {
+      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+      const favicon = document.querySelector("link[rel='icon']");
+      if (favicon) {
+        favicon.href = isDark
+          ? '/branding/favicon-light.ico'
+          : '/branding/favicon-dark.ico';
+      }
+    };
+
+    // Initial update
+    updateFavicon();
+
+    // Watch for theme changes
+    const observer = new MutationObserver(updateFavicon);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <>
       <ProductMetaTags />