feat: support dark mode

koba04 · Aug 18, 2021 · 40d96a4 · 40d96a4
1 parent 3715ba6
commit 40d96a4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/packages/swr-devtools-extensions/src/panel.html b/packages/swr-devtools-extensions/src/panel.html
@@ -5,6 +5,9 @@
       html {
         height: 100%;
         background-color: white;
+        @media (prefers-color-scheme: dark) {
+          background-color: rgb(39, 40, 34);
+        }
       }
       body, div#app {
         height: 100%;

diff --git a/packages/swr-devtools/src/components/CacheData.tsx b/packages/swr-devtools/src/components/CacheData.tsx
@@ -41,7 +41,7 @@ const CacheDataView = ({ data }: Props) => {
 
 const AsyncReactJson = ({ data }: Props) => {
   const ReactJson = lazy(() => import("react-json-view"));
-  return <ReactJson src={data} />;
+  return <ReactJson src={data} theme="monokai" />;
 };
 
 const ErrorText = styled.p`
@@ -51,6 +51,7 @@ const ErrorText = styled.p`
 const Title = styled.h3`
   margin: 0;
   padding: 1rem 0.5rem;
+  color: var(--swr-devtools-text-color);
 `;
 
 const TimestampText = styled.span`

diff --git a/packages/swr-devtools/src/components/Panel.tsx b/packages/swr-devtools/src/components/Panel.tsx
@@ -45,7 +45,7 @@ export const Panel = ({
           ))}
         </CacheItems>
       </PanelItem>
-      <hr />
+      <Hr />
       <PanelItem>{currentData && <CacheData data={currentData} />}</PanelItem>
     </PanelWrapper>
   );
@@ -89,6 +89,11 @@ const CacheItemButton = styled.button`
   height: 100%;
   border: none;
   background: transparent;
+  color: var(--swr-devtools-text-color);
   cursor: pointer;
   text-align: left;
 `;
+
+const Hr = styled.hr`
+  border-color: var(--swr-devtools-border-color);
+`;
diff --git a/packages/swr-devtools/src/components/SWRDevTool.tsx b/packages/swr-devtools/src/components/SWRDevTool.tsx
@@ -31,6 +31,7 @@ export type ItemKey = {
 
 const GlobalStyle = createGlobalStyle`
   html {
+    --swr-devtools-text-color: #000;
     --swr-devtools-bg-color: #FFF;
     --swr-devtools-hover-bg-color: #f7f5f4;
     --swr-devtools-border-color: #CCC;
@@ -40,6 +41,17 @@ const GlobalStyle = createGlobalStyle`
     --swr-devtools-tag-text-color: #FFF;
     --swr-devtools-error-text-color: red;
 
+    @media (prefers-color-scheme: dark) {
+      --swr-devtools-text-color: #FFF;
+      --swr-devtools-bg-color: rgb(39, 40, 34);
+      --swr-devtools-hover-bg-color: #6d6a66;
+      --swr-devtools-border-color: #555454;
+      --swr-devtools-selected-bg-color: #524f4d;
+      --swr-devtools-selected-border-color: #bbb;
+      --swr-devtools-tag-bg-color: #FFF;
+      --swr-devtools-tag-text-color: #464242;
+      --swr-devtools-error-text-color: red;
+    }
   }
 `;
 
@@ -88,6 +100,7 @@ const Header = styled.header`
   display: flex;
   /* TODO: stop using the fixed size */
   height: 36px;
+  color: var(--swr-devtools-text-color);
 `;
 
 const HeaderTitle = styled.h3`

diff --git a/packages/swr-devtools/src/components/Tab.tsx b/packages/swr-devtools/src/components/Tab.tsx
@@ -40,6 +40,7 @@ const TabButton = styled.button.attrs({ type: "button" })<{
     props.isSelected
       ? "var(--swr-devtools-selected-bg-color)"
       : "var(--swr-devtools-bg-color)"};
+  color: var(--swr-devtools-text-color);
   cursor: pointer;
   &:hover {
     background-color: ${(props) =>