docs: fix logo and tweak playground theme [skip ci]

docs/docusaurus.config.js

@@ -70,8 +70,8 @@ const config = {
         title: "JSON P3",
         logo: {
           alt: "JSON P3",
-          src: "img/p3_v2_dark.svg",
-          srcDark: "img/p3_v2_light.svg",
+          src: "img/p3_v2_dark_path.svg",
+          srcDark: "img/p3_v2_light_path.svg",
         },
         items: [
           {

docs/src/components/JSONPathPlayground/index.js

@@ -24,14 +24,16 @@ const commonEditorOptions = {
   padding: { bottom: 10, top: 10 },
 };
 
-function QueryEditor({ defaultQuery, theme, onChange }) {
+function QueryEditor({ defaultQuery, theme, beforeMount, onMount, onChange }) {
   return (
     <Editor
       height="100%"
       language="text"
       theme={theme}
       defaultValue={defaultQuery}
+      beforeMount={beforeMount}
       onChange={onChange}
+      onMount={onMount}
       options={{ ...commonEditorOptions, fontSize: 16, lineNumbers: "off" }}
     />
   );
@@ -64,14 +66,13 @@ function JSONEditor({ onChange, theme }) {
   );
 }
 
-function ResultsEditor({ result, theme, beforeMount }) {
+function ResultsEditor({ result, theme }) {
   return (
     <Editor
       height="100%"
       language="json"
       theme={theme}
       value={result}
-      beforeMount={beforeMount}
       options={{
         ...commonEditorOptions,
         wordWrap: "on",
@@ -118,20 +119,28 @@ export default function Playground() {
   const [data, setData] = useState(defaultData);
 
   const { colorMode } = useColorMode();
-  const initTheme = colorMode === "light" ? "light" : "vs-dark";
+  const initTheme = colorMode === "light" ? "Cobalt" : "vs-dark";
   const monacoRef = useRef(null);
 
   function handleEditorWillMount(monaco) {
     monacoRef.current = monaco;
   }
 
+  function handleEditorDidMount(_, monaco) {
+    import("monaco-themes/themes/Cobalt.json")
+      .then((themeData) => {
+        monaco.editor.defineTheme("Cobalt", themeData);
+      })
+      .then((_) => monaco.editor.setTheme("Cobalt"));
+  }
+
   /**
    * Synchronize colorMode with editor theme.
    */
   useEffect(() => {
     if (colorMode && monacoRef.current !== null) {
       monacoRef.current.editor.setTheme(
-        colorMode === "light" ? "light" : "vs-dark",
+        colorMode === "light" ? "Cobalt" : "vs-dark",
       );
     }
   }, [colorMode]);
@@ -185,14 +194,21 @@ export default function Playground() {
           <h1 className={styles.heading}>JSONPath Playground</h1>
           <hr className={styles.headingRule} />
         </Grid>
-        <Grid xs={12} sx={{ height: "70vh", border: "1px solid" }}>
+        <Grid
+          xs={12}
+          sx={{
+            height: "70vh",
+            border: "1px solid var(--ifm-hr-background-color)",
+          }}
+        >
           <Allotment minSize={100} vertical>
             <Allotment.Pane preferredSize={60} maxSize={200} minSize={60}>
               <QueryEditor
                 defaultQuery={defaultQuery}
                 theme={initTheme}
-                onChange={onQueryChange}
                 beforeMount={handleEditorWillMount}
+                onMount={handleEditorDidMount}
+                onChange={onQueryChange}
               />
             </Allotment.Pane>
             <Allotment.Pane>
@@ -218,6 +234,7 @@ export default function Playground() {
               alignItems: "center",
               fontSize: "14px",
               textAlign: "center",
+              marginTop: "3px",
             }}
           >
             <p>

docs/src/components/JSONPathPlayground/styles.module.css

@@ -12,5 +12,4 @@
 
 .headingRule {
   margin-top: 1em;
-  margin-bottom: 2em;
 }