wip(fs.dev): Troubleshooting SSR themeing issues

packages/freesewing.shared/components/layouts/default.js

@@ -74,7 +74,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
     flex flex-col justify-between
     min-h-screen
     bg-base-100
-    `} data-theme={app.theme}>
+    `}>
       <Header app={app}/>
       <div className={`
         h-1 w-full theme-gradient ${app.loading ? 'loading' : ''}

packages/freesewing.shared/components/theme-picker.js

@@ -1,15 +1,24 @@
 import themes from 'shared/themes/index.js'
+import ThemeIcon from 'shared/components/icons/theme.js'
 
 const ThemePicker = ({ app, className='' }) => {
   return (
-    <select
-      className={`select select-bordered w-full max-w-sm text-base-content ${className}`}
-      onChange={evt => app.setTheme(evt.target.value)}
-    >
-      {Object.keys(themes).map(theme => (
-        <option>{theme}</option>
-      ))}
-    </select>
+      <div className="dropdown">
+        <div tabIndex="0" className="m-0 btn flex flex-row gap-2">
+          <ThemeIcon />
+          <span>Theme:</span>
+          <span>{app.theme}</span>
+        </div>
+        <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
+          {Object.keys(themes).map(theme => (
+            <li key={theme}>
+              <button onClick={() => app.setTheme(theme)} className="btn btn-link">
+                {theme}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
   )
 }
 

packages/freesewing.shared/components/wrappers/page.js

@@ -54,10 +54,15 @@ const AppWrapper= props => {
   //}
 
   return (
-    <div {...swipeHandlers}>
+    <div
+      {...swipeHandlers}
+      data-theme={props.app.theme}
+      key={props.app.theme}
+      className={`theme-${props.app.theme}`}
+    >
       {props.noLayout
         ? props.children
-        : <Layout {...childProps}>{props.children}</Layout>
+        : <Layout {...childProps}><p className={`theme-${props.app.theme}`} data-theme={props.app.theme}>{props.app.theme}</p>{props.children}</Layout>
       }
     </div>
   )