Feat: add manual dark mode support

packages/swr-devtools-panel/src/components/CacheData.tsx

@@ -7,9 +7,10 @@ import { ErrorLabel } from "./StatusLabel";
 
 type Props = {
   cacheData: DevToolsCacheData;
+  modeType: string;
 };
 
-export const CacheData = React.memo(({ cacheData }: Props) => (
+export const CacheData = React.memo(({ cacheData, modeType }: Props) => (
   <Wrapper>
     <Title>
       <CacheKey cacheData={cacheData} />
@@ -21,15 +22,15 @@ export const CacheData = React.memo(({ cacheData }: Props) => (
         {cacheData.data && (
           <>
             <DataTitle>Data</DataTitle>
-            <CacheDataView data={cacheData.data as any} />
+            <CacheDataView data={cacheData.data as any} modeType={modeType} />
           </>
         )}
         {cacheData.error && (
           <>
             <DataTitle>
               <ErrorLabel>Error</ErrorLabel>
             </DataTitle>
-            <CacheDataView data={cacheData.error as any} />
+            <CacheDataView data={cacheData.error as any} modeType={modeType} />
           </>
         )}
       </>
@@ -38,13 +39,20 @@ export const CacheData = React.memo(({ cacheData }: Props) => (
 ));
 CacheData.displayName = "CacheData";
 
-const CacheDataView = ({ data }: { data: any }) => {
+const CacheDataView = ({ data, modeType }: { data: any; modeType: string }) => {
   if (typeof window === "undefined") return null;
+
   return (
     <JSONTree
       data={data}
       theme="railscasts"
-      invertTheme={!matchMedia("(prefers-color-scheme: dark)").matches}
+      invertTheme={
+        !(
+          modeType === "Dark" ||
+          (modeType === "System" &&
+            matchMedia("(prefers-color-scheme: dark)").matches)
+        )
+      }
       hideRoot
       shouldExpandNode={(_keyPath, _data, level) => level < 3}
     />

packages/swr-devtools-panel/src/components/CachePanel.tsx

@@ -18,10 +18,12 @@ export const CachePanel = ({
   cacheData,
   selectedItem,
   onSelectItem,
+  modeType,
 }: {
   cacheData: DevToolsCacheData[];
   selectedItem: DevToolsCacheData | null;
   onSelectItem: (devToolsCacheData: DevToolsCacheData) => void;
+  modeType: string;
 }) => {
   const [filterText, setFilterText] = useState("");
   const selectedCacheData =
@@ -51,7 +53,9 @@ export const CachePanel = ({
       </PanelItem>
       <VerticalDivider />
       <PanelItem>
-        {selectedCacheData && <CacheData cacheData={selectedCacheData} />}
+        {selectedCacheData && (
+          <CacheData cacheData={selectedCacheData} modeType={modeType} />
+        )}
       </PanelItem>
     </PanelWrapper>
   );

packages/swr-devtools-panel/src/components/HistoryPanel.tsx

@@ -22,10 +22,12 @@ export const HistoryPanel = ({
   tracks,
   selectedItem,
   onSelectedItem,
+  modeType,
 }: {
   tracks: any[];
   selectedItem: any;
   onSelectedItem: (data: any) => void;
+  modeType: string;
 }) => {
   const histories = tracks.flatMap((track) => track.items);
   histories.sort((a, b) => {
@@ -69,7 +71,9 @@ export const HistoryPanel = ({
       </PanelItem>
       <VerticalDivider />
       <PanelItem>
-        {selectedItem && <CacheData cacheData={selectedItem} />}
+        {selectedItem && (
+          <CacheData cacheData={selectedItem} modeType={modeType} />
+        )}
       </PanelItem>
     </PanelWrapper>
   );

packages/swr-devtools-panel/src/components/NetworkPanel.tsx

@@ -16,10 +16,12 @@ export const NetworkPanel = ({
   requestsById,
   tracks,
   startTime,
+  modeType,
 }: {
   requestsById: RequestsById;
   tracks: any[];
   startTime: number;
+  modeType: string;
 }) => {
   const [requestDetail, setRequestDetail] = useState<null | any>(null);
 
@@ -55,7 +57,7 @@ export const NetworkPanel = ({
           }}
         >
           <DetailDialog ref={detailRef}>
-            <CacheData cacheData={requestDetail} />
+            <CacheData cacheData={requestDetail} modeType={modeType} />
             <CloseButtonWrapper>
               <button onClick={() => setRequestDetail(null)}>Close</button>
             </CloseButtonWrapper>