feat(site): add dark mode

packages/site/components/Banner.tsx

@@ -11,9 +11,9 @@ import shape6 from '../assets/img/banner/shape6.png'
 import shape7 from '../assets/img/banner/shape7.png'
 import playstore from '../assets/img/playstore.png'
 import Link from './Link'
-import { H1 } from './Typography'
+import { H1, H2 } from './Typography'
 import { useIntl } from 'react-intl'
-import { ButtonLinkPatreon } from './ButtonLink'
+import { ButtonLinkPatreon, ButtonLinkInternal } from './ButtonLink'
 
 const Banner = (): JSX.Element => {
   const intl = useIntl()
@@ -66,9 +66,7 @@ const Banner = (): JSX.Element => {
             <p>{intl.formatMessage({ id: 'general.description' })}</p>
             {!!intl.formatMessage({ id: 'general.flashtitle' }) && (
               <div className="mt-5">
-                <h2 className="mb-4 text-2xl font-bold leading-tight text-gray-800 md:text-4xl">
-                  {intl.formatMessage({ id: 'general.flashtitle' })}
-                </h2>
+                <H2>{intl.formatMessage({ id: 'general.flashtitle' })}</H2>
                 <p>{intl.formatMessage({ id: 'general.flashtext' })}</p>
               </div>
             )}
@@ -102,17 +100,13 @@ const Banner = (): JSX.Element => {
               </ButtonLinkPatreon>
             </p>
             <p className="flex flex-col mt-5 sm:items-center sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
-              <NextLink href="/integritet">
-                <a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full lg:px-8 lg:py-4 hover:bg-indigo-800 hover:text-white">
-                  {intl.formatMessage({ id: 'navigation.integrity' })}
-                </a>
-              </NextLink>
+              <ButtonLinkInternal href="/integritet">
+                <a>{intl.formatMessage({ id: 'navigation.integrity' })}</a>
+              </ButtonLinkInternal>
 
-              <NextLink href="/qa">
-                <a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full lg:px-8 lg:py-4 hover:bg-indigo-800 hover:text-white">
-                  {intl.formatMessage({ id: 'navigation.qna' })}
-                </a>
-              </NextLink>
+              <ButtonLinkInternal href="/qa">
+                <a>{intl.formatMessage({ id: 'navigation.qna' })}</a>
+              </ButtonLinkInternal>
             </p>
           </div>
           <div className="flex items-start justify-center pr-0 motion-safe:animate-bounce-slow md:pr-4 xl:pr-0">

packages/site/components/ButtonLink.tsx

@@ -2,11 +2,15 @@ import Link from 'next/link'
 
 type ButtonLinkProps = Pick<HTMLAnchorElement, 'href' | 'target'>
 
-const ButtonLink: React.FC<ButtonLinkProps> = ({ children, href, target }) => {
+export const ButtonLink: React.FC<ButtonLinkProps> = ({
+  children,
+  href,
+  target,
+}) => {
   return (
     <a
       href={href}
-      className="inline-block py-2 px-4 md:px-8 md:py-4 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full hover:bg-indigo-800 hover:text-white"
+      className="inline-block py-2 px-4 md:px-8 md:py-4 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full hover:bg-indigo-800 hover:text-white dark:border-indigo-300 dark:text-indigo-300 dark:hover:bg-indigo-300"
       target={target}
       rel={target === '_blank' ? 'noopener noreferrer' : ''}
     >
@@ -23,7 +27,7 @@ export const ButtonLinkInternal: React.FC<ButtonLinkInternalProps> = ({
 }) => {
   return (
     <Link href={href}>
-      <a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full cursor-pointer md:px-8 md:py-4 hover:bg-indigo-800 hover:text-white">
+      <a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full cursor-pointer md:px-8 md:py-4 hover:bg-indigo-800 hover:text-white dark:border-indigo-300 dark:text-indigo-300 dark:hover:bg-indigo-300">
         {children}
       </a>
     </Link>
@@ -34,7 +38,7 @@ export const ButtonLinkPatreon: React.FC = ({ children }) => {
   return (
     <a
       href="https://www.patreon.com/oppnaskolplattformen"
-      className="inline-block px-4 py-2 font-bold text-white bg-red-500 border-2 rounded-full md:px-8 md:py-4 hover:bg-white hover:border-red-500 hover:text-red-500"
+      className="inline-block px-4 py-2 font-bold text-white bg-orange-500 border-2 rounded-full md:px-8 md:py-4 hover:bg-white hover:border-orange-500 hover:text-orange-500 dark:hover:text-orange-300 dark:hover:bg-gray-800 dark:border-orange-300 dark:bg-orange-300 dark:text-orange-600"
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -42,5 +46,3 @@ export const ButtonLinkPatreon: React.FC = ({ children }) => {
     </a>
   )
 }
-
-export default ButtonLink

packages/site/components/CtaThree.tsx

@@ -6,7 +6,7 @@ import { H2 } from './Typography'
 
 const CtaThree = (): JSX.Element => {
   return (
-    <Section bg="bg-white">
+    <Section bg="bg-white dark:bg-gray-700">
       <div>
         <H2>Se summering för alla dina barn på ett ställe</H2>
         <p>

packages/site/components/DownloadButtons.tsx

@@ -1,4 +1,4 @@
-import ButtonLink, { ButtonLinkPatreon } from './ButtonLink'
+import { ButtonLink, ButtonLinkPatreon } from './ButtonLink'
 
 const DownloadButtons = (): JSX.Element => {
   return (

packages/site/components/Footer.tsx

@@ -60,8 +60,8 @@ const Footer = (): JSX.Element => {
           </ul>
         </div>
 
-        <div className="p-5 bg-white shadow-md rounded-md">
-          <div className="mb-3 text-gray-800">
+        <div className="p-5 bg-white shadow-md rounded-md dark:bg-gray-800">
+          <div className="mb-3 text-gray-800 dark:text-gray-400">
             @iteam1337 Digitalisering på riktigt.
           </div>
           <div>

packages/site/components/Link.tsx

@@ -11,7 +11,7 @@ const Internal: React.FC<LinkInternalProps> = ({
 }): JSX.Element => {
   return (
     <Link href={href}>
-      <a className="text-indigo-800">{children}</a>
+      <a className="text-indigo-800 dark:text-indigo-300">{children}</a>
     </Link>
   )
 }
@@ -30,7 +30,7 @@ const External: React.FC<LinkExternalProps> = ({
 }): JSX.Element => {
   return (
     <a
-      className={classnames('text-indigo-800', className)}
+      className={classnames('text-indigo-800 dark:text-indigo-300', className)}
       href={href}
       target={target}
       rel={target === '_blank' ? 'noopener noreferrer' : ''}

packages/site/components/NavLinks.tsx

@@ -16,6 +16,7 @@ interface LinkProps {
 const NavLinks = ({ onClick }: NavLinksProps): JSX.Element => {
   const { pathname } = useRouter()
   const intl = useIntl()
+  const className = 'dark:text-gray-300'
 
   const path = (href: string) => {
     const hashIndex = href.indexOf('#')
@@ -23,10 +24,11 @@ const NavLinks = ({ onClick }: NavLinksProps): JSX.Element => {
     return href.substring(0, hashIndex)
   }
 
-  const Link: React.FC<LinkProps> = ({ href, to, children }) =>
-    path(href) === pathname ? (
+  const Link: React.FC<LinkProps> = ({ href, to, children }) => {
+    return path(href) === pathname ? (
       <ScrollLink
         activeClass="current"
+        className={className}
         to={to}
         href={`#${to}`}
         spy={true}
@@ -42,9 +44,12 @@ const NavLinks = ({ onClick }: NavLinksProps): JSX.Element => {
       </ScrollLink>
     ) : (
       <NavLink href={href}>
-        <a onClick={() => onClick?.()}>{children}</a>
+        <a className={className} onClick={() => onClick?.()}>
+          {children}
+        </a>
       </NavLink>
     )
+  }
 
   return (
     <ul className="flex flex-col text-xl text-gray-800 md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-8 md:text-base">
@@ -54,7 +59,9 @@ const NavLinks = ({ onClick }: NavLinksProps): JSX.Element => {
         </Link>
       </li>
       <li>
-        <NavLink href="/aktuellt">Aktuellt</NavLink>
+        <NavLink href="/aktuellt">
+          <a className={className}>Aktuellt</a>
+        </NavLink>
       </li>
       <li>
         <Link to="funktioner" href="/#funktioner">

packages/site/components/Pricing.tsx

@@ -44,7 +44,7 @@ const Pricing = (): JSX.Element => {
         />
       </div>
       <div className="flex">
-        <div className="flex flex-col items-center inline-block px-5 py-8 mx-auto text-center shadow-lg rounded-md">
+        <div className="flex flex-col items-center inline-block px-5 py-8 mx-auto text-center shadow-lg rounded-md dark:bg-gray-700">
           <h3 className="text-3xl text-gray-800">Engångskostnad</h3>
           <div className="mt-5 text-6xl text-pink-500">
             {formatPrice(price)}

packages/site/components/PricingTemp.tsx

@@ -42,8 +42,10 @@ const Pricing = (): JSX.Element => {
         />
       </div>
       <div className="flex">
-        <div className="flex flex-col items-center inline-block px-5 py-8 mx-auto text-center shadow-lg rounded-md">
-          <h3 className="text-3xl text-gray-800">Tillfälligt</h3>
+        <div className="flex flex-col items-center inline-block px-5 py-8 mx-auto text-center shadow-lg rounded-md dark:bg-gray-800">
+          <h3 className="text-3xl text-gray-800 dark:text-gray-300">
+            Tillfälligt
+          </h3>
           <div className="mt-5 text-6xl text-pink-500">
             {formatPrice(price)}
           </div>

packages/site/components/Privacy.tsx

@@ -1,7 +1,7 @@
 const Privacy = (): JSX.Element => {
   return (
     <div className="header">
-      <div className="max-w-6xl mx-auto px-5 md:px-0 my-5 md:my-24 prose">
+      <div className="max-w-4xl mx-auto px-5 md:px-0 my-5 md:my-24 prose dark:prose-dark">
         <h1>Öppna Skolplattformen</h1>
         <h2>Integritetspolicy</h2>
         <p>

packages/site/components/QA.tsx

@@ -1,7 +1,7 @@
 const QA = (): JSX.Element => {
   return (
     <div className="header">
-      <div className="max-w-6xl px-5 mx-auto my-5 md:my-24 md:px-0 prose">
+      <div className="max-w-4xl px-5 mx-auto my-5 md:my-24 md:px-0 prose dark:prose-dark">
         <h1>Frågor och svar om Öppna skolplattformen</h1>
 
         <h2>

packages/site/components/Section.tsx

@@ -7,7 +7,7 @@ interface SectionProps {
 }
 
 const Section: React.FC<SectionProps> = ({
-  bg = 'bg-gray-100',
+  bg = 'bg-gray-100 dark:bg-gray-800',
   padding = 'py-8 md:py-20',
   children,
   id,

packages/site/components/SectionTitle.tsx

@@ -1,3 +1,5 @@
+import { H2 } from '../components/Typography'
+
 interface SectionTitleProps {
   text?: string
   title: string
@@ -6,9 +8,7 @@ interface SectionTitleProps {
 const SectionTitle = ({ text, title }: SectionTitleProps): JSX.Element => {
   return (
     <div className="mb-16 text-center space-y-5">
-      <h2 className="text-4xl md:text-5xl font-bold leading-tight text-gray-800">
-        {title}
-      </h2>
+      <H2>{title}</H2>
       {text && <p className="text-gray-600">{text}</p>}
     </div>
   )

packages/site/components/Timeline.tsx

@@ -21,7 +21,7 @@ const Timeline = ({ events }: TimelineProps): JSX.Element => {
     <ul className="max-w-2xl border-gray-200 md:mx-auto md:border-l-2 space-y-4 md:space-y-12">
       {events.map(({ date, media, importantDates, overview }) => (
         <li className="relative" key={date}>
-          <div className="absolute top-0 items-center justify-center hidden w-10 h-10 text-white bg-indigo-400 border-4 border-white rounded-full md:flex -left-5 -top-2">
+          <div className="absolute top-0 items-center justify-center hidden w-10 h-10 text-white bg-indigo-400 border-4 border-white rounded-full md:flex -left-5 -top-2 dark:border-gray-600">
             <svg
               className="w-5 h-5"
               xmlns="http://www.w3.org/2000/svg"
@@ -35,10 +35,10 @@ const Timeline = ({ events }: TimelineProps): JSX.Element => {
               />
             </svg>
           </div>
-          <div className="hidden mb-4 ml-8 text-sm font-bold text-gray-700 capitalize md:block">
+          <div className="hidden mb-4 ml-8 text-sm font-bold text-gray-700 dark:text-gray-500 capitalize md:block">
             {dateFormat(date)}
           </div>
-          <div className="p-4 text-sm leading-relaxed bg-white border-t-4 border-indigo-300 rounded-b shadow-md md:p-5 md:ml-8">
+          <div className="p-4 text-sm leading-relaxed bg-white border-t-4 border-indigo-300 rounded-b shadow-md md:p-5 md:ml-8 dark:bg-gray-800">
             <div className="block mb-4 text-lg font-bold text-gray-700 capitalize md:hidden">
               {dateFormat(date)}
             </div>
@@ -56,7 +56,7 @@ const Timeline = ({ events }: TimelineProps): JSX.Element => {
                       ) : (
                         important.description
                       )}
-                      <div className="text-xs text-gray-500">
+                      <div className="text-xs text-gray-500 dark:text-gray-400">
                         {important.date}
                       </div>
                     </li>
@@ -77,7 +77,9 @@ const Timeline = ({ events }: TimelineProps): JSX.Element => {
                       ) : (
                         m.description
                       )}
-                      <div className="text-xs text-gray-500">{m.date}</div>
+                      <div className="text-xs text-gray-500 dark:text-gray-400">
+                        {m.date}
+                      </div>
                     </li>
                   ))}
                 </ul>

packages/site/components/TimelineLatest.tsx

@@ -1,6 +1,7 @@
 import { events } from '../data/timelineEvents'
 import { ButtonLinkInternal } from './ButtonLink'
 import Timeline from './Timeline'
+import { H2 } from '../components/Typography'
 
 const TimelineLatest = (): JSX.Element => {
   const latestMonthsEvents = events.slice(0, 1)
@@ -8,9 +9,7 @@ const TimelineLatest = (): JSX.Element => {
   return (
     <section className="max-w-6xl px-5 py-8 mx-auto lg:px-0 lg:py-32 grid grid-cols-1 lg:grid-cols-2 gap-8">
       <div className="space-y-8">
-        <h2 className="text-2xl md:text-4xl font-bold leading-tight text-gray-800">
-          Om Öppna Skolplattformen
-        </h2>
+        <H2>Om Öppna Skolplattformen</H2>
         <p>
           Det talas mycket om värdet av digitalisering, innovation och
           medskapande, om nytta för skattepengarna och medborgarinflytande.

packages/site/components/Typography.tsx

@@ -1,6 +1,6 @@
 export const H1: React.FC = ({ children }) => {
   return (
-    <h1 className="mb-5 text-4xl md:text-5xl font-semibold text-gray-800">
+    <h1 className="mb-5 text-4xl md:text-5xl font-semibold text-gray-800 dark:text-gray-300">
       {children}
     </h1>
   )
@@ -8,6 +8,8 @@ export const H1: React.FC = ({ children }) => {
 
 export const H2: React.FC = ({ children }) => {
   return (
-    <h2 className="mb-5 text-5xl font-semibold text-gray-800">{children}</h2>
+    <h2 className="mb-5 text-3xl font-semibold text-gray-800 dark:text-gray-300">
+      {children}
+    </h2>
   )
 }

packages/site/styles/global.css

@@ -10,7 +10,7 @@
 
 html,
 body {
-  @apply font-sans text-gray-700;
+  @apply font-sans text-gray-700 dark:text-gray-400 dark:bg-gray-900;
 }
 
 p {

packages/site/tailwind.config.js

@@ -1,6 +1,9 @@
+const colors = require('tailwindcss/colors')
+
 module.exports = {
+  mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: 'media',
   theme: {
     fontFamily: {
       sans: ['Poppins', 'sans-serif'],
@@ -9,6 +12,9 @@ module.exports = {
       animation: {
         'bounce-slow': 'slow-bounce 2s ease-in-out infinite',
       },
+      colors: {
+        orange: colors.orange,
+      },
       keyframes: {
         'slow-bounce': {
           '0%, 100%': {
@@ -24,12 +30,47 @@ module.exports = {
       zIndex: {
         '-1': '-1',
       },
+      typography: (theme) => ({
+        dark: {
+          css: {
+            color: theme('colors.gray.400'),
+            a: {
+              color: theme('colors.indigo.300'),
+              '&:hover': {
+                color: theme('colors.indigo.300'),
+              },
+            },
+            strong: {
+              color: theme('colors.gray.400'),
+            },
+            h1: {
+              color: theme('colors.gray.300'),
+            },
+            h2: {
+              color: theme('colors.gray.300'),
+            },
+            h3: {
+              color: theme('colors.gray.300'),
+            },
+            h4: {
+              color: theme('colors.gray.300'),
+            },
+            h5: {
+              color: theme('colors.gray.300'),
+            },
+            h6: {
+              color: theme('colors.gray.300'),
+            },
+          },
+        },
+      }),
     },
   },
   variants: {
     extend: {
       animation: ['motion-safe'],
     },
+    typography: ['dark'],
   },
   plugins: [require('@tailwindcss/typography')],
 }