Merge pull request #108 from ryo4004/add-darkmode-loading

読み込み画面をダークモードに対応する
winds-nagaoka · May 7, 2021 · cb03449 · cb03449
2 parents 54723dc + 5fa2e86
commit cb03449
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/client/build/index.html b/client/build/index.html
@@ -22,6 +22,7 @@
   <!-- <link rel="icon" type="image/png" href="android-chrome.png"> -->
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
+  <style>body{background:#efeff4}@media(prefers-color-scheme:dark){body{background:#1c1c1e}}</style>
 </head>
 <body>
   <noscript>

diff --git a/client/src/index.scss b/client/src/index.scss
@@ -170,6 +170,15 @@ div {
   justify-content: center;
   align-items: center;
   background: #efeff4;
+
+  & {
+    background: #efeff4;
+  }
+  @media (prefers-color-scheme: dark) {
+    & {
+      background: #1c1c1e;
+    }
+  }
 }
 
 .loading {