Themes: init

src/index.js

@@ -1,35 +1,50 @@
 import { h, render } from 'preact'
-import { Link, Route, Router, Switch } from 'wouter-preact'
+import { useState } from 'preact/hooks'
+import { Route, Router, Switch } from 'wouter-preact'
 
 import { useHashLocation } from '~/src/utils/utils.routing'
+import {
+  DEFAULT_THEME,
+  themeList,
+  assertTheme
+} from '~/src/themes/themes'
 
 import Home from '~/src/views/Home'
 import Player from '~/src/views/Player'
 
+import '~/src/style/base.css'
+
 function App () {
+  const [currentTheme, setCurrentTheme] =
+    useState(DEFAULT_THEME)
+
+  const setTheme = theme =>
+    setCurrentTheme(assertTheme(theme))
+
   return (
     <Router hook={useHashLocation}>
-      <div className='App'>
-        <nav>
-          <Link href='/'>Root</Link>
-        </nav>
-
-        <main>
-          <Switch>
-            <Route
-              path='/'
-              component={Home} />
-            <Route
-              path='/play/:theme/:encodedUrl'
-              component={Player} />
-            <Route path='/top100'>
-              top100
-            </Route>
-            <Route>
-              404
-            </Route>
-          </Switch>
-        </main>
+      <div className={['app', currentTheme].join(' ')}>
+        <Switch>
+          <Route path='/'>
+            <Home {...{
+              setTheme,
+              themeList,
+              currentTheme
+            }} />
+          </Route>
+          <Route path='/play/:theme/:encodedUrl'>
+            {params => <Player {...{
+              setTheme,
+              ...params
+            }} />}
+          </Route>
+          <Route path='/top100'>
+            top100
+          </Route>
+          <Route>
+            404
+          </Route>
+        </Switch>
       </div>
     </Router>
   )