From f4f424e1bf412e40939225dda11cda73bac4cb4b Mon Sep 17 00:00:00 2001 From: Jordan Violet Date: Wed, 15 Oct 2025 13:23:59 -0400 Subject: [PATCH 1/2] updated colors, logos --- docusaurus.config.js | 4 +- .../HomepageFeatures/styles.module.css | 16 ++--- src/css/custom.css | 55 ++++++++++-------- src/theme/Root.js | 27 ++++++++- static/branding/favicon.ico | Bin 16958 -> 0 bytes static/branding/logo-red.svg | 37 ------------ static/branding/logo-white.svg | 1 - 7 files changed, 66 insertions(+), 74 deletions(-) delete mode 100644 static/branding/favicon.ico delete mode 100644 static/branding/logo-red.svg delete mode 100644 static/branding/logo-white.svg 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.ico b/static/branding/favicon.ico deleted file mode 100644 index 03c08ce6eff6f56566c69f900e602396a5b8bd33..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 16958 zcmeI2-)omu9LLXEw#;f-L&u6XGI1ATP>>?Z#sp(Gqd&kXBD#n)?9LFkE2#^wR4Pam z1wp;BL7;+cUIg6~(kzXBjS9pRn~J8WdwjjWJ6~vD&a?0HoagEL-Nok_ubuC6&iVW} z=Xt*8d_HG$u7#iee#h?~*E`_c66ahmP~}EI^_8oCrU?D+>X>lQ31g5%@)L3|LdZmP zo%BH)d=9a`T|xFW2>PLVu<_gTxA#B(J7(X1TmNkRPuXLF8&8Hxzc<?QJPP|E z*2cfcz75h9v=dY5_32z?5@LP(4cQga6}nXK`Is`+hUE6Z0_iI2k}ep4TM+BpkH|g^ zscxwaK7e}=Yv(+&FF>lDJPp$0*-1GKv3`vqtM@zAyxL$0u0pIG&E1EPY9~*F^nm8` zEX4XGxi8>hNHwoESPs8J5nC6Ke-$dvF4bV21}`t4cfegJ;?sLxU#eB#u6N`_L0j_k zB=kV4y}24B=h2?^7Ze%$HRRWMeW_-Bdkf`9P{f{O@55KH8l*GTZf%45dYM7Wb5PWm zZ_x2P)S8-guXax#rQ(I6b|wDBT)*E!sG za0;}}2z^$a;>R?(*m}i`n&049LzU_ao$xip+MN$_+B52|`?Yg`jK(kCf*UX&#uDR$ z*1c}19b(;k$-q-^3}S3ITjn-?zYCRTS$DvJ4qjGk(l5~L@#M9C9G^QhhS*E8@DRKM zQ;^q(X7yJNvIe4`eRa;fj)j!F;0`ovOj+$}57`8B#v0Y}Whv36dDK3=4;0sB^`+7M zuHoBOC^i4q9HCP@3!j13mPU`Qo;{6y8|Yol@>p~Akxq|diBF(Nj$CgndD}1I&-?Hg zq9w-K@8b?hi68wCANOvR6^ewW?P+t>VSU64-)LGekeR_mae*;n8aR_vNp=YKsWZ65_M|~ypJ?sa?v8y0c4j=NZk#+c4{cbGc z^K+mxAgz}ppzrLLFj~V=?svm>cmrO6F3|UD-aYF^&gcJWYtpqP$+&B`GT%H*xz@_O z%_>J+`;==*66d<7oU4|7_qf09Tsx@LrMmx?!_zbO)l#y$e2LBx-BOOL#P+00e8v!} elcb`!J4q^v`;r+!3JKD^(vfaSf~8@VGuH$6CsV8d 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 From f79c018fce6435c00bc32df4287f12e5568eac2d Mon Sep 17 00:00:00 2001 From: Jordan Violet Date: Wed, 15 Oct 2025 13:24:06 -0400 Subject: [PATCH 2/2] updated colors, logos --- static/branding/favicon-dark.ico | Bin 0 -> 4154 bytes static/branding/favicon-light.ico | Bin 0 -> 361 bytes static/branding/logo-dark.svg | 10 ++++++++++ static/branding/logo-light.svg | 10 ++++++++++ 4 files changed, 20 insertions(+) create mode 100644 static/branding/favicon-dark.ico create mode 100644 static/branding/favicon-light.ico create mode 100644 static/branding/logo-dark.svg create mode 100644 static/branding/logo-light.svg diff --git a/static/branding/favicon-dark.ico b/static/branding/favicon-dark.ico new file mode 100644 index 0000000000000000000000000000000000000000..3d5ab1d4dd58010d8177d35ba7e915d885c16214 GIT binary patch literal 4154 zcmZQzU<5)1c?J;4pd!G)AjZJJpaH}RKx_xZAaM|A;Adb^)`MWM0FZEy)%lMN+e&Hv zpVcwpKc!%P@6`Vwv#{BLPi)lw(eNKlf1~+twEUqg1V+o>(fVh!{vB<9;A?APlcPub z%SFimXS&Foubs5k|KiA$|E>8I zSaEZ1+5e?e=ltKfW)t~%?WX@VDf$0FcA>|yqns|-{D1%c{l|qL-nsWb+Scp8JxD)L zy@MREuRsz8>cP^#0J$f^%KiWSn|BC?@75LT{<|t0{RhPtHnYeP1KB^jbK?KMfBzD+ z|JTo-|EIU~{0D^>HQWG7*O|VN|6e_OPS9?cg0G*y{GU|U{@+>A0Bc+l8wMb|W9@zZ zUpaFgW;D_Ck8j`qubH#>e~2kC&j8IKB`jd+FFz#V|F!d%h_(}(!dsWG{qHGn0Ows$ zoPf+mcMFIQO0yt27bV00i7tWvmra}d|K001*o-7u?9ZP+|8HKt`hU^H8UKrbc{tS6 r`M;Zr5jc%FDd_+A(YE}b;OzguC9nMd_Lb}Zzj*Qtrya0<_(0GA%yrAL literal 0 HcmV?d00001 diff --git a/static/branding/favicon-light.ico b/static/branding/favicon-light.ico new file mode 100644 index 0000000000000000000000000000000000000000..f0d052b6837cbe6870b4013baff4b2610d2e7eb3 GIT binary patch literal 361 zcmZQzU}Rus5D;Jh0tJRRAZZ4~5)u%8CXku}#0m-!eh!fO3&foPe(t-iyCAU*iV3{1-}v)#dTS99zNHtBw&#OP+kFSQE^q(7a+$N zYS9HpUIqpZX2S#fp9_Y3c*%3;lHa7NJ2l5-6&xBE7@1f&1fYz*1V-Nu7MrM@)3cH7 F0stR&SR?=d literal 0 HcmV?d00001 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