Franknoirot/live system theme (#358)

* Only show the Replay Onboarding button in file settings
Resolves #351. Eventually we will implement more sophisticated
logic for which settings should be shown where.

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Remove unnecessary console.log

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Respond to system theme changes in real-time
If the user has their "theme" setting to "system".
I tried to use the [XState invoked callback approach](https://xstate.js.org/docs/guides/communication.html#invoking-callbacks),
but I could not find any way to respond to the latest context/state values within the
media listener; I kept receiving stale state.

Signed-off-by: Frank Noirot <frank@kittycad.io>

---------

Signed-off-by: Frank Noirot <frank@kittycad.io>

src/machines/settingsMachine.ts

@@ -1,7 +1,7 @@
 import { assign, createMachine } from 'xstate'
 import { BaseUnit, baseUnitsUnion } from '../useStore'
 import { CommandBarMeta } from '../lib/commands'
-import { Themes } from '../lib/theme'
+import { Themes, getSystemTheme, setThemeClass } from '../lib/theme'
 
 export const SETTINGS_PERSIST_KEY = 'SETTINGS_PERSIST_KEY'
 
@@ -79,6 +79,7 @@ export const settingsMachine = createMachine(
     initial: 'idle',
     states: {
       idle: {
+        entry: ['setThemeClass'],
         on: {
           'Set Theme': {
             actions: [
@@ -87,6 +88,7 @@ export const settingsMachine = createMachine(
               }),
               'persistSettings',
               'toastSuccess',
+              'setThemeClass',
             ],
             target: 'idle',
             internal: true,
@@ -188,6 +190,13 @@ export const settingsMachine = createMachine(
           console.error(e)
         }
       },
+      setThemeClass: (context, event) => {
+        const currentTheme =
+          event.type === 'Set Theme' ? event.data.theme : context.theme
+        setThemeClass(
+          currentTheme === Themes.System ? getSystemTheme() : currentTheme
+        )
+      },
     },
   }
 )