docs: fix playground style when dark

Author: renovate[bot]

docs/.vitepress/components/Playground/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import './style.css'
 import 'splitpanes/dist/splitpanes.css'
 import { Pane, Splitpanes } from 'splitpanes'
 </script>
@@ -17,7 +16,6 @@ import { Pane, Splitpanes } from 'splitpanes'
         <Pane
           :min-size="12"
           :max-size="24"
-          :size="18"
         >
           <ActionContainer />
         </Pane>

docs/.vitepress/components/Playground/style.css

@@ -16,6 +16,21 @@
   --at-apply: "hidden";
 }
 
+/* Overrides splitpane default theme */
+.page-playground .splitpanes.default-theme .splitpanes__pane {
+  background-color: transparent;
+}
+.page-playground .splitpanes.default-theme .splitpanes__splitter {
+  background-color: var(--vp-c-gutter);
+}
+
+.v-codemirror {
+  --at-apply: "h-full block!";
+}
+.v-codemirror .cm-editor {
+  --at-apply: "h-full";
+}
+
 /* set height for playground core */
 @media screen and (min-width: 960px) {
   .page-playground .page-playground-core {