🌒 added dark theme

src/components/counter/component.tsx

@@ -1,26 +1,31 @@
 import Button from '@components/button'
+import { ThemeContext } from '@context/theme'
 import type { Component } from 'solid-js'
 import type { createCounter } from './reactivity'
 
-interface Props extends ReturnType<typeof createCounter> {}
+interface Props extends ReturnType<typeof createCounter> { }
 
 const Counter: Component<Props> = (props) => {
   const { counter } = destructure(() => props)
   const { increment } = props
 
+  const [theme] = useContext(ThemeContext)
+
   return (
-    <div
-      class="group"
-    >
-      <p
-        class="text-center transition opacity-0 cursor-pointer group-hover:opacity-100"
+    <div class={theme.name}>
+      <div
+        class="group"
       >
-        {counter()}
-      </p>
-      <div class="-m-1">
-        <Button onClick={() => increment()}>
-          <div class="i-carbon-moonrise h-6 w-6" />
-        </Button>
+        <p
+          class="text-center transition opacity-0 cursor-pointer group-hover:opacity-100 dark:text-gray-50"
+        >
+          {counter()}
+        </p>
+        <div class="-m-1">
+          <Button onClick={() => increment()}>
+            <div class="i-carbon-moonrise h-6 w-6" />
+          </Button>
+        </div>
       </div>
     </div>
   )

src/components/form/input/component.tsx

@@ -2,18 +2,18 @@ import { useI18n } from '@solid-primitives/i18n'
 import type { Component } from 'solid-js'
 import type { createInput } from './reactivity'
 
-interface Props extends ReturnType<typeof createInput> {}
+interface Props extends ReturnType<typeof createInput> { }
 const Input: Component<Props> = (props) => {
   const [t] = useI18n()
 
   return (
     <input
-      class="bg-gray-200/60 rounded-md p-1"
+      class="bg-gray-200/60 dark:border-gray-50/75 rounded-md p-1 dark:placeholder:text-gray-800"
       type="text"
       value={props.value()}
       onInput={(e) => props.setValue(e.currentTarget.value)}
       placeholder={t(props.name())}
-      />
+    />
   )
 }
 

src/context/theme.tsx

@@ -0,0 +1,47 @@
+import type { FlowComponent } from 'solid-js'
+
+type Theme = 'light' | 'dark'
+
+export const ThemeContext = createContext([
+  {
+    name: 'light'
+  }, {
+    setTheme: (_theme: Theme) => { },
+    toggleTheme: () => { }
+  }
+])
+
+interface Props {
+  theme?: string;
+}
+
+export const ThemeProvider: FlowComponent<Props> = (props) => {
+  const [state, setState] = createStore({
+    name: props.theme || 'dark',
+  })
+
+  const theme = [
+    state,
+    {
+      setTheme: (theme: string) => {
+        setState({
+          name: theme,
+        })
+      },
+      toggleTheme: () => {
+        setState({
+          name: state.name === 'dark' ? 'light' : 'dark',
+        })
+        console.log(state.name)
+      }
+    }
+  ]
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <div class={theme[0].name}>
+        {props.children}
+      </div>
+    </ThemeContext.Provider>
+  )
+}

src/entry-client.tsx

@@ -2,4 +2,3 @@ import { hydrate } from 'solid-js/web'
 import { StartClient } from 'solid-start/entry-client'
 
 hydrate(() => <StartClient />, document)
-

src/islands/app/index.tsx

@@ -9,6 +9,8 @@ import ReloadPrompt from '@components/reload'
 import Form from '@components/form'
 import { createInput } from '@components/form/input'
 import Toaster, { createToaster } from '@components/toaster'
+import { ThemeContext } from '@context/theme'
+
 import { createApp } from './reactivity'
 
 const ReloadPromptCheck = typeof window !== 'undefined' ?
@@ -27,12 +29,13 @@ export default function() {
     nextLanguage,
   } = createApp()
 
+  const [theme, { toggleTheme }] = useContext(ThemeContext)
 
   return (
-    <div class="full flex-center flex-col bg-gray-100/75">
+    <div class="full flex-center flex-col bg-gray-100/75 dark:bg-gray-800">
       <ReloadPromptCheck />
       <Image image={bat} />
-      <div class="flex -mt-10 items-center">
+      <div class="flex -mt-10 space-x-2 items-center">
         <Form inputs={[nameInput]} onSubmit={() => linkRef.click()} />
         <Link ref={linkRef} href={`/hi/${nameInput.value()}`}>
           <div class="i-carbon-arrow-right btn w-7 h-7" />
@@ -43,6 +46,13 @@ export default function() {
         <a class="btn" href="https://github.com/olgam4/bat" target="_blank">
           <div class="i-carbon-logo-github w-6 h-6" />
         </a>
+        <Button onClick={toggleTheme}>
+          {() => {
+            return theme.name === 'dark' ?
+              <div class="i-carbon-sun w-6 h-6" /> :
+              <div class="i-carbon-moon w-6 h-6" />
+          }}
+        </Button>
         <Link href={Math.round((Math.random() * 100000)).toString()}>
           <div class="btn i-carbon-location-hazard w-6 h-6" />
         </Link>

src/islands/app/reactivity.ts

@@ -24,9 +24,13 @@ const createApp = () => {
     locale(next)
   }
 
+  const theme = () => {
+  }
+
   return {
     phoneCall,
     nextLanguage,
+    theme,
   }
 }
 

src/islands/paragraph/index.tsx

@@ -13,8 +13,7 @@ interface Props {
 const Paragraph: Component<Props> = (props) => {
   const [t] = useI18n()
   return (
-
-      <p>{t(props.key, props.variable)}</p>
+    <p>{t(props.key, props.variable)}</p>
   )
 }
 

src/root.tsx

@@ -5,6 +5,7 @@ import { Routes } from '@solidjs/router'
 import { Suspense } from 'solid-js'
 
 import './assets/global.css'
+import { ThemeProvider } from '@context/theme'
 
 export default function Root() {
   return (
@@ -24,9 +25,11 @@ export default function Root() {
       <body>
         <ErrorBoundary>
           <Suspense>
-            <Routes>
-              <FileRoutes />
-            </Routes>
+            <ThemeProvider>
+              <Routes>
+                <FileRoutes />
+              </Routes>
+            </ThemeProvider>
           </Suspense>
         </ErrorBoundary>
         <Scripts />

src/routes/[...404].tsx

@@ -6,7 +6,7 @@ export default function() {
   return (
     <Provider>
       <Title>404</Title>
-      <div class="full flex-center flex-col bg-gray-100/75 text-gray-400">
+      <div class="full flex-center flex-col bg-gray-100/75 text-gray-400 dark:bg-gray-800">
         <h1 class="text-4xl font-extrabold">404</h1>
         <div class="flex space-x-1 mt-1">
           <Paragraph key='hello' />

src/routes/hi/[...name].tsx

@@ -8,7 +8,7 @@ export default function() {
   return (
     <Provider>
       <Title>Hello World</Title>
-      <div class="full flex-center flex-col bg-gray-100/75 space-y-2">
+      <div class="full flex-center flex-col bg-gray-100/75 dark:bg-gray-800 dark:text-gray-400 space-y-2">
         <Paragraph key='hello' variable={{ name: params.name }} />
         <Link href="/">
           <div class="i-carbon-arrow-left h-7 w-7" />

tailwind.config.cjs

@@ -2,13 +2,14 @@ const { Icons } = require('tailwindcss-plugin-icons')
 
 module.exports = {
 	content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  darkMode: 'class',
 	theme: {
 		extend: {},
 	},
 	plugins: [
     Icons({
       carbon: {
-        icons: ['language', 'arrow-left', 'arrow-right', 'location-hazard', 'logo-github', 'moonrise', 'face-dissatisfied-filled', 'phone-voice']
+        icons: ['sun', 'moon', 'language', 'arrow-left', 'arrow-right', 'location-hazard', 'logo-github', 'moonrise', 'face-dissatisfied-filled', 'phone-voice']
       }
     }),
   ],

tsconfig.json

@@ -17,7 +17,8 @@
       "@components/*": ["src/components/*"],
       "@islands/*": ["src/islands/*"],
       "@locales": ["src/locales"],
-      "@pages/*": ["src/pages/*"]
+      "@pages/*": ["src/pages/*"],
+      "@context/*": ["src/context/*"]
     }
   }
 }