[Task] #61, mobile Theme Swticher placed on top right

src/client/components/ModeSwitcher.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useColorScheme } from '@mui/material/styles';
 import { Button, useMediaQuery } from '@mui/material';
 import { LightMode, Nightlight } from '@mui/icons-material';
+import * as css from "../css/modeSwticher.module.css";
 
 function ModeSwitcher() {
   const { mode, setMode } = useColorScheme();
@@ -13,7 +14,8 @@ function ModeSwitcher() {
 
   return (
     <Button
-      variant='contained' size='large'
+      className={css.modeSwitcher}
+      variant='outlined' size='large'
       startIcon={mode === 'dark' ? <Nightlight/> : <LightMode/>}
       onClick={() => {
         if (mode === 'light') {

src/client/css/modeSwticher.module.css

@@ -0,0 +1,19 @@
+.modeSwitcher[class] {
+	position: fixed;
+	inset: 1rem 1rem auto auto;
+
+	color: var(--text);
+	border-color: currentColor;
+
+	&:hover {
+		background-color: color-mix(in oklch, var(--neutral) 20%, transparent);
+		border-color: currentColor;
+	}
+
+	[data-mui-color-scheme="dark"] & {
+		color: var(--main);
+		&:hover {
+			background-color: color-mix(in oklch, white 10%, transparent);
+		}
+	}	
+}