Merge pull request #1334 from Unleash/docs/a11y-dark-theme-fixes

docs(a11y): fix a number of contrast issues with the dark theme
Unleash · Feb 9, 2022 · 281115e · 281115e
2 parents 4754d20 + fe69c1d
commit 281115e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git a/website/docs/sdks/unleash-proxy.md b/website/docs/sdks/unleash-proxy.md
@@ -168,7 +168,7 @@ Refer the [custom activation strategy documentation](../advanced/custom-activati
 
 The Unleash Proxy has a very simple API. It takes the [Unleash Context](../user_guide/unleash_context) as input and will return the feature toggles relevant for that specific context.
 
-![The Unleash Proxy](/img/The-Unleash-Proxy-API.png).
+![The Unleash Proxy](/img/The-Unleash-Proxy-API.png)
 
 ### Payload
 

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -25,11 +25,6 @@ module.exports = {
                 src: 'img/logo.svg',
             },
             items: [
-                {
-                    to: '/',
-                    label: 'Documentation',
-                    activeBaseRegex: '(user_guide|sdks|addons|advanced)',
-                },
                 {
                     href: 'https://www.getunleash.io/plans',
                     label: 'Unleash Enterprise',

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -10,27 +10,64 @@
     --unleash-color-purple: #635dc5;
     --unleash-color-gray: #ecebeb;
 
-    --unleash-color-admonition-background: var(--unleash-color-gray);
-    --unleash-color-admonition-border: #999;
-    --unleash-color-admonition-text: #2b2b2b;
+    --ifm-code-font-size: 90%;
+    --ifm-font-size-base: 15px;
+    --navbar-link-color: #122d33;
+}
 
+footer {
+    --ifm-footer-link-hover-color: var(--ifm-footer-link-color);
+}
+
+html[data-theme='light'] {
     --ifm-color-primary: #39535b;
     --ifm-color-primary-dark: #334b52;
     --ifm-color-primary-darker: #30474d;
     --ifm-color-primary-darkest: #283a40;
     --ifm-color-primary-light: #3f5b64;
     --ifm-color-primary-lighter: #425f69;
     --ifm-color-primary-lightest: #4a6c76;
-    --ifm-code-font-size: 90%;
-    --ifm-font-size-base: 15px;
+
     --ifm-link-color: var(--unleash-color-purple);
     --ifm-menu-color-background-active: var(--unleash-color-gray);
     --ifm-menu-color-background-hover: var(--unleash-color-gray);
-    --navbar-link-color: #122d33;
+
+    --unleash-color-admonition-background: var(--unleash-color-gray);
+    --unleash-color-admonition-border: #999;
+    --unleash-color-admonition-text: #2b2b2b;
 }
 
-footer {
-    --ifm-footer-link-hover-color: var(--ifm-footer-link-color);
+html[data-theme='dark'] {
+    --ifm-color-primary-lightest: #d1d1ff;
+    --ifm-color-primary-lighter: #c9c9ff;
+    --ifm-color-primary-light: #c2c0ff;
+    --ifm-color-primary: #bab8ff;
+    --ifm-color-primary-dark: #b2afff;
+    --ifm-color-primary-darker: #aba7ff;
+    --ifm-color-primary-darkest: #a39eff;
+
+    --unleash-color-purple: var(--ifm-color-primary);
+    --unleash-color-gray: #333;
+    --ifm-menu-color-background-active: var(--unleash-color-gray);
+    --ifm-menu-color-background-hover: var(--unleash-color-gray);
+
+    --ifm-link-color: var(--ifm-color-primary);
+
+    --unleash-color-admonition-background: var(
+        --ifm-color-secondary-contrast-background
+    );
+
+
+    --unleash-img-background-color: #fff;
+}
+
+img {
+    background: var(--unleash-img-background-color);
+    display: block;
+    margin: auto;
+    border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
+    border-radius: var(--ifm-global-radius);
+    box-shadow: var(--ifm-global-shadow-lw);
 }
 
 [class^='docTitle'] {