[#46] ThemeSwitch를 Floating Button으로 변경

src/components/page-header/index.js

@@ -2,7 +2,6 @@ import { Link, StaticQuery, graphql } from 'gatsby';
 import React from 'react';
 import Post from '../../models/post';
 import PostSearch from '../post-search';
-import ThemeSwitch from '../theme-switch';
 import './style.scss';
 
 function PageHeader({ siteTitle }) {
@@ -43,7 +42,6 @@ function PageHeader({ siteTitle }) {
               <PostSearch
                 posts={data.allMarkdownRemark.edges.map(({ node }) => new Post(node, true))}
               />
-              <ThemeSwitch />
             </div>
           </div>
         </header>

src/components/theme-switch/index.js

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Switch } from '@material-ui/core';
+import { IconButton } from '@mui/material';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
 import { getValueFromLocalStorage, setValueToLocalStorage } from '../../utils/localStorage';
 import './style.scss';
 
@@ -12,13 +14,15 @@ function ThemeSwitch() {
   }, [isDarkMode]);
 
   return (
-    <Switch
-      className="dark-mode-switch"
-      size="medium"
-      color="default"
-      checked={isDarkMode}
-      onChange={() => setIsDarkMode((isDark) => !isDark)}
-    />
+    <div className="dark-mode-button-wrapper">
+      <IconButton className="dark-mode-button" onClick={() => setIsDarkMode((isDark) => !isDark)}>
+        {isDarkMode ? (
+          <LightModeIcon className="dark-mode-icon" fontSize="large" />
+        ) : (
+          <DarkModeIcon className="dark-mode-icon" fontSize="large" />
+        )}
+      </IconButton>
+    </div>
   );
 }
 

src/components/theme-switch/style.scss

@@ -1,9 +1,25 @@
 @use '../../styles/mixins'as *;
 
-.dark-mode-switch {
-    margin-left: 3px;
+.dark-mode-button-wrapper {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 20px;
+    right: 20px;
+}
 
-    @include md {
-        margin-left: 13px;
-    }
+.dark-mode-button {
+    width: 50px;
+    height: 50px;
+    border-radius: 50px;
+    background-color: #363f47 !important;
+    cursor: pointer;
+    box-shadow: 0px 5px 25px rgb(0 0 0 / 12%);
+    backdrop-filter: blur(30px);
+    z-index: 3;
+}
+
+.dark-mode-icon {
+    color: white;
 }

src/layout/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import PageHeader from '../components/page-header';
 import PageFooter from '../components/page-footer';
+import ThemeSwitch from '../components/theme-switch';
 import './style.scss';
 
 const Layout = ({ children }) => {
@@ -30,6 +31,7 @@ const Layout = ({ children }) => {
         author={author.name || `Author`}
         githubUrl={author.social?.github || `https://www.github.com`}
       />
+      <ThemeSwitch />
     </div>
   );
 };