themes setting option

web/src/components/ThemeChanger/ThemeChanger.stories.tsx

@@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ThemeChanger from './ThemeChanger'
+
+const meta: Meta<typeof ThemeChanger> = {
+  component: ThemeChanger,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ThemeChanger>
+
+export const Primary: Story = {}

web/src/components/ThemeChanger/ThemeChanger.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import ThemeChanger from './ThemeChanger'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('ThemeChanger', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<ThemeChanger />)
+    }).not.toThrow()
+  })
+})

web/src/components/ThemeChanger/ThemeChanger.tsx

@@ -0,0 +1,29 @@
+const ThemeChanger = () => {
+  return (
+    <details>
+      <summary>Themes</summary>
+      <ul>
+          <li>
+            <label className="label cursor-pointer gap-4">
+              <span className="label-text">Dark</span>
+              <input type="radio" name="theme-radios" className="radio theme-controller" value="dark" />
+            </label>
+          </li>
+          <li>
+            <label className="label cursor-pointer gap-4">
+              <span className="label-text">Light</span>
+              <input type="radio" name="theme-radios" className="radio theme-controller" value="light" />
+            </label>
+          </li>
+          <li>
+            <label className="label cursor-pointer gap-4">
+              <span className="label-text">Cupcake</span>
+              <input type="radio" name="theme-radios" className="radio theme-controller" value="cupcake" />
+            </label>
+          </li>
+      </ul>
+    </details>
+  )
+}
+
+export default ThemeChanger

web/src/layouts/ClientLayout/ClientLayout.tsx

@@ -1,4 +1,5 @@
 import { Link, routes } from '@redwoodjs/router'
+import ThemeChanger from 'src/components/ThemeChanger/ThemeChanger'
 
 type ClientLayoutProps = {
   children?: React.ReactNode
@@ -88,6 +89,7 @@ const ClientLayout = ({ children }: ClientLayoutProps) => {
           </a>
         </li>
         <li><a>Settings</a></li>
+        <li><ThemeChanger/></li>
         <li><a>Logout</a></li>
       </ul>
 
@@ -137,6 +139,7 @@ const ClientLayout = ({ children }: ClientLayoutProps) => {
             Providing reliable tech since 1992
           </p>
         </aside>
+
         <nav className="md:place-self-center md:justify-self-end">
           <div className="grid grid-flow-col gap-4">
             <a>