From b5ffd5fa1e7b1121e8e332393b4df99d36a3ad98 Mon Sep 17 00:00:00 2001 From: diaid83 Date: Tue, 25 May 2021 23:22:26 +0200 Subject: [PATCH] added dark theme --- .eslintcache | 2 +- src/layouts/white/White.jsx | 32 ++++--- .../white/components/header/Header.jsx | 34 +++++--- .../header/switchToogle/SwitchToogle.jsx | 86 +++++++++++++++++++ .../components/header/switchToogle/index.js | 1 + 5 files changed, 130 insertions(+), 25 deletions(-) create mode 100644 src/layouts/white/components/header/switchToogle/SwitchToogle.jsx create mode 100644 src/layouts/white/components/header/switchToogle/index.js diff --git a/.eslintcache b/.eslintcache index e1912f2..dc3e5cc 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/home/dan/Development/Repositories/me/src/reportWebVitals.js":"1","/home/dan/Development/Repositories/me/src/routes/index.js":"2","/home/dan/Development/Repositories/me/src/themes/overrides/index.js":"3","/home/dan/Development/Repositories/me/src/layouts/main/index.js":"4","/home/dan/Development/Repositories/me/src/pages/about/index.js":"5","/home/dan/Development/Repositories/me/src/pages/games/index.js":"6","/home/dan/Development/Repositories/me/src/themes/overrides/MuiInputBase.js":"7","/home/dan/Development/Repositories/me/src/themes/overrides/MuiSwitch.js":"8","/home/dan/Development/Repositories/me/src/routes/components/customRoute/CustomRoute.jsx":"9","/home/dan/Development/Repositories/me/src/pages/about/About.jsx":"10","/home/dan/Development/Repositories/me/src/layouts/main/components/header/index.js":"11","/home/dan/Development/Repositories/me/src/layouts/white/components/header/Header.jsx":"12","/home/dan/Development/Repositories/me/src/layouts/main/components/header/navigation/index.js":"13","/home/dan/Development/Repositories/me/src/layouts/main/components/header/navigation/Navigation.jsx":"14"},{"size":362,"mtime":1621961543382,"results":"15","hashOfConfig":"16"},{"size":36,"mtime":1621961543382,"results":"17","hashOfConfig":"16"},{"size":354,"mtime":1621961543386,"results":"18","hashOfConfig":"16"},{"size":34,"mtime":1621961543382,"results":"19","hashOfConfig":"16"},{"size":35,"mtime":1621961543382,"results":"20","hashOfConfig":"16"},{"size":31,"mtime":1621961543382,"results":"21","hashOfConfig":"16"},{"size":238,"mtime":1621961543386,"results":"22","hashOfConfig":"16"},{"size":778,"mtime":1621961543386,"results":"23","hashOfConfig":"16"},{"size":354,"mtime":1621961543382,"results":"24","hashOfConfig":"16"},{"size":2563,"mtime":1621961917479,"results":"25","hashOfConfig":"16"},{"size":36,"mtime":1621961543382,"results":"26","hashOfConfig":"16"},{"size":1762,"mtime":1621961543382,"results":"27","hashOfConfig":"16"},{"size":40,"mtime":1621961543382,"results":"28","hashOfConfig":"16"},{"size":4934,"mtime":1621961543382,"results":"29","hashOfConfig":"16"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1dswp81",{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/dan/Development/Repositories/me/src/reportWebVitals.js",[],"/home/dan/Development/Repositories/me/src/routes/index.js",[],"/home/dan/Development/Repositories/me/src/themes/overrides/index.js",["58"],"/home/dan/Development/Repositories/me/src/layouts/main/index.js",[],"/home/dan/Development/Repositories/me/src/pages/about/index.js",[],"/home/dan/Development/Repositories/me/src/pages/games/index.js",[],"/home/dan/Development/Repositories/me/src/themes/overrides/MuiInputBase.js",[],"/home/dan/Development/Repositories/me/src/themes/overrides/MuiSwitch.js",[],"/home/dan/Development/Repositories/me/src/routes/components/customRoute/CustomRoute.jsx",[],"/home/dan/Development/Repositories/me/src/pages/about/About.jsx",[],"/home/dan/Development/Repositories/me/src/layouts/main/components/header/index.js",[],"/home/dan/Development/Repositories/me/src/layouts/white/components/header/Header.jsx",[],"/home/dan/Development/Repositories/me/src/layouts/main/components/header/navigation/index.js",[],"/home/dan/Development/Repositories/me/src/layouts/main/components/header/navigation/Navigation.jsx",[],{"ruleId":"59","severity":1,"message":"60","line":8,"column":1,"nodeType":"61","endLine":15,"endColumn":3},"import/no-anonymous-default-export","Assign object to a variable before exporting as module default","ExportDefaultDeclaration"] \ No newline at end of file +[{"/home/dan/Development/Repositories/me/src/reportWebVitals.js":"1","/home/dan/Development/Repositories/me/src/routes/index.js":"2","/home/dan/Development/Repositories/me/src/themes/overrides/index.js":"3","/home/dan/Development/Repositories/me/src/layouts/main/index.js":"4","/home/dan/Development/Repositories/me/src/pages/about/index.js":"5","/home/dan/Development/Repositories/me/src/pages/games/index.js":"6","/home/dan/Development/Repositories/me/src/themes/overrides/MuiInputBase.js":"7","/home/dan/Development/Repositories/me/src/themes/overrides/MuiSwitch.js":"8","/home/dan/Development/Repositories/me/src/routes/components/customRoute/CustomRoute.jsx":"9","/home/dan/Development/Repositories/me/src/pages/about/About.jsx":"10","/home/dan/Development/Repositories/me/src/layouts/main/components/header/index.js":"11","/home/dan/Development/Repositories/me/src/layouts/white/components/header/Header.jsx":"12","/home/dan/Development/Repositories/me/src/layouts/main/components/header/navigation/index.js":"13","/home/dan/Development/Repositories/me/src/layouts/main/components/header/navigation/Navigation.jsx":"14","/home/dan/Development/Repositories/me/src/layouts/white/White.jsx":"15","/home/dan/Development/Repositories/me/src/layouts/white/components/footer/Footer.jsx":"16","/home/dan/Development/Repositories/me/src/layouts/white/components/header/index.js":"17","/home/dan/Development/Repositories/me/src/layouts/white/components/header/switchToogle/SwitchToogle.jsx":"18","/home/dan/Development/Repositories/me/src/layouts/white/components/header/switchToogle/index.js":"19"},{"size":362,"mtime":1621961543382,"results":"20","hashOfConfig":"21"},{"size":36,"mtime":1621961543382,"results":"22","hashOfConfig":"21"},{"size":354,"mtime":1621961543386,"results":"23","hashOfConfig":"21"},{"size":34,"mtime":1621961543382,"results":"24","hashOfConfig":"21"},{"size":35,"mtime":1621961543382,"results":"25","hashOfConfig":"21"},{"size":31,"mtime":1621961543382,"results":"26","hashOfConfig":"21"},{"size":238,"mtime":1621961543386,"results":"27","hashOfConfig":"21"},{"size":778,"mtime":1621961543386,"results":"28","hashOfConfig":"21"},{"size":354,"mtime":1621961543382,"results":"29","hashOfConfig":"21"},{"size":2563,"mtime":1621961917479,"results":"30","hashOfConfig":"21"},{"size":36,"mtime":1621961543382,"results":"31","hashOfConfig":"21"},{"size":2177,"mtime":1621977714341,"results":"32","hashOfConfig":"21"},{"size":40,"mtime":1621961543382,"results":"33","hashOfConfig":"21"},{"size":4934,"mtime":1621961543382,"results":"34","hashOfConfig":"21"},{"size":1360,"mtime":1621968578830,"results":"35","hashOfConfig":"21"},{"size":1297,"mtime":1621963170407,"results":"36","hashOfConfig":"21"},{"size":36,"mtime":1621963170407,"results":"37","hashOfConfig":"21"},{"size":1802,"mtime":1621977640652,"results":"38","hashOfConfig":"21"},{"size":41,"mtime":1621972054946,"results":"39","hashOfConfig":"21"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1dswp81",{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"76"},{"filePath":"77","messages":"78","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/dan/Development/Repositories/me/src/reportWebVitals.js",[],"/home/dan/Development/Repositories/me/src/routes/index.js",[],"/home/dan/Development/Repositories/me/src/themes/overrides/index.js",["79"],"/home/dan/Development/Repositories/me/src/layouts/main/index.js",[],"/home/dan/Development/Repositories/me/src/pages/about/index.js",[],"/home/dan/Development/Repositories/me/src/pages/games/index.js",[],"/home/dan/Development/Repositories/me/src/themes/overrides/MuiInputBase.js",[],"/home/dan/Development/Repositories/me/src/themes/overrides/MuiSwitch.js",[],"/home/dan/Development/Repositories/me/src/routes/components/customRoute/CustomRoute.jsx",[],"/home/dan/Development/Repositories/me/src/pages/about/About.jsx",[],"/home/dan/Development/Repositories/me/src/layouts/main/components/header/index.js",[],"/home/dan/Development/Repositories/me/src/layouts/white/components/header/Header.jsx",[],"/home/dan/Development/Repositories/me/src/layouts/main/components/header/navigation/index.js",[],"/home/dan/Development/Repositories/me/src/layouts/main/components/header/navigation/Navigation.jsx",[],"/home/dan/Development/Repositories/me/src/layouts/white/White.jsx",[],"/home/dan/Development/Repositories/me/src/layouts/white/components/footer/Footer.jsx",[],"/home/dan/Development/Repositories/me/src/layouts/white/components/header/index.js",[],"/home/dan/Development/Repositories/me/src/layouts/white/components/header/switchToogle/SwitchToogle.jsx",["80","81"],"import React from 'react';\nimport { Switch } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/styles';\nimport {Brightness3Icon, WbSunnyIcon} from '@material-ui/icons';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: 80,\n height: 48,\n padding: 8,\n },\n switchBase: {\n padding: 11,\n color: '#ff6a00',\n },\n thumb: {\n width: 26,\n height: 26,\n backgroundColor: 'transparent',\n },\n track: {\n background: 'linear-gradient(to right, #ee0979, #ff6a00)',\n opacity: '1 !important',\n borderRadius: 20,\n position: 'relative',\n '&:before, &:after': {\n display: 'inline-block',\n position: 'absolute',\n top: '50%',\n width: '50%',\n transform: 'translateY(-50%)',\n color: '#fff',\n textAlign: 'center',\n },\n '&:before': {\n left: 4,\n opacity: 0,\n },\n '&:after': {\n right: 4,\n },\n },\n checked: {\n '&$switchBase': {\n color: '#185a9d',\n transform: 'translateX(32px)',\n '&:hover': {\n backgroundColor: 'rgba(24,90,257,0.08)',\n },\n },\n '& $thumb': {\n backgroundColor: 'transparent',\n },\n '& + $track': {\n background: 'linear-gradient(to right, #43cea2, #185a9d)',\n '&:before': {\n opacity: 1,\n },\n '&:after': {\n opacity: 0,\n },\n },\n },\n}));\n\nconst SwitchToogle = (props) => {\n const classes = useStyles();\n const { darkMode, setDarkMode } = props;\n\n return (\n setDarkMode(!darkMode)}\n classes={{\n root: classes.root,\n switchBase: classes.switchBase,\n thumb: classes.thumb,\n track: classes.track,\n checked: classes.checked,\n }}\n />\n );\n};\n\nexport default SwitchToogle;\n","/home/dan/Development/Repositories/me/src/layouts/white/components/header/switchToogle/index.js",[],{"ruleId":"82","severity":1,"message":"83","line":8,"column":1,"nodeType":"84","endLine":15,"endColumn":3},{"ruleId":"85","severity":1,"message":"86","line":4,"column":9,"nodeType":"87","messageId":"88","endLine":4,"endColumn":24},{"ruleId":"85","severity":1,"message":"89","line":4,"column":26,"nodeType":"87","messageId":"88","endLine":4,"endColumn":37},"import/no-anonymous-default-export","Assign object to a variable before exporting as module default","ExportDefaultDeclaration","no-unused-vars","'Brightness3Icon' is defined but never used.","Identifier","unusedVar","'WbSunnyIcon' is defined but never used."] \ No newline at end of file diff --git a/src/layouts/white/White.jsx b/src/layouts/white/White.jsx index 01bea46..9ef35f0 100644 --- a/src/layouts/white/White.jsx +++ b/src/layouts/white/White.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Container } from '@material-ui/core'; import { ThemeProvider, @@ -23,26 +23,30 @@ const useStyles = makeStyles((theme) => ({ }, })); -let theme = createMuiTheme({ - typography: { - fontFamily: 'Yeon Sung', - transform: 'matrix(1, 0, 0, 1, 0, 0)', - // h1: { - // // marginLeft: '-.5rem', - // paddingLeft: 0, - // }, - }, -}); -theme = responsiveFontSizes(theme); - const White = (props) => { const { children } = props; const classes = useStyles(); + const [darkMode, setDarkMode] = useState(true); + + let theme = createMuiTheme({ + typography: { + fontFamily: 'Yeon Sung', + transform: 'matrix(1, 0, 0, 1, 0, 0)', + // h1: { + // // marginLeft: '-.5rem', + // paddingLeft: 0, + // }, + }, + palette: { + type: darkMode ? 'dark' : 'light', + }, + }); + theme = responsiveFontSizes(theme); return (
-
+
{children}