True dark mode + distinct visual identities for CMS & Cloud

docusaurus/docusaurus.config.js

@@ -36,6 +36,10 @@ const config = {
       src: '/js/redirector.js',
       async: false, // Load synchronously to ensure it runs before page navigation
     },
+    {
+      src: '/js/folder-detector.js',
+      async: false,
+    },
     {
       src: '/js/hotjar.js',
       type: 'module',

docusaurus/src/components/Card/card.module.scss

@@ -229,6 +229,7 @@
     &--cta {
       border: solid 1px var(--strapi-card-border-color-dark);
       box-shadow: 0px 1px 10px 0px rgba(3, 3, 5, 0.35);
+      background: linear-gradient(180deg, var(--strapi-neutral-100) 0%, var(--strapi-neutral-0) 100%) !important;
 
       &:focus, &:hover {
         --strapi-card-border-color: #49494D;

docusaurus/src/scss/_base.scss

@@ -29,6 +29,7 @@ main {
 
 /**
  * Experimental: Different identity based on URL
+ * DOES NOT SEEM TO WORK ANYMORE, maybe data hydration is done too late?
  */
 // html[class*="docs-doc-id-dev-docs"] {
 //   .navbar {
@@ -62,8 +63,37 @@ main {
   }
 }
 
+/* Experimental: Another approach to style based on URL
+ * depends on folder-detector.js script
+ */
+// html[data-folder-source="cms"] {
+//   a {
+//     // color: var(--strapi-primary-600);
+//   }
+// }
+
+// html[data-folder-source="cloud"] {
+//    main a {
+//     color: var(--strapi-secondary-500) !important;
+//   }
+// }
+
 /** Dark mode */
 @include dark {
+  body {
+    background-color: var(--strapi-primary-100);
+  }
+
+  html, 
+  #__docusaurus,
+  .main-wrapper {
+    background-color: var(--strapi-primary-100);
+  }
+
+  :root[data-theme='dark'] {
+    --ifm-background-color: var(--strapi-primary-100);
+  }
+
   .container img[width="16"] {
     /* 'Temporary' fix while we figure a way to display white icons in dark mode 😅  */
     background-color: white;

docusaurus/src/scss/_tokens-overrides.scss

@@ -5,7 +5,7 @@
 :root {
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
-  --ifm-background-color: var(--strapi-neutral-0);
+  --ifm-background-color: var(--strapi-primary-0);
   --ifm-color-content: var(--strapi-neutral-800);
   --ifm-font-color-base: var(--strapi-neutral-800);
 
@@ -47,7 +47,7 @@
 @include dark {
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
-  --ifm-background-color: var(--strapi-neutral-0);
+  --ifm-background-color: var(--strapi-primary-100);
   --ifm-color-content: var(--strapi-neutral-800);
   --ifm-font-color-base: var(--strapi-neutral-800);
 

docusaurus/src/scss/_tokens.scss

@@ -124,6 +124,7 @@
   --strapi-neutral-900: #FFFFFF; /* both 800 and 900 identical in Figma */
   --strapi-neutral-800: #FFFFFF;
   --strapi-neutral-700: #EAEAEF;
+  --strapi-neutral-650: #DCDCE4;
   --strapi-neutral-600: #666687;
   --strapi-neutral-500: #c0c0cf;
   --strapi-neutral-400: #A5A5BA; /* incorrecly named in Figma */

docusaurus/src/scss/admonition.scss

@@ -193,6 +193,11 @@
     --custom-admonition-background-color: var(--strapi-neutral-0);
     --custom-admonition-code-background-color: var(--strapi-neutral-150);
     --custom-admonition-border-color: var(--strapi-neutral-200);
+    --custom-admonition-title-color: var(--strapi-neutral-650);
+
+    &__heading {
+      color: var(--custom-admonition-title-color);
+    }
 
     &--info,
     &--callout,
@@ -202,7 +207,7 @@
     }
 
     &--prerequisites {
-      --custom-admonition-background-color: transparent;
+      // --custom-admonition-background-color: transparent;
     }
 
     &--note {

docusaurus/src/scss/custom-doc-cards.scss

@@ -115,5 +115,8 @@
     .cardDescription {
       color: var(--strapi-neutral-400);
     }
+    .cardTitle {
+      color: var(--strapi-neutral-650);
+    }
   }
 }

docusaurus/src/scss/custom-search-bar.scss

@@ -189,8 +189,12 @@
 
 @include dark {
   .my-custom-search-bar {
-    background: var(--strapi-neutral-0);
+    background: var(--strapi-primary-100);
     border: var(--strapi-input-border);
     color: var(--strapi-dark-100);
+
+    &::after {
+      background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, var(--strapi-primary-100) 100%);
+    }
   }
 }

docusaurus/src/scss/navbar.scss

@@ -446,6 +446,10 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
 }
 
 @include dark {
+  .navbar {
+    background-color: var(--strapi-primary-100);
+  }
+
   .kapa-widget-button {
     button {
       svg {
@@ -474,6 +478,10 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
   .navbar__link--active[href^="/cms/"] {
     background-color: var(--strapi-neutral-0);
     color: var(--strapi-primary-600);
+
+    i::before {
+      color: var(--strapi-primary-600);
+    }
   }
 
   .navbar__link--active[href^="/cloud/"] {

docusaurus/src/scss/sidebar.scss

@@ -10,6 +10,7 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
 
 .navbar-sidebar {
   --ifm-navbar-background-color: var(--strapi-neutral-0);
+  --docusaurus-collapse-button-bg: var(--strapi-primary-100);
 
   &__brand {
     --custom-navbar-sidebar-horizontal-padding: calc(var(--custom-navbar-items-gap) * 2);
@@ -47,7 +48,7 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
 
 .menu {
   --custom-sidebar-caret-size: 1.25rem;
-  --custom-sidebar-menu-font-weight: 400;
+  --custom-sidebar-menu-font-weight: 500;
   --custom-sidebar-menu-padding-y: var(--strapi-spacing-4);
 
   --ifm-menu-color-background-active: transparent;
@@ -422,23 +423,31 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
 
 /** Dark mode */
 @include dark {
-  --ifm-menu-color: var(--strapi-neutral-1000);
+  --ifm-menu-color: var(--strapi-neutral-400);
 
   .theme-doc-sidebar-container {
     .menu {
       --ifm-menu-color-background-hover: var(--strapi-neutral-100);
 
       &__link--active {
         --ifm-menu-color-active: var(--strapi-neutral-800);
+        background-color: var(--strapi-neutral-0);
+        padding: 6px 8px 6px 16px;
+        position: relative;
+        left: -16px;
 
         &:not(.menu__link--sublist) {
           --ifm-menu-color-active: var(--strapi-primary-500);
         }
       }
 
       &__list-item-collapsible .menu__link {
-        color: var(--strapi-neutral-700);
+        color: var(--strapi-neutral-400);
       }
     }
   }
+
+  [class*="collapseSidebarButton"] {
+    background-color: var(--strapi-primary-100);
+  }
 }

docusaurus/src/scss/table-of-contents.scss

@@ -5,6 +5,7 @@
 .table-of-contents {
   --custom-toc-py: var(--strapi-spacing-1);
   --custom-toc-items-py: var(--strapi-spacing-1);
+  --custom-active-toc-link-color: var(--strapi-primary-600);
 
   --ifm-toc-padding-vertical: var(--custom-toc-py);
 
@@ -35,7 +36,8 @@
     }
 
     &--active {
-      color: var(--strapi-primary-600);
+      // color: var(--strapi-primary-600);
+      color: var(--custom-active-toc-link-color);
 
       &:before {
         content: " ";
@@ -210,3 +212,21 @@ ul.table-of-contents__left-border {
     }
   }
 }
+
+@include dark {
+  .table-of-contents {
+    *:not([class*="active"]),
+    &::before,
+    &::after {
+      color: var(--strapi-neutral-400);
+    }
+
+    > li {
+      &::before {
+        background-color: var(--strapi-neutral-0);
+      }
+    }
+  }
+
+
+}

docusaurus/src/scss/typography.scss

@@ -87,6 +87,9 @@ p, ul {
 /** Dark mode */
 @include dark {
   h1, h2, h3, h4, h5, h6 {
-    --ifm-heading-color: var(--strapi-neutral-900);
+    --ifm-heading-color: var(--strapi-neutral-1000) !important;
+  }
+  p, li {
+    color: #A5A5BA;
   }
 }

docusaurus/static/js/folder-detector.js

@@ -0,0 +1,37 @@
+(function() {
+  // Fonction pour déterminer le type de dossier à partir de l'URL
+  function detectFolderFromURL() {
+    const path = window.location.pathname;
+
+    if (path.includes('/cms/')) {
+      return 'cms';
+    } else if (path.includes('/cloud/')) {
+      return 'cloud';
+    }
+
+    return 'default';
+  }
+
+  // Fonction pour appliquer l'attribut data-folder-source
+  function applyFolderAttribute() {
+    const folderType = detectFolderFromURL();
+    document.documentElement.setAttribute('data-folder-source', folderType);
+  }
+
+  // Appliquer immédiatement
+  applyFolderAttribute();
+
+  // Pour une Single Page Application, écouter les changements de route
+  if (typeof window !== 'undefined') {
+    // Mutation Observer pour détecter les changements sur l'élément html
+    const observer = new MutationObserver(function(mutations) {
+      applyFolderAttribute();
+    });
+
+    // Observer les changements de classe qui pourraient indiquer un changement de page
+    observer.observe(document.documentElement, { 
+      attributes: true,
+      attributeFilter: ['class']
+    });
+  }
+})();