Dark mode with custom styles

.gitignore

@@ -0,0 +1 @@
+node_modules

cookbooks/ai-builders.mdx

@@ -28,7 +28,7 @@ Create the Pro plan in the [Products](https://app.useautumn.com/products) tab.
 
   <Accordion title="Create the Product">
     Click on the "+ Product" button and name the product "Pro".
-    <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+    <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
       <img
         src="/assets/quickstart/create-pro.png"
 
@@ -39,7 +39,7 @@ Create the Pro plan in the [Products](https://app.useautumn.com/products) tab.
   <Accordion title="Create the Messages Feature">
   Click the "+ Feature" button, and in the feature list, select "Create new feature".
 
-  <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+  <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
   <img src="/assets/quickstart/messages.png" />
   </Frame>
   </Accordion>
@@ -48,7 +48,7 @@ Create the Pro plan in the [Products](https://app.useautumn.com/products) tab.
   Back on the products page, create a new product and name it "Pro". Click "+ Feature" and add a limit of 10 messages per month.
 
   Then click "+ Price" and a price of $20 per month.
-  <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+  <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
   <img src="/assets/quickstart/messages-item.png" className="" />
   <img src="/assets/quickstart/price.png" className="" />
   </Frame>

docs.json

@@ -8,8 +8,8 @@
     "dark": "#7C3EFF"
   },
   "appearance": {
-    "default": "light",
-    "strict": true
+    "default": "system",
+    "strict": false
   },
   "favicon": "/favicon.png",
   "navigation": {

quickstart/quickstart.mdx

@@ -16,7 +16,7 @@ Create the Pro plan in the [Products](https://app.useautumn.com/products) tab.
 
   <Accordion title="Create the Product">
     Click on the "+ Product" button and name the product "Pro".
-    <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+    <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
       <img
         src="/assets/quickstart/create-pro.png"
 
@@ -27,7 +27,7 @@ Create the Pro plan in the [Products](https://app.useautumn.com/products) tab.
   <Accordion title="Create the Messages Feature">
   Click the "+ Feature" button, and in the feature list, select "Create new feature".
 
-  <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+  <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
   <img src="/assets/quickstart/messages.png" />
   </Frame>
   </Accordion>
@@ -36,7 +36,7 @@ Create the Pro plan in the [Products](https://app.useautumn.com/products) tab.
   Back on the products page, create a new product and name it "Pro". Click "+ Feature" and add a limit of 10 messages per month.
 
   Then click "+ Price" and a price of $20 per month.
-  <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+  <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
   <img src="/assets/quickstart/messages-item.png" className="" />
   <img src="/assets/quickstart/price.png" className="" />
   </Frame>
@@ -95,7 +95,7 @@ import { autumnHandler } from "autumn-js/next";
 import { auth } from "@/lib/auth";
 
 export const { GET, POST } = autumnHandler({
-  identify: async (request) => {
+  identify: async request => {
     const session = await auth.api.getSession({
       headers: request.headers,
     });
@@ -118,7 +118,7 @@ import { autumnHandler } from "autumn-js/react-router";
 import { auth } from "../lib/auth.server";
 
 export const { loader, action } = autumnHandler({
-  identify: async (args) => {
+  identify: async args => {
     const session = await auth.api.getSession({
       headers: args.request.headers,
     });
@@ -202,7 +202,7 @@ app.use(express.json()); // need to parse request body before autumnHandler
 app.use(
   "/api/autumn",
   autumnHandler({
-    identify: async (req) => {
+    identify: async req => {
       const session = await auth.api.getSession({
         headers: fromNodeHeaders(req.headers),
       });
@@ -228,7 +228,7 @@ fastify.route({
   method: ["GET", "POST"],
   url: "/api/autumn/*",
   handler: autumnHandler({
-    identify: async (request) => {
+    identify: async request => {
       const session = await auth.api.getSession({
         headers: request.headers as any,
       });

quickstart/typescript.mdx

@@ -17,7 +17,7 @@ Create a product in the [Products](https://app.useautumn.com/products) tab.
   <Step>
   <Accordion title="Create the Product">
     Click on the "+ Product" button and name the product "Pro".
-    <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+    <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
       <img
         src="/assets/quickstart/create-pro.png"
 
@@ -30,7 +30,7 @@ Create a product in the [Products](https://app.useautumn.com/products) tab.
   <Accordion title="Create the Messages Feature">
   Click the "+ Feature" button, and in the feature list, select "Create new feature".
 
-  <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+  <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
   <img src="/assets/quickstart/messages.png" />
   </Frame>
   </Accordion>
@@ -40,7 +40,7 @@ Create a product in the [Products](https://app.useautumn.com/products) tab.
   Back on the products page, create a new product and name it "Pro". Click "+ Feature" and add a limit of 10 messages per month.
 
   Then click "+ Price" and a price of $20 per month.
-  <Frame className="bg-transparent items-center gap-4 bg-[#fafafa]">
+  <Frame className="bg-transparent items-center gap-4 bg-gray-50 dark:bg-gray-800">
   <img src="/assets/quickstart/messages-item.png" className="" />
   <img src="/assets/quickstart/price.png" className="" />
   </Frame>

style.css

@@ -58,12 +58,14 @@ code {
   max-width: 300px;
 }
 
+/* Light mode styles */
 #content-side-layout:not(:has(pre)) {
   border-left: 1px solid #e6e6e8;
+}
 
-  /* padding-top: 3rem !important;
-  height: 100vh;
-  top: 0rem; */
+/* Dark mode styles - Palm theme colors */
+.dark #content-side-layout:not(:has(pre)) {
+  border-left: 1px solid #272727;
 }
 
 #content-side-layout {
@@ -75,6 +77,10 @@ code {
   top: 4rem;
 }
 
+.dark #content-side-layout {
+  background-color: #181818;
+}
+
 /* 
 #header {
   margin-top: 3rem;
@@ -96,6 +102,13 @@ h2:not(a h2) {
   word-wrap: normal;
 }
 
+.dark h2:not(a h2) {
+  background-color: #181818;
+  border-bottom: 1px solid #272727;
+  border-top: 1px solid #272727;
+  color: #e6e6e8 !important;
+}
+
 h2 > span {
   padding-right: 1rem;
 }
@@ -114,3 +127,7 @@ h2 > span {
   z-index: 10;
   flex-shrink: 0;
 }
+
+.dark #sidebar-content {
+  background-color: #181818;
+}