fix code snippets

components/components.tsx

@@ -60,7 +60,9 @@ export const components = {
   pre: props => (
     <div>
       <Show when={props.filename?.length > 5}>
-        <div {...props} class="px-3 py-1 w-full text-xs bg-blueGray-500 rounded-t">
+        <div
+          class={`px-3 py-1 w-full text-xs bg-slate-500 rounded-t text-slate-100 ${props.className}`}
+        >
           {props.filename}
         </div>
       </Show>

components/index.css

@@ -54,7 +54,6 @@ html {
 
 pre {
   min-width: 100%;
-  background: transparent;
 }
 
 .prose pre {
@@ -315,7 +314,7 @@ pre {
   display: none;
 }
 
-.github-dark {
+.github-light {
   display: none;
 }
 

docs/core-concepts/api-routes.md

@@ -158,7 +158,7 @@ You can read more about using HTTP cookies in the [MDN documentation][cookies]
 
 ## Exposing a GraphQL API
 
-SolidStart makes it easy to implement a GraphQL API. You can use the `graphql` function from `solid-start/api` to create a GraphQL API route. The `graphql` function takes a GraphQL schema and returns a function that can be used as an API route handler.
+SolidStart makes it easy to implement a GraphQL API. The `graphql` function takes a GraphQL schema and returns a function that can be used as an API route handler. TODO: Implementation
 
 ```tsx twoslash filename="routes/api/graphql.ts"
 import { APIEvent } from "solid-start/api";

packages/mdx/index.js

@@ -191,7 +191,7 @@ export default async function () {
             disableImplicitReactImport: true,
             includeJSDocInHover: true,
             // theme: "css-variables",
-            themes: ["github-light", "github-dark"],
+            themes: ["github-dark", "github-light"],
             defaultCompilerOptions: {
               allowSyntheticDefaultImports: true,
               esModuleInterop: true,

tailwind.config.cjs

@@ -71,7 +71,7 @@ module.exports = {
             "--tw-prose-headings": theme("colors.solid.default"),
             "--tw-prose-invert-headings": theme("colors.solid.darkdefault"),
             "--tw-prose-invert-quote-borders": theme("colors.solid.mediumgray"),
-            "--tw-prose-pre-bg": "transparent",
+            // "--tw-prose-pre-bg": "transparent",
             color: "var(--tw-prose-body)",
             fontFamily: "Gordita",
             "blockquote p:first-of-type::before": { content: "none" },