feat(web): added the default template component

src/app.tsx

@@ -2,12 +2,15 @@ import { Router } from '@solidjs/router';
 import { FileRoutes } from '@solidjs/start/router';
 import type { Component } from 'solid-js';
 import { Suspense } from 'solid-js';
+import { DefaultTemplate } from './components/templates/DefaultTemplate.js';
 import './app.css';
 
 const App: Component = () => (
-  <Router root={(props) => <Suspense>{props.children}</Suspense>}>
-    <FileRoutes />
-  </Router>
+  <DefaultTemplate>
+    <Router root={(props) => <Suspense>{props.children}</Suspense>}>
+      <FileRoutes />
+    </Router>
+  </DefaultTemplate>
 );
 
 export default App;

src/components/templates/DefaultTemplate.tsx

@@ -0,0 +1,19 @@
+import type { Component, ParentProps } from 'solid-js';
+import { Footer } from '../organisms/Footer.js';
+import { Navbar } from '../organisms/Navbar.js';
+
+/**
+ * The default template.
+ * @param props The component properties.
+ * @returns The component.
+ */
+export const DefaultTemplate: Component<ParentProps> = (props) => {
+  const { children } = props;
+  return (
+    <div class="bg-zinc-100 text-surface dark:bg-neutral-600 dark:text-white">
+      <Navbar />
+      {children}
+      <Footer />
+    </div>
+  );
+};

src/entry-server.tsx

@@ -27,6 +27,16 @@ export default createHandler(() => (
           />
           <meta name="rating" content="General" />
           <meta name="referer" content="same-origin" />
+          <meta
+            name="theme-color"
+            content="#404040"
+            media="(prefers-color-scheme: dark)"
+          />
+          <meta
+            name="theme-color"
+            content="#FAFAFA"
+            media="(prefers-color-scheme: light)"
+          />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="twitter:card" content="summary_large_image" />
           <meta name="twitter:creator" content="@kurone_kito" />