CSV2ics

commit 8f803a4436ad0560b4eafe84ac6cfd73147dce4c
parent 844ff01dd9325b52b3c83ac91614914c3b5bf866
Author: minerva-jupitr <ryouturn@gmail.com>
Date:   Wed,  1 May 2024 13:03:46 +0900

change theme

Diffstat:
M
src/App.css
 | 
4
+++-
M
src/App.tsx
 | 
63
+++++++++++++++++++++++++++++++++++++++++++++++++++++----------

2 files changed, 56 insertions(+), 11 deletions(-)
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background-color: ;
 }
 
 .App-logo {
@@ -14,7 +15,7 @@
 }
 
 .App-header {
-  background-color: #4083ff;
+  background-color: #ffffff;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -36,3 +37,4 @@
     transform: rotate(360deg);
   }
 }
+
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,60 @@
 import * as React from 'react';
 import './App.css';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { useMediaQuery } from '@mui/material';
+
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <h1>CSV2icl</h1>
-        <h2>このアプリケーションはSCVで記述された時間割表をicl形式に直すことを目的に作成されました。
-          画面のタブを左から順番に勧めていくことでiclファイルが完成します。
-          <a href="https://github.com/minerva-jupiter/CSV2icl">from README</a>
-        </h2>
-      </header>
-    </div>
+  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+
+  const OStheme = createTheme({
+    palette: {
+       mode: isDarkMode ? 'dark' : 'light',
+        primary: {
+          light: '#1660aa',
+          main: '#1660aa',
+          dark: '#1660aa',
+          contrastText: '#fff',
+        },
+        secondary: {
+          light: '#bc8c47',
+          main: '#bc8c47',
+          dark: '#bc8c47',
+          contrastText: '#000',
+      },
+    }
+  })
+
+  return (  
+    <ThemeProvider theme={OStheme}>
+      <div className="App">
+        <header className="App-header">
+          <h1>CSV2icl</h1>
+          <h2>このアプリケーションはSCVで記述された時間割表をicl形式に直すことを目的に作成されました。
+            画面のタブを左から順番に勧めていくことでiclファイルが完成します。
+            <a href="https://github.com/minerva-jupiter/CSV2icl">from README</a>
+          </h2>
+        </header>
+      </div>
+    </ThemeProvider>
   );
 }
 
+const theme = createTheme({
+  palette: {
+    primary: {
+      light: '#1660aa',
+      main: '#1660aa',
+      dark: '#1660aa',
+      contrastText: '#fff',
+    },
+    secondary: {
+      light: '#bc8c47',
+      main: '#bc8c47',
+      dark: '#bc8c47',
+      contrastText: '#000',
+    },
+  },
+});
+
+
 export default App;