Commit 97e87eb

committed

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

1 parent 8482838 commit 97e87ebCopy full SHA for 97e87eb

File tree

+35

-15

lines changed

+35

-15

lines changed

Lines changed: 0 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@ import { Link, StaticQuery, graphql } from 'gatsby';`
`2`	`2`	`import React from 'react';`
`3`	`3`	`import Post from '../../models/post';`
`4`	`4`	`import PostSearch from '../post-search';`
`5`		`-import ThemeSwitch from '../theme-switch';`
`6`	`5`	`import './style.scss';`
`7`	`6`
`8`	`7`	`function PageHeader({ siteTitle }) {`
`@@ -43,7 +42,6 @@ function PageHeader({ siteTitle }) {`
`43`	`42`	`<PostSearch`
`44`	`43`	`posts={data.allMarkdownRemark.edges.map(({ node }) => new Post(node, true))}`
`45`	`44`	`/>`
`46`		`- <ThemeSwitch />`
`47`	`45`	`</div>`
`48`	`46`	`</div>`
`49`	`47`	`</header>`

Lines changed: 12 additions & 8 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`import React, { useEffect, useState } from 'react';`
`2`		`-import { Switch } from '@material-ui/core';`
	`2`	`+import { IconButton } from '@mui/material';`
	`3`	`+import DarkModeIcon from '@mui/icons-material/DarkMode';`
	`4`	`+import LightModeIcon from '@mui/icons-material/LightMode';`
`3`	`5`	`import { getValueFromLocalStorage, setValueToLocalStorage } from '../../utils/localStorage';`
`4`	`6`	`import './style.scss';`
`5`	`7`
`@@ -12,13 +14,15 @@ function ThemeSwitch() {`
`12`	`14`	`}, [isDarkMode]);`
`13`	`15`
`14`	`16`	`return (`
`15`		`- <Switch`
`16`		`- className="dark-mode-switch"`
`17`		`- size="medium"`
`18`		`- color="default"`
`19`		`- checked={isDarkMode}`
`20`		`- onChange={() => setIsDarkMode((isDark) => !isDark)}`
`21`		`- />`
	`17`	`+ <div className="dark-mode-button-wrapper">`
	`18`	`+ <IconButton className="dark-mode-button" onClick={() => setIsDarkMode((isDark) => !isDark)}>`
	`19`	`+ {isDarkMode ? (`
	`20`	`+ <LightModeIcon className="dark-mode-icon" fontSize="large" />`
	`21`	`+ ) : (`
	`22`	`+ <DarkModeIcon className="dark-mode-icon" fontSize="large" />`
	`23`	`+ )}`
	`24`	`+ </IconButton>`
	`25`	`+ </div>`
`22`	`26`	`);`
`23`	`27`	`}`
`24`	`28`

Lines changed: 21 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,25 @@`
`1`	`1`	`@use '../../styles/mixins'as *;`
`2`	`2`
`3`		`-.dark-mode-switch {`
`4`		`- margin-left: 3px;`
	`3`	`+.dark-mode-button-wrapper {`
	`4`	`+ position: fixed;`
	`5`	`+ display: flex;`
	`6`	`+ justify-content: center;`
	`7`	`+ align-items: center;`
	`8`	`+ bottom: 20px;`
	`9`	`+ right: 20px;`
	`10`	`+}`
`5`	`11`
`6`		`- @include md {`
`7`		`- margin-left: 13px;`
`8`		`- }`
	`12`	`+.dark-mode-button {`
	`13`	`+ width: 50px;`
	`14`	`+ height: 50px;`
	`15`	`+ border-radius: 50px;`
	`16`	`+ background-color: #363f47 !important;`
	`17`	`+ cursor: pointer;`
	`18`	`+ box-shadow: 0px 5px 25px rgb(0 0 0 / 12%);`
	`19`	`+ backdrop-filter: blur(30px);`
	`20`	`+ z-index: 3;`
	`21`	`+}`
	`22`	`+`
	`23`	`+.dark-mode-icon {`
	`24`	`+ color: white;`
`9`	`25`	`}`

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import React from 'react';`
`2`	`2`	`import { useStaticQuery, graphql } from 'gatsby';`
`3`	`3`	`import PageHeader from '../components/page-header';`
`4`	`4`	`import PageFooter from '../components/page-footer';`
	`5`	`+import ThemeSwitch from '../components/theme-switch';`
`5`	`6`	`import './style.scss';`
`6`	`7`
`7`	`8`	`const Layout = ({ children }) => {`
`@@ -30,6 +31,7 @@ const Layout = ({ children }) => {`
`30`	`31`	author={author.name \|\| `Author`}
`31`	`32`	githubUrl={author.social?.github \|\| `https://www.github.com`}
`32`	`33`	`/>`
	`34`	`+ <ThemeSwitch />`
`33`	`35`	`</div>`
`34`	`36`	`);`
`35`	`37`	`};`

Comments

(0)