feat: add dark mode, sync from system (#14)

* feat: fix css unset hover for dark mode

* feat: add dark mode, sync from system

* fix: ts standard

index.tsx

@@ -16,7 +16,6 @@ function banner (): undefined {
   )
 }
 banner()
-
 const router = ReactRouter.createHashRouter([
   {
     path: '',

lib/components/header.tsx

@@ -6,9 +6,11 @@ import * as React from 'react'
 import * as Polaris from '@cloudscape-design/components'
 import { PolarisTopNavigation } from '../../localisation/en-gb'
 import { Inspect } from '../exp/panopticon'
+import * as PolarisStyles from '@cloudscape-design/global-styles'
 
 export function Header (): React.ReactElement {
   const [identifier, setIdentifier] = React.useState<string | undefined>()
+  const [dark, setDark] = React.useState(window.matchMedia('(prefers-color-scheme: dark)').matches)
 
   React.useEffect(() => {
     const run = async (): Promise<void> => {
@@ -18,6 +20,10 @@ export function Header (): React.ReactElement {
     void run()
   }, [])
 
+  React.useEffect(() => {
+    dark ? PolarisStyles.applyMode(PolarisStyles.Mode.Dark) : PolarisStyles.applyMode(PolarisStyles.Mode.Light)
+  })
+
   const identity: Polaris.TopNavigationProps.Identity = {
     href: '#',
     title: 'Fouwels',
@@ -28,6 +34,15 @@ export function Header (): React.ReactElement {
   }
 
   const utilities: Polaris.TopNavigationProps.Utility[] = [
+    {
+      type: 'button',
+      onClick: () => {
+        setDark(!dark)
+      },
+      iconName: (() => {
+        return dark ? 'star' : 'star-filled'
+      })()
+    },
     {
       type: 'button',
       text: identifier === undefined ? 'Identifier Not Known' : identifier,

lib/components/navigation.tsx

@@ -76,7 +76,7 @@ export function Navigation (): React.ReactElement {
     { type: 'divider' },
     {
       type: 'link',
-      text: 'Experimental',
+      text: 'Experiment',
       href: '#/experiments',
       external: false
     },

lib/exp/knock.tsx

@@ -63,8 +63,6 @@ export async function RFC5245 (callback: RFC5245Callback): Promise<void> {
   }, () => { })
 }
 
-
-
 export function Knock (): React.ReactElement {
   const [candidate, setCandidate] = React.useState<Candidate | undefined>()
 
@@ -90,4 +88,4 @@ export function Knock (): React.ReactElement {
       </Polaris.Container>
     </>
   )
-}
+}

static/index.css

@@ -10,7 +10,7 @@ body {
 }
 
 a {
-    color: black;
+    color: unset;
     text-decoration: none;
 }