Update theme used for JSONTree components to match theme for GraphQL …

…queries (#1054)
apollographql · Sep 1, 2023 · ecb25f8 · ecb25f8
1 parent 7f07103
commit ecb25f8
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 75 deletions.
diff --git a/.changeset/spicy-llamas-greet.md b/.changeset/spicy-llamas-greet.md
@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Update color theme of areas that display JSON data such as variables and cache data to match the theme used to display GraphQL queries.
diff --git a/src/application/components/SyntaxHighlighter.tsx b/src/application/components/SyntaxHighlighter.tsx
@@ -3,102 +3,193 @@ import Highlight, {
   Language,
   PrismTheme,
 } from "prism-react-renderer";
+import { useReactiveVar } from "@apollo/client";
 import { colors } from "@apollo/space-kit/colors";
+import { ColorTheme, colorTheme } from "../theme";
 
 interface SyntaxHighlighterProps {
   className?: string;
   language: Language;
   code: string;
 }
 
-const theme: PrismTheme = {
-  plain: {
-    color: "currentColor",
-    backgroundColor: "transparent",
-  },
-  styles: [
-    {
-      types: ["important", "bold"],
-      style: {
-        fontWeight: "bold",
-      },
+const theme: Record<ColorTheme, PrismTheme> = {
+  [ColorTheme.Light]: {
+    plain: {
+      color: "currentColor",
+      backgroundColor: "transparent",
     },
-    {
-      types: ["italic"],
-      style: {
-        fontStyle: "italic",
+    styles: [
+      {
+        types: ["important", "bold"],
+        style: {
+          fontWeight: "bold",
+        },
       },
-    },
-    {
-      types: ["entity"],
-      style: {
-        cursor: "help",
+      {
+        types: ["italic"],
+        style: {
+          fontStyle: "italic",
+        },
       },
-    },
-    {
-      types: ["selector", "attr-name", "char", "builtin", "inserted"],
-      style: {
-        color: colors.teal.light,
+      {
+        types: ["entity"],
+        style: {
+          cursor: "help",
+        },
       },
-    },
-    {
-      types: ["comment", "prolog", "doctype", "cdata"],
-      style: {
-        color: colors.orange.light,
-        fontWeight: "bold",
+      {
+        types: ["selector", "attr-name", "char", "builtin", "inserted"],
+        style: {
+          color: colors.teal.dark,
+        },
       },
-    },
-    {
-      types: ["punctuation"],
-      style: {
-        color: colors.grey.light,
+      {
+        types: ["comment", "prolog", "doctype", "cdata"],
+        style: {
+          color: colors.orange.base,
+          fontWeight: "bold",
+        },
       },
-    },
-    {
-      types: [
-        "property",
-        "tag",
-        "boolean",
-        "number",
-        "constant",
-        "symbol",
-        "deleted",
-        "class-name",
-        "function",
-      ],
-      style: {
-        color: colors.pink.light,
+      {
+        types: ["punctuation"],
+        style: {
+          color: colors.grey.base,
+        },
       },
-    },
-    {
-      types: ["atrule", "attr-value", "keyword"],
-      style: {
-        color: "inherit",
-        background: "transparent",
+      {
+        types: [
+          "property",
+          "tag",
+          "boolean",
+          "number",
+          "constant",
+          "symbol",
+          "deleted",
+          "class-name",
+          "function",
+        ],
+        style: {
+          color: colors.pink.dark,
+        },
       },
-    },
-    {
-      types: ["atrule", "attr-value", "keyword"],
-      style: {
-        color: colors.indigo.light,
+      {
+        types: ["atrule", "attr-value", "keyword"],
+        style: {
+          color: "inherit",
+          background: "transparent",
+        },
       },
-    },
-    {
-      types: ["regex", "important", "variable", "description"],
-      style: {
-        color: colors.yellow.light,
+      {
+        types: ["atrule", "attr-value", "keyword"],
+        style: {
+          color: colors.indigo.base,
+        },
+      },
+      {
+        types: ["regex", "important", "variable", "description"],
+        style: {
+          color: colors.yellow.base,
+        },
       },
+    ],
+  },
+  [ColorTheme.Dark]: {
+    plain: {
+      color: "currentColor",
+      backgroundColor: "transparent",
     },
-  ],
+    styles: [
+      {
+        types: ["important", "bold"],
+        style: {
+          fontWeight: "bold",
+        },
+      },
+      {
+        types: ["italic"],
+        style: {
+          fontStyle: "italic",
+        },
+      },
+      {
+        types: ["entity"],
+        style: {
+          cursor: "help",
+        },
+      },
+      {
+        types: ["selector", "attr-name", "char", "builtin", "inserted"],
+        style: {
+          color: colors.teal.light,
+        },
+      },
+      {
+        types: ["comment", "prolog", "doctype", "cdata"],
+        style: {
+          color: colors.orange.light,
+          fontWeight: "bold",
+        },
+      },
+      {
+        types: ["punctuation"],
+        style: {
+          color: colors.grey.light,
+        },
+      },
+      {
+        types: [
+          "property",
+          "tag",
+          "boolean",
+          "number",
+          "constant",
+          "symbol",
+          "deleted",
+          "class-name",
+          "function",
+        ],
+        style: {
+          color: colors.pink.light,
+        },
+      },
+      {
+        types: ["atrule", "attr-value", "keyword"],
+        style: {
+          color: "inherit",
+          background: "transparent",
+        },
+      },
+      {
+        types: ["atrule", "attr-value", "keyword"],
+        style: {
+          color: colors.indigo.light,
+        },
+      },
+      {
+        types: ["regex", "important", "variable", "description"],
+        style: {
+          color: colors.yellow.light,
+        },
+      },
+    ],
+  },
 };
 
 const SyntaxHighlighter = ({
   code,
   className: outerClassName,
   language,
 }: SyntaxHighlighterProps) => {
+  const activeTheme = theme[useReactiveVar(colorTheme)];
+
   return (
-    <Highlight {...defaultProps} language={language} theme={theme} code={code}>
+    <Highlight
+      {...defaultProps}
+      language={language}
+      theme={activeTheme}
+      code={code}
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => {
         return (
           <pre

diff --git a/src/application/theme.ts b/src/application/theme.ts
@@ -73,10 +73,10 @@ export const treeTheme: Record<ColorTheme, Record<string, ShadedColor>> = {
     base05: colors.white as ShadedColor,
     base06: colors.white as ShadedColor,
     base07: colors.white as ShadedColor,
-    base08: colors.red.base,
-    base09: colors.red.base,
+    base08: colors.grey.base,
+    base09: colors.indigo.base,
     base0A: colors.black.base,
-    base0B: colors.red.base,
+    base0B: colors.pink.dark,
     base0C: colors.black.base,
     base0D: colors.black.base,
     base0E: colors.black.base,
@@ -91,10 +91,10 @@ export const treeTheme: Record<ColorTheme, Record<string, ShadedColor>> = {
     base05: colors.white as ShadedColor,
     base06: colors.white as ShadedColor,
     base07: colors.white as ShadedColor,
-    base08: colors.red.base,
-    base09: colors.red.base,
+    base08: colors.grey.base,
+    base09: colors.indigo.light,
     base0A: colors.white as ShadedColor,
-    base0B: colors.red.base,
+    base0B: colors.pink.light,
     base0C: colors.white as ShadedColor,
     base0D: colors.white as ShadedColor,
     base0E: colors.white as ShadedColor,