diff --git a/docusaurus.config.js b/docusaurus.config.js
index 28bffce38c..3fe1508f4f 100644
--- a/docusaurus.config.js
+++ b/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: [
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index 1a6ecf7ef1..073e7d938f 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/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 */
diff --git a/src/css/custom.css b/src/css/custom.css
index 4eb275d2f9..ffdbb1237c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,13 +6,13 @@
/* 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;
@@ -20,13 +20,13 @@
/* 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;
diff --git a/src/theme/Root.js b/src/theme/Root.js
index e7a7824489..f6ba63ee53 100644
--- a/src/theme/Root.js
+++ b/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 (
<>
diff --git a/static/branding/favicon-dark.ico b/static/branding/favicon-dark.ico
new file mode 100644
index 0000000000..3d5ab1d4dd
Binary files /dev/null and b/static/branding/favicon-dark.ico differ
diff --git a/static/branding/favicon-light.ico b/static/branding/favicon-light.ico
new file mode 100644
index 0000000000..f0d052b683
Binary files /dev/null and b/static/branding/favicon-light.ico differ
diff --git a/static/branding/favicon.ico b/static/branding/favicon.ico
deleted file mode 100644
index 03c08ce6ef..0000000000
Binary files a/static/branding/favicon.ico and /dev/null differ
diff --git a/static/branding/logo-dark.svg b/static/branding/logo-dark.svg
new file mode 100644
index 0000000000..9c695e4359
--- /dev/null
+++ b/static/branding/logo-dark.svg
@@ -0,0 +1,10 @@
+
diff --git a/static/branding/logo-light.svg b/static/branding/logo-light.svg
new file mode 100644
index 0000000000..3d7e446593
--- /dev/null
+++ b/static/branding/logo-light.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/static/branding/logo-red.svg b/static/branding/logo-red.svg
deleted file mode 100644
index c46aa42cd3..0000000000
--- a/static/branding/logo-red.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-
diff --git a/static/branding/logo-white.svg b/static/branding/logo-white.svg
deleted file mode 100644
index aa971b16a9..0000000000
--- a/static/branding/logo-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file