feat(storefront): dark mode support (#2743)

resolves #2660 resolves #2770
digdir · Nov 13, 2024 · 1f1271d · 1f1271d
1 parent 7eebe0a
commit 1f1271d
Show file tree

Hide file tree

Showing 30 changed files with 234 additions and 125 deletions.
diff --git a/apps/_components/src/Footer/Footer.module.css b/apps/_components/src/Footer/Footer.module.css
@@ -1,5 +1,6 @@
 .footer {
   background-color: var(--ds-color-neutral-background-subtle);
+  border-top: 1px solid var(--ds-color-neutral-border-default);
 }
 
 .container {

diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css
@@ -4,7 +4,12 @@
   align-items: center;
   position: relative;
   z-index: 5;
-  background-color: white;
+  background-color: var(--ds-color-neutral-background-default);
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-background-subtle);
+  }
 }
 
 .container {
@@ -15,6 +20,14 @@
   padding: 0 var(--ds-spacing-8);
 }
 
+.container nav {
+  display: flex;
+}
+
+.container nav button {
+  height: fit-content;
+}
+
 .logoContainer {
   display: flex;
   align-items: center;
@@ -26,31 +39,35 @@
   width: auto;
 }
 
+.logoLink svg [data-text] {
+  fill: var(--ds-color-neutral-text-default);
+}
+
 .logoLink {
   display: flex;
   align-items: center;
 }
 
 .tag {
-  background-color: #f2d6ff;
+  background-color: var(--ds-global-purple-5);
   border-radius: 4px;
   padding: 7px 10px;
   font-size: 18px;
   font-weight: 500;
 }
 
 .toggle {
-  display: none;
+  display: flex;
   border: none;
-  background-color: transparent;
+  place-self: flex-end;
 }
 
 .menu {
   display: flex;
   margin: 0;
   padding: 0;
   max-width: 100%;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .item {
@@ -120,18 +137,18 @@
     height: 72px;
   }
 
-  .toggle {
-    display: block;
+  & nav {
+    gap: var(--ds-spacing-1);
   }
 
   .menu {
-    border-top: 1px solid #e2e2e2;
+    border-top: 1px solid var(--ds-color-neutral-border-subtle);
     position: absolute;
     z-index: 1;
     left: 0;
     right: 0;
-    top: 71px;
-    background-color: white;
+    top: 75px;
+    background-color: var(--ds-color-neutral-background-default);
     box-shadow: var(--ds-shadow-lg);
     flex-direction: column;
     display: none;
@@ -161,48 +178,6 @@
   }
 }
 
-@media (max-width: 900px) {
-  &.header {
-    height: 72px;
-  }
-
-  .toggle {
-    display: block;
-  }
-
-  .menu {
-    border-top: 1px solid #e2e2e2;
-    position: absolute;
-    z-index: 1;
-    left: 0;
-    right: 0;
-    top: 71px;
-    background-color: white;
-    box-shadow: var(--ds-shadow-lg);
-    flex-direction: column;
-    display: none;
-    padding: 20px 0;
-    width: 100%;
-  }
-
-  .item {
-    padding: 20px 0;
-    margin-left: 16px;
-  }
-
-  .active {
-    display: block;
-  }
-
-  .item .active {
-    display: inline-block;
-  }
-
-  .linkIcon {
-    place-items: start;
-  }
-
-  .logo {
-    height: 26px;
-  }
+.toggleButton svg {
+  font-size: 1.75em;
 }
diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx
@@ -1,6 +1,16 @@
 'use client';
-import { Paragraph, SkipLink } from '@digdir/designsystemet-react';
-import { MenuHamburgerIcon, XMarkIcon } from '@navikt/aksel-icons';
+import {
+  Button,
+  Paragraph,
+  SkipLink,
+  Tooltip,
+} from '@digdir/designsystemet-react';
+import {
+  MenuHamburgerIcon,
+  MoonIcon,
+  SunIcon,
+  XMarkIcon,
+} from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -15,6 +25,7 @@ type HeaderProps = {
   menu: { name: string; href: string }[];
   betaTag?: boolean;
   skipLink?: boolean;
+  themeSwitcher?: boolean;
 };
 
 /**
@@ -47,13 +58,35 @@ const detectWrap = (items: HTMLCollection) => {
 /**
  * Only works in next.js projects
  */
-const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
+const Header = ({
+  menu,
+  betaTag,
+  skipLink = true,
+  themeSwitcher = false,
+}: HeaderProps) => {
   const [open, setOpen] = useState(false);
   const [isHamburger, setIsHamburger] = useState(false);
   const menuRef = useRef<HTMLUListElement>(null);
   const headerRef = useRef<HTMLElement>(null);
   const pathname = usePathname();
 
+  const [theme, setTheme] = useState('light');
+
+  const handleThemeChange = (newTheme: 'dark' | 'light') => {
+    setTheme(newTheme);
+    document.documentElement.setAttribute('data-ds-color-mode', newTheme);
+  };
+
+  useEffect(() => {
+    if (!themeSwitcher) return;
+    // get user preference
+    const userPreference = window.matchMedia('(prefers-color-scheme: dark)');
+    const userPrefersDark = userPreference.matches;
+
+    // set theme based on user preference
+    handleThemeChange(userPrefersDark ? 'dark' : 'light');
+  }, []);
+
   useEffect(() => {
     const handleResize = () => {
       if (isHamburger) return;
@@ -91,17 +124,32 @@ const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
             {betaTag && <div className={classes.tag}>Beta</div>}
           </div>
           <nav>
-            <button
-              aria-expanded={open}
-              aria-label='Meny'
-              className={cl(classes.toggle, 'ds-focus')}
-              onClick={() => {
-                setOpen(!open);
-              }}
-            >
-              {open && <XMarkIcon fontSize={26} color='#1E2B3C' />}
-              {!open && <MenuHamburgerIcon fontSize={26} color='#1E2B3C' />}
-            </button>
+            {isHamburger && (
+              <Button
+                variant='tertiary'
+                icon={true}
+                color='neutral'
+                aria-expanded={open}
+                aria-label='Meny'
+                className={cl(classes.toggle, 'ds-focus')}
+                onClick={() => {
+                  setOpen(!open);
+                }}
+              >
+                {open && (
+                  <XMarkIcon
+                    fontSize={26}
+                    color='var(--ds-color-neutral-text-default)'
+                  />
+                )}
+                {!open && (
+                  <MenuHamburgerIcon
+                    fontSize={26}
+                    color='var(--ds-color-neutral-text-default)'
+                  />
+                )}
+              </Button>
+            )}
             <ul
               ref={menuRef}
               className={cl(classes.menu, open && classes.active)}
@@ -150,6 +198,29 @@ const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => {
                 </Link>
               </li>
             </ul>
+            {themeSwitcher && (
+              <Tooltip
+                content={`Bytt til ${theme === 'light' ? 'mørk' : 'lys'} modus`}
+                placement='bottom'
+              >
+                <Button
+                  aria-label={`Bytt til ${theme === 'light' ? 'mørk' : 'lys'} modus`}
+                  variant='tertiary'
+                  icon={true}
+                  color='neutral'
+                  onClick={() => {
+                    handleThemeChange(theme === 'light' ? 'dark' : 'light');
+                  }}
+                  className={classes.toggleButton}
+                >
+                  {theme === 'dark' ? (
+                    <SunIcon fontSize='1.75em' />
+                  ) : (
+                    <MoonIcon fontSize='1.75em' />
+                  )}
+                </Button>
+              </Tooltip>
+            )}
           </nav>
         </div>
       </header>

diff --git a/apps/_components/src/Header/logos/ds-logo.tsx b/apps/_components/src/Header/logos/ds-logo.tsx
@@ -11,8 +11,9 @@ export const DsLogo = ({ ...props }: DsLogoProps) => {
       {...props}
     >
       <path
+        data-text
         d='M153.634 78.2319H135.697V22.8264H154.202C170.515 22.8264 180.282 33.2149 180.282 50.448C180.282 67.7622 170.515 78.2319 153.634 78.2319ZM144.057 70.9275H153.174C165.808 70.9275 172.057 63.5689 172.057 50.448C172.057 37.3812 165.808 30.1308 153.688 30.1308H144.057V70.9275ZM207.937 79.0706C195.682 79.0706 188.161 70.6299 188.161 57.7254C188.161 44.9561 195.79 36.1367 207.369 36.1367C216.783 36.1367 225.765 42.0073 225.765 57.022V59.8897H196.223C196.439 67.8975 201.092 72.3884 208.018 72.3884C212.617 72.3884 216.134 70.3864 217.595 66.4637L225.251 67.8434C223.412 74.6068 217 79.0706 207.937 79.0706ZM196.25 53.8297H217.839C217.811 47.4721 213.699 42.8189 207.423 42.8189C200.849 42.8189 196.575 47.932 196.25 53.8297ZM265.879 46.8228L258.547 48.1214C257.6 45.3349 255.274 42.5484 250.242 42.5484C245.643 42.5484 242.18 44.8209 242.207 48.0132C242.18 50.8267 244.155 52.3688 248.727 53.4509L255.328 54.9659C262.957 56.7244 266.69 60.3496 266.69 66.2202C266.69 73.7411 259.738 79.0706 249.701 79.0706C240.367 79.0706 234.253 74.9314 232.901 67.5729L240.719 66.3825C241.693 70.4676 244.804 72.5507 249.647 72.5507C254.949 72.5507 258.385 70.0347 258.385 66.8154C258.385 64.2182 256.518 62.4327 252.514 61.5399L245.48 59.9979C237.689 58.2665 234.118 54.3437 234.118 48.446C234.118 41.0875 240.773 36.1367 250.161 36.1367C259.142 36.1367 264.201 40.357 265.879 46.8228ZM275.584 78.2319V36.6778H283.673V78.2319H275.584ZM279.669 30.2661C276.856 30.2661 274.556 28.1018 274.556 25.4506C274.556 22.7993 276.856 20.608 279.669 20.608C282.456 20.608 284.782 22.7993 284.782 25.4506C284.782 28.1018 282.456 30.2661 279.669 30.2661ZM311.978 94.6805C302.049 94.6805 296.503 90.3519 294.312 85.2658L301.265 82.3982C302.699 84.7789 305.323 88.1606 312.059 88.1606C318.2 88.1606 322.664 85.347 322.664 78.8271V70.657H322.15C320.689 73.3082 317.74 77.6097 310.111 77.6097C300.291 77.6097 292.743 70.5487 292.743 57.2925C292.743 44.0634 300.128 36.1367 310.165 36.1367C317.903 36.1367 320.77 40.844 322.204 43.4141H322.799V36.6778H330.726V79.1518C330.726 89.8379 322.556 94.6805 311.978 94.6805ZM311.897 70.9004C318.877 70.9004 322.745 65.7603 322.745 57.1843C322.745 48.7707 318.958 43.0083 311.897 43.0083C304.592 43.0083 300.913 49.2035 300.913 57.1843C300.913 65.3545 304.673 70.9004 311.897 70.9004ZM349.663 53.5592V78.2319H341.574V36.6778H349.339V43.4411H349.853C351.774 39.0314 355.859 36.1367 362.108 36.1367C370.603 36.1367 376.257 41.5203 376.257 51.8007V78.2319H368.168V52.7746C368.168 46.7417 364.84 43.1436 359.349 43.1436C353.721 43.1436 349.663 46.931 349.663 53.5592ZM418.244 46.8228L410.913 48.1214C409.966 45.3349 407.639 42.5484 402.607 42.5484C398.008 42.5484 394.545 44.8209 394.572 48.0132C394.545 50.8267 396.52 52.3688 401.092 53.4509L407.693 54.9659C415.322 56.7244 419.056 60.3496 419.056 66.2202C419.056 73.7411 412.103 79.0706 402.066 79.0706C392.733 79.0706 386.618 74.9314 385.266 67.5729L393.084 66.3825C394.058 70.4676 397.169 72.5507 402.012 72.5507C407.314 72.5507 410.75 70.0347 410.75 66.8154C410.75 64.2182 408.884 62.4327 404.88 61.5399L397.846 59.9979C390.054 58.2665 386.483 54.3437 386.483 48.446C386.483 41.0875 393.138 36.1367 402.526 36.1367C411.508 36.1367 416.567 40.357 418.244 46.8228ZM433.063 93.8147C430.628 93.8147 428.518 93.3548 427.544 92.922L429.492 86.2939C433.928 87.5113 436.823 87.0514 438.879 81.5325L439.88 78.773L424.676 36.6778H433.333L443.857 68.9255H444.29L454.814 36.6778H463.498L446.373 83.7779C443.965 90.3248 439.745 93.8147 433.063 93.8147ZM502.238 46.8228L494.907 48.1214C493.96 45.3349 491.633 42.5484 486.601 42.5484C482.002 42.5484 478.539 44.8209 478.567 48.0132C478.539 50.8267 480.514 52.3688 485.086 53.4509L491.687 54.9659C499.317 56.7244 503.05 60.3496 503.05 66.2202C503.05 73.7411 496.097 79.0706 486.06 79.0706C476.727 79.0706 470.613 74.9314 469.26 67.5729L477.079 66.3825C478.053 70.4676 481.164 72.5507 486.006 72.5507C491.309 72.5507 494.745 70.0347 494.745 66.8154C494.745 64.2182 492.878 62.4327 488.874 61.5399L481.84 59.9979C474.049 58.2665 470.478 54.3437 470.478 48.446C470.478 41.0875 477.133 36.1367 486.52 36.1367C495.502 36.1367 500.561 40.357 502.238 46.8228ZM531.341 36.6778V43.1706H522.819V66.0308C522.819 70.7111 525.173 71.5768 527.797 71.5768C529.096 71.5768 530.097 71.3333 530.638 71.2251L532.099 77.9073C531.152 78.259 529.42 78.7459 526.85 78.773C520.466 78.9083 514.703 75.256 514.73 67.7081V43.1706H508.643V36.6778H514.73V26.7221H522.819V36.6778H531.341ZM557.752 79.0706C545.497 79.0706 537.976 70.6299 537.976 57.7254C537.976 44.9561 545.605 36.1367 557.184 36.1367C566.599 36.1367 575.58 42.0073 575.58 57.022V59.8897H546.038C546.254 67.8975 550.908 72.3884 557.833 72.3884C562.432 72.3884 565.949 70.3864 567.41 66.4637L575.066 67.8434C573.227 74.6068 566.815 79.0706 557.752 79.0706ZM546.065 53.8297H567.654C567.627 47.4721 563.514 42.8189 557.238 42.8189C550.664 42.8189 546.39 47.932 546.065 53.8297ZM584.555 78.2319V36.6778H592.32V43.4411H592.834C594.565 38.8691 598.65 36.1367 604.142 36.1367C609.688 36.1367 613.503 38.8962 615.315 43.4411H615.748C617.75 39.0044 622.241 36.1367 628.22 36.1367C635.741 36.1367 641.043 40.8711 641.043 50.3668V78.2319H632.954V51.1243C632.954 45.4972 629.437 43.1165 625.163 43.1165C619.887 43.1165 616.83 46.7417 616.83 51.7466V78.2319H608.768V50.6103C608.768 46.0924 605.657 43.1165 601.166 43.1165C596.567 43.1165 592.644 47.0122 592.644 52.6123V78.2319H584.555ZM669.794 79.0706C657.539 79.0706 650.018 70.6299 650.018 57.7254C650.018 44.9561 657.647 36.1367 669.226 36.1367C678.641 36.1367 687.622 42.0073 687.622 57.022V59.8897H658.08C658.296 67.8975 662.95 72.3884 669.875 72.3884C674.474 72.3884 677.991 70.3864 679.452 66.4637L687.108 67.8434C685.269 74.6068 678.857 79.0706 669.794 79.0706ZM658.107 53.8297H679.696C679.669 47.4721 675.557 42.8189 669.28 42.8189C662.706 42.8189 658.432 47.932 658.107 53.8297ZM715.995 36.6778V43.1706H707.473V66.0308C707.473 70.7111 709.827 71.5768 712.451 71.5768C713.749 71.5768 714.75 71.3333 715.291 71.2251L716.752 77.9073C715.805 78.259 714.074 78.7459 711.504 78.773C705.119 78.9083 699.357 75.256 699.384 67.7081V43.1706H693.297V36.6778H699.384V26.7221H707.473V36.6778H715.995Z'
-        fill='#1E2B3C'
+        fill='red'
       />
       <path
         d='M78.0959 30.5555C79.0493 29.602 80.5952 29.602 81.5487 30.5555L100.268 49.2748C101.221 50.2282 101.221 51.7741 100.268 52.7276L81.5487 71.4468C80.5952 72.4003 79.0493 72.4003 78.0959 71.4468L59.3766 52.7276C58.4231 51.7741 58.4231 50.2282 59.3766 49.2748L78.0959 30.5555Z'

diff --git a/apps/storefront/app/(frontpage)/layout.module.css b/apps/storefront/app/(frontpage)/layout.module.css
@@ -9,7 +9,7 @@
   content: '';
   background-color: var(--ds-color-neutral-background-subtle);
   position: absolute;
-  z-index: -1;
+  z-index: 0;
   height: 200vh;
   width: 300vw;
   left: -100vw;
@@ -39,6 +39,7 @@
   align-items: center;
   flex-direction: column;
   width: 100%;
+  z-index: 1;
 }
 
 .cards {
@@ -50,7 +51,7 @@
 }
 
 .betaTag {
-  background-color: #ebceff;
+  background-color: var(--ds-global-purple-5);
   display: inline-block;
   padding: 3px 12px;
   border-radius: 4px;

diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.module.css b/apps/storefront/app/bloggen/(frontpage)/layout.module.css
@@ -3,8 +3,13 @@
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--ds-spacing-8);
-  margin-top: var(--ds-spacing-18) !important;
-  margin-bottom: var(--page-spacing-bottom) !important;
+  padding-top: var(--ds-spacing-18) !important;
+  padding-bottom: var(--page-spacing-bottom) !important;
+
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    background-color: var(--ds-color-neutral-background-default);
+  }
 }
 
 .main {

diff --git a/apps/storefront/app/bloggen/(frontpage)/page.mdx b/apps/storefront/app/bloggen/(frontpage)/page.mdx
@@ -76,6 +76,11 @@ export const metadata = {
   {`
     body {
       background-color: var(--ds-color-neutral-background-subtle);
+
+        [data-ds-color-mode='dark'] &,
+        [data-ds-color-mode='auto'] & {
+          background-color: var(--ds-color-neutral-backround-default);
+        }
     }
   `}
 </style>
diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
@@ -16,6 +16,13 @@
   }
 }
 
+.card {
+  [data-ds-color-mode='dark'] &,
+  [data-ds-color-mode='auto'] & {
+    --dsc-card-background: var(--ds-color-neutral-surface-default);
+  }
+}
+
 .tag {
   margin-bottom: 11px;
   padding: 3px 9px;

diff --git a/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css b/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css
@@ -30,7 +30,7 @@
   top: calc(var(--height) / -2);
   left: 50%;
   transform: translateX(-50%);
-  background-color: white;
+  background-color: var(--ds-color-neutral-background-default);
 }
 
 .logo .logoImage {