style: apply Azure branded sidebar color scheme (light/dark mode)

Author: kristopherjturner

src/css/custom.css

@@ -15,6 +15,57 @@
   --ifm-color-primary-lightest: #4da3e4;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  /* Option B: Azure Branded Sidebar — Light mode */
+  --ifm-navbar-background-color: #0078d4;
+  --ifm-navbar-link-color: #ffffff;
+  --ifm-navbar-link-hover-color: #c8e6ff;
+}
+
+/* Navbar title and logo text in light mode */
+.navbar__title {
+  color: #ffffff;
+}
+.navbar__link {
+  color: #ffffff;
+}
+.navbar__link:hover,
+.navbar__link--active {
+  color: #c8e6ff;
+}
+
+/* Sidebar — light mode */
+.theme-doc-sidebar-container {
+  background-color: #0f3057;
+  border-right: none;
+}
+.theme-doc-sidebar-container .menu {
+  background-color: #0f3057;
+}
+.theme-doc-sidebar-container .menu__link {
+  color: #e0e6ed;
+}
+.theme-doc-sidebar-container .menu__link:hover {
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.theme-doc-sidebar-container .menu__link--active:not(.menu__link--sublist) {
+  color: #ffffff;
+  background-color: rgba(0, 120, 212, 0.4);
+}
+.theme-doc-sidebar-container .menu__link--sublist {
+  color: #b0c4de;
+}
+.theme-doc-sidebar-container .menu__link--sublist:hover {
+  color: #ffffff;
+}
+.theme-doc-sidebar-container .menu__list-item-collapsible:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+/* Sidebar category arrow color */
+.theme-doc-sidebar-container .menu__caret::before,
+.theme-doc-sidebar-container .menu__link--sublist-caret::after {
+  filter: brightness(3);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -27,4 +78,38 @@
   --ifm-color-primary-lighter: #5aabe6;
   --ifm-color-primary-lightest: #7cbdec;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+
+  /* Option B: Azure Branded Sidebar — Dark mode */
+  --ifm-navbar-background-color: #0d2137;
+  --ifm-background-color: #121212;
+}
+
+/* Sidebar — dark mode */
+[data-theme='dark'] .theme-doc-sidebar-container {
+  background-color: #0a1929;
+}
+[data-theme='dark'] .theme-doc-sidebar-container .menu {
+  background-color: #0a1929;
+}
+[data-theme='dark'] .theme-doc-sidebar-container .menu__link {
+  color: #b0c4de;
+}
+[data-theme='dark'] .theme-doc-sidebar-container .menu__link:hover {
+  color: #e0e6ed;
+  background-color: rgba(255, 255, 255, 0.06);
+}
+[data-theme='dark'] .theme-doc-sidebar-container .menu__link--active:not(.menu__link--sublist) {
+  color: #ffffff;
+  background-color: rgba(58, 150, 221, 0.25);
+}
+[data-theme='dark'] .theme-doc-sidebar-container .menu__link--sublist {
+  color: #8baac4;
+}
+[data-theme='dark'] .navbar__title,
+[data-theme='dark'] .navbar__link {
+  color: #e0e6ed;
+}
+[data-theme='dark'] .navbar__link:hover,
+[data-theme='dark'] .navbar__link--active {
+  color: #ffffff;
 }