commit 080b13c2d19db4f8a04b15f990e571489aa96a75
parent 03d60537c7c25e3b07b7af5435ee87017afa689c
Author: Minerva_juppiter <94231606+minerva-jupiter@users.noreply.github.com>
Date: Thu, 2 May 2024 07:29:00 +0900
Update theme (#14)
* add usereact
* update dark theme
* update theme comp
Diffstat:
2 files changed, 12 insertions(+), 20 deletions(-)
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,6 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
@@ -24,7 +23,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>React App</title>
+ <title>CSV2ics</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,31 +1,24 @@
import * as React from 'react';
import './App.css';
import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { useMediaQuery } from '@mui/material';
+import { CssBaseline, useMediaQuery } from '@mui/material';
function App() {
- const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+ const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
- const OStheme = createTheme({
- palette: {
- mode: isDarkMode ? 'dark' : 'light',
- primary: {
- light: '#1660aa',
- main: '#1660aa',
- dark: '#1660aa',
- contrastText: '#fff',
+ const OStheme = React.useMemo(
+ () =>
+ createTheme({
+ palette: {
+ mode: prefersDarkMode ? "dark" : "light",
},
- secondary: {
- light: '#bc8c47',
- main: '#bc8c47',
- dark: '#bc8c47',
- contrastText: '#000',
- },
- }
- })
+ }),
+ [prefersDarkMode]
+ );
return (
<ThemeProvider theme={OStheme}>
+ <CssBaseline />
<div className="App">
<title>CSV2ics</title>
<header className="App-header">
