add themes, home component, body css

src/app.module.css

@@ -1,4 +1,6 @@
 .app {
+  background: var(--background-color) var(--background-fade) top center repeat-x;
+  font: 13px arial, helvetica, sans-serif;
   z-index: 1;
   min-height: 100%;
   overflow-y: hidden;

src/app.tsx

@@ -1,10 +1,19 @@
+import { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import Home from './views/home';
 import styles from './app.module.css';
+import useTheme from './hooks/use-theme';
 
 const App = () => {
+  const [theme] = useTheme();
+
+  useEffect(() => {
+    document.body.classList.forEach((className) => document.body.classList.remove(className));
+    document.body.classList.add(theme);
+  }, [theme]);
+
   return (
-    <div className={styles.app}>
+    <div className={`${styles.app} ${theme}`}>
       <Routes>
         <Route path='/' element={<Home />} />
       </Routes>

src/hooks/use-theme.ts

@@ -0,0 +1,21 @@
+import { create, StoreApi } from 'zustand';
+
+interface ThemeState {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
+const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState']) => ({
+  theme: localStorage.getItem('theme') || 'yotsuba',
+  setTheme: (theme: string) => {
+    localStorage.setItem('theme', theme);
+    set({ theme });
+  },
+}));
+
+const useTheme = (): [string, (theme: string) => void] => {
+  const { theme, setTheme } = useThemeStore();
+  return [theme, setTheme];
+};
+
+export default useTheme;

src/index.css

@@ -7,7 +7,7 @@ body {
   background-color: white;
 }
 
-body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, iframe {
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, iframe {
   margin: 0;
   padding: 0;
 }

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './app';
 import { HashRouter as Router } from 'react-router-dom';
 import './index.css';
+import './themes.css';
 import { App as CapacitorApp } from '@capacitor/app';
 import * as serviceWorkerRegistration from './service-worker-registration';
 

src/themes.css

@@ -0,0 +1,11 @@
+:root .yotsuba {
+  --background-color: #ffe;
+  --background-fade: url("/public/assets/background-fade.png");
+  --color: #800;
+}
+
+:root .yotsuba-b {
+  --background-color: #eef2ff;
+  --background-fade: url("/public/assets/background-fade-blue.png");
+  --color: #000;
+}

src/views/home/home.module.css

@@ -1,3 +1,24 @@
-.test {
+.content {
+  color: var(--color);
   font-size: 20px;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  width: 57.69em;
+  min-width: 750px;
+}
+
+.logo img {
+  width: 300px;
+  height: 120px;
+}
+
+.logo {
+  margin: 0px auto;
+}
+
+@media (max-width: 768px) {
+  .content {
+    width: auto;
+  }
 }

src/views/home/home.tsx

@@ -1,7 +1,37 @@
 import styles from './home.module.css';
+import useTheme from '../../hooks/use-theme';
+import { Link } from 'react-router-dom';
+
+// TODO: remove theme selector for debugging
+const ThemeSettings = () => {
+  const [theme, setTheme] = useTheme();
+
+  return (
+    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+      <option value='yotsuba'>yotsuba</option>
+      <option value='yotsuba-b'>yotsuba-b</option>
+    </select>
+  );
+};
 
 const Home = () => {
-  return <div className={styles.test}>plebchan</div>;
+  return (
+    <div className={styles.content}>
+      <Link to='/'>
+        <div className={styles.logo}>
+          <img alt='plebchan' src='/assets/logo/logo-transparent.png' />
+        </div>
+      </Link>
+      <div className={styles.searchBar}>
+        <input type='text' placeholder='Search' />
+        <button>Search</button>
+      </div>
+      <ThemeSettings />
+      <div className={styles.box}>
+        <div className={styles.boxBar}>What is plebchan?</div>
+      </div>
+    </div>
+  );
 };
 
 export default Home;