version 1.13.5 : add theme schema

2025-05-31 02:11:57 +07:00
parent bcafa9b5d9
commit d967120677
24 changed files with 788 additions and 165 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -25,7 +25,7 @@ export default function Home() {
            )}
          >
            <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 New Version - Release v1.13.0</span>
+              <span>🚀 New Version - Release v1.13.5</span>
              <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
            </AnimatedShinyText>
          </div>
--- a/components/context-popover.tsx
+++ b/components/context-popover.tsx
@@ -68,7 +68,7 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
        >
          <div className="flex items-center gap-2">
            {activeRoute?.context?.icon && (
-              <span className="text-primary bg-primary/10 border border-primary rounded p-0.5">
+              <span className="text-primary bg-primary/10 border border-primary dark:border dark:border-accent dark:bg-accent/10 dark:text-accent rounded p-0.5">
                {getIcon(activeRoute.context.icon)}
              </span>
            )}
@@ -98,14 +98,14 @@ export default function ContextPopover({ className }: ContextPopoverProps) {
                  "relative flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm",
                  "text-left outline-none transition-colors",
                  isActive
-                    ? "bg-primary/20 text-primary"
-                    : "text-foreground/80 hover:bg-primary/20"
+                    ? "bg-primary/20 text-primary dark:bg-accent/20 dark:text-accent"
+                    : "text-foreground/80 hover:bg-primary/20 dark:text-foreground/60 dark:hover:bg-accent/20"
                )}
              >
                {route.context?.icon && (
                  <span className={cn(
                    "flex h-4 w-4 items-center justify-center",
-                    isActive ? "text-primary" : "text-foreground/60"
+                    isActive ? "text-primary dark:text-accent" : "text-foreground/60"
                  )}>
                    {getIcon(route.context.icon)}
                  </span>
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -63,8 +63,9 @@ export function FooterButtons() {
            target="_blank"
            rel="noopener noreferrer"
            aria-label={item.name}
+            className="text-muted-foreground hover:text-foreground transition-colors"
          >
-            <IconComponent className="w-4 h-4 text-gray-800 transition-colors dark:text-gray-400 hover:text-primary" />
+            <IconComponent className="w-4 h-4" />
          </Link>
        );
      })}
@@ -79,7 +80,8 @@ export function MadeWith() {
      <span className="text-primary">
        <Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 text-muted-foreground">
            DocuBook
-        </Link></span>
+        </Link>
+        </span>
    </>
  );
 }
--- a/components/markdown/CardGroupMdx.tsx
+++ b/components/markdown/CardGroupMdx.tsx
@@ -13,7 +13,7 @@ const CardGroup: React.FC<CardGroupProps> = ({ children, cols = 2, className })
  return (
    <div
      className={clsx(
-        "grid gap-4",
+        "grid gap-4 text-foreground",
        `grid-cols-1 sm:grid-cols-${cols}`,
        className
      )}
--- a/components/markdown/CardMdx.tsx
+++ b/components/markdown/CardMdx.tsx
@@ -20,8 +20,9 @@ const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, cl
  const content = (
    <div
      className={clsx(
-        "border rounded-lg shadow-sm p-4 transition-all duration-200 bg-white dark:bg-gray-900",
-        "hover:bg-gray-50 dark:hover:bg-gray-800",
+        "border rounded-lg shadow-sm p-4 transition-all duration-200",
+        "bg-card text-card-foreground border-border",
+        "hover:bg-accent/5 hover:border-accent/30",
        "flex gap-2",
        horizontal ? "flex-row items-center gap-1" : "flex-col space-y-1",
        className
@@ -29,8 +30,8 @@ const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, cl
    >
      {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
      <div className="flex-1 min-w-0 my-auto h-full">
-        <span className="text-base font-semibold">{title}</span>
-        <div className="text-sm text-gray-600 dark:text-gray-400 -mt-3">{children}</div>
+        <span className="text-base font-semibold text-foreground">{title}</span>
+        <div className="text-sm text-muted-foreground -mt-3">{children}</div>
      </div>
    </div>
  );
--- a/components/markdown/FileTreeMdx.tsx
+++ b/components/markdown/FileTreeMdx.tsx
@@ -1,12 +1,7 @@
 'use client';

 import React, { useState, ReactNode, Children, isValidElement, cloneElement } from 'react';
-import { ChevronRight, ChevronDown, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';
-
-interface FileTreeProps {
-  children: ReactNode;
-  defaultOpen?: boolean;
-}
+import { ChevronRight, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';

 interface FileProps {
  name: string;
@@ -15,24 +10,27 @@ interface FileProps {

 const FileComponent = ({ name }: FileProps) => {
  const [isHovered, setIsHovered] = useState(false);
+  const fileExtension = name.split('.').pop()?.toUpperCase();

  return (
    <div
      className={`
-        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm
-        transition-all duration-200 ease-in-out rounded-md
-        ${isHovered
-          ? 'bg-blue-50 dark:bg-blue-900/30'
-          : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}
+        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md
+        transition-colors duration-150 cursor-default select-none
+        ${isHovered ? 'bg-accent/10' : 'hover:bg-muted/50'}
      `}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
+      tabIndex={-1}
    >
-      <FileIcon className={`h-3.5 w-3.5 transition-colors ${isHovered ? 'text-blue-500' : 'text-gray-400 dark:text-gray-500'}`} />
-      <span className="font-mono text-sm text-gray-700 dark:text-gray-300">{name}</span>
-      {isHovered && (
-        <span className="ml-auto text-xs text-gray-400 dark:text-gray-500">
-          {name.split('.').pop()?.toUpperCase()}
+      <FileIcon className={`
+        h-3.5 w-3.5 flex-shrink-0 transition-colors
+        ${isHovered ? 'text-accent' : 'text-muted-foreground'}
+      `} />
+      <span className="font-mono text-sm text-foreground truncate">{name}</span>
+      {isHovered && fileExtension && (
+        <span className="ml-auto text-xs text-muted-foreground/80">
+          {fileExtension}
        </span>
      )}
    </div>
@@ -48,31 +46,49 @@ const FolderComponent = ({ name, children }: FileProps) => {
    <div className="relative">
      <div
        className={`
-          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md cursor-pointer
-          transition-all duration-200 ease-in-out
-          ${isHovered ? 'bg-gray-50 dark:bg-gray-800/50' : ''}
-          ${isOpen ? 'text-blue-600 dark:text-blue-400' : 'text-gray-800 dark:text-gray-200'}
+          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md
+          transition-colors duration-150 select-none
+          ${isHovered ? 'bg-muted/60' : ''}
+          ${isOpen ? 'text-foreground' : 'text-foreground/80'}
+          ${hasChildren ? 'cursor-pointer' : 'cursor-default'}
        `}
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => hasChildren && setIsOpen(!isOpen)}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
+        tabIndex={-1}
+        onKeyDown={(e) => e.preventDefault()}
      >
        {hasChildren ? (
          <ChevronRight
-            className={`h-3.5 w-3.5 transition-transform duration-200 ${isOpen ? 'transform rotate-90' : ''}`}
+            className={`
+              h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200
+              ${isOpen ? 'rotate-90' : ''}
+              ${isHovered ? 'text-foreground/70' : 'text-muted-foreground'}
+            `}
          />
        ) : (
          <div className="w-3.5" />
        )}
        {isOpen ? (
-          <FolderOpen className="h-4 w-4 text-blue-500 dark:text-blue-400" />
+          <FolderOpen className={`
+            h-4 w-4 flex-shrink-0 transition-colors
+            ${isHovered ? 'text-accent' : 'text-muted-foreground'}
+          `} />
        ) : (
-          <FolderIcon className="h-4 w-4 text-blue-400 dark:text-blue-500" />
+          <FolderIcon className={`
+            h-4 w-4 flex-shrink-0 transition-colors
+            ${isHovered ? 'text-accent/80' : 'text-muted-foreground/80'}
+          `} />
        )}
-        <span className="font-medium">{name}</span>
+        <span className={`
+          font-medium transition-colors duration-150
+          ${isHovered ? 'text-accent' : ''}
+        `}>
+          {name}
+        </span>
      </div>
      {isOpen && hasChildren && (
-        <div className="ml-5 border-l-2 border-gray-100 dark:border-gray-700/50 pl-2">
+        <div className="ml-5 border-l-2 border-muted/50 pl-2">
          {children}
        </div>
      )}
@@ -82,13 +98,16 @@ const FolderComponent = ({ name, children }: FileProps) => {

 export const Files = ({ children }: { children: ReactNode }) => {
  return (
-    <div className="
-      rounded-xl border border-gray-100 dark:border-gray-700/50
-      bg-white/50 dark:bg-gray-800/30 backdrop-blur-sm
+    <div
+      className="
+        rounded-xl border border-muted/50
+        bg-card/50 backdrop-blur-sm
        shadow-sm overflow-hidden
        transition-all duration-200
-      hover:shadow-md hover:border-gray-200 dark:hover:border-gray-600/50
-    ">
+        hover:shadow-md hover:border-muted/60
+      "
+      onKeyDown={(e) => e.preventDefault()}
+    >
      <div className="p-2">
        {Children.map(children, (child, index) => {
          if (isValidElement(child)) {
--- a/components/markdown/KeyboardMdx.tsx
+++ b/components/markdown/KeyboardMdx.tsx
@@ -88,7 +88,7 @@ const KbdComponent: React.FC<KbdProps> = ({

  return (
    <kbd
-      className="inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-gray-800 bg-gray-100 border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+      className="inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-foreground bg-secondary/70 border rounded-md"
      {...props}
    >
      {renderContent()}
--- a/components/markdown/NoteMdx.tsx
+++ b/components/markdown/NoteMdx.tsx
@@ -29,7 +29,7 @@ export default function Note({
    "dark:bg-stone-950/25 bg-stone-50": type === "note",
    "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
      type === "danger",
-    "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
+    "bg-orange-50 border-orange-200 dark:border-orange-900 dark:bg-orange-900/50":
      type === "warning",
    "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
      type === "success",
--- a/components/markdown/StepperMdx.tsx
+++ b/components/markdown/StepperMdx.tsx
@@ -11,13 +11,13 @@ export function Stepper({ children }: PropsWithChildren) {
        return (
          <div
            className={cn(
-              "border-l pl-9 ml-3 relative",
+              "border-l border-muted pl-9 ml-3 relative",
              clsx({
                "pb-5 ": index < length - 1,
              })
            )}
          >
-            <div className="bg-muted w-8 h-8 text-xs font-medium rounded-md border flex items-center justify-center absolute -left-4 font-code">
+            <div className="bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code">
              {index + 1}
            </div>
            {child}
--- a/components/markdown/TooltipsMdx.tsx
+++ b/components/markdown/TooltipsMdx.tsx
@@ -11,14 +11,17 @@ const Tooltip: React.FC<TooltipProps> = ({ text, tip }) => {

  return (
    <span
-      className="relative inline-block cursor-pointer underline decoration-dotted text-blue-500"
+      className="relative inline-flex items-center cursor-help text-primary hover:text-primary/80 transition-colors"
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
+      <span className="border-b border-dashed border-primary/60 pb-0.5">
        {text}
+      </span>
      {visible && (
-        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-background text-foreground text-sm p-2 rounded shadow-md break-words text-center outline outline-1 outline-offset-2">
+        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 break-words text-left z-50">
          {tip}
+          <span className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10" />
        </span>
      )}
    </span>
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -63,15 +63,15 @@ export function NavMenu({ isSheet = false }) {
        const Comp = (
          <Anchor
            key={`${item.title}-${item.href}`}
-            activeClassName="!text-primary md:font-semibold font-medium"
+            activeClassName="text-primary dark:text-accent md:font-semibold font-medium"
            absolute
-            className="flex items-center gap-1 dark:text-stone-300/85 text-stone-800"
+            className="flex items-center gap-1 text-foreground/80 hover:text-foreground transition-colors"
            href={item.href}
            target={isExternal ? "_blank" : undefined}
            rel={isExternal ? "noopener noreferrer" : undefined}
          >
            {item.title}
-            {isExternal && <ArrowUpRight className="w-4 h-4 text-muted-foreground" />}
+            {isExternal && <ArrowUpRight className="w-4 h-4 text-foreground/80" />}
          </Anchor>
        );
        return isSheet ? (
--- a/components/sublink.tsx
+++ b/components/sublink.tsx
@@ -54,9 +54,10 @@ export default function SubLink({
  // Only apply active styles if it's an exact match and not a parent with active children
  const Comp = useMemo(() => (
    <Anchor
-      activeClassName={!hasActiveChild ? "text-primary font-medium" : ""}
+      activeClassName={!hasActiveChild ? "dark:text-accent text-primary font-medium" : ""}
      href={fullHref}
      className={cn(
+        "text-foreground/80 hover:text-foreground transition-colors",
        hasActiveChild && "font-medium text-foreground"
      )}
    >
@@ -72,8 +73,8 @@ export default function SubLink({
    )
  ) : (
    <h4 className={cn(
-      "font-medium sm:text-sm",
-      hasActiveChild ? "text-foreground" : "text-primary"
+      "font-medium sm:text-sm text-foreground/90 hover:text-foreground transition-colors",
+      hasActiveChild ? "text-foreground" : "text-foreground/80"
    )}>
      {title}
    </h4>
@@ -93,7 +94,7 @@ export default function SubLink({
        >
          <div className="flex items-center justify-between w-full">
            {titleOrLink}
-            <span className="ml-2">
+            <span className="ml-2 text-muted-foreground">
              {!isOpen ? (
                <ChevronRight className="h-[0.9rem] w-[0.9rem]" aria-hidden="true" />
              ) : (
@@ -111,8 +112,8 @@ export default function SubLink({
        >
          <div
            className={cn(
-              "flex flex-col items-start sm:text-sm dark:text-stone-300/85 text-stone-800 ml-0.5 mt-2.5 gap-3",
-              level > 0 && "pl-4 border-l ml-1.5"
+              "flex flex-col items-start sm:text-sm text-foreground/80 ml-0.5 mt-2.5 gap-3 hover:[&_a]:text-foreground transition-colors",
+              level > 0 && "pl-4 border-l border-border ml-1.5"
            )}
          >
            {items?.map((innerLink) => (
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -28,7 +28,7 @@ export function ModeToggle() {
          setSelectedTheme(value);
        }
      }}
-      className="flex items-center gap-1 rounded-full border border-gray-300 dark:border-gray-700 p-1 transition-all"
+      className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1 transition-all"
    >
      <ToggleGroupItem
        value="light"
@@ -36,11 +36,11 @@ export function ModeToggle() {
        aria-label="Light Mode"
        className={`rounded-full p-1 transition-all ${
          selectedTheme === "light"
-            ? "bg-blue-500 text-white"
-            : "bg-transparent"
+            ? "bg-primary text-primary-foreground"
+            : "bg-transparent hover:bg-muted/50"
        }`}
      >
-        <Sun className={`h-4 w-4 ${selectedTheme === "light" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+        <Sun className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="system"
@@ -48,11 +48,11 @@ export function ModeToggle() {
        aria-label="System Mode"
        className={`rounded-full p-1 transition-all ${
          selectedTheme === "system"
-            ? "bg-blue-500 text-white"
-            : "bg-transparent"
+            ? "bg-primary text-primary-foreground"
+            : "bg-transparent hover:bg-muted/50"
        }`}
      >
-        <Monitor className={`h-4 w-4 ${selectedTheme === "system" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+        <Monitor className="h-4 w-4" />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="dark"
@@ -60,11 +60,11 @@ export function ModeToggle() {
        aria-label="Dark Mode"
        className={`rounded-full p-1 transition-all ${
          selectedTheme === "dark"
-            ? "bg-blue-500 text-white"
-            : "bg-transparent"
+            ? "bg-primary text-primary-foreground"
+            : "bg-transparent hover:bg-muted/50"
        }`}
      >
-        <Moon className={`h-4 w-4 ${selectedTheme === "dark" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+        <Moon className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  );
--- a/components/toc-observer.tsx
+++ b/components/toc-observer.tsx
@@ -149,7 +149,7 @@ export default function TocObserver({

  return (
    <div className="relative">
-      <div className="relative text-sm text-stone-600 dark:text-stone-400">
+      <div className="relative text-sm text-foreground/70 hover:text-foreground transition-colors">
        <div className="flex flex-col gap-0">
          {data.map(({ href, level, text }, index) => {
            const id = href.slice(1);
@@ -172,7 +172,7 @@ export default function TocObserver({
                    {/* Vertical line */}
                    <div className={clsx(
                      "absolute left-0 top-0 h-full w-px",
-                      isActive ? "bg-primary/20" : "bg-stone-300 dark:bg-stone-600"
+                      isActive ? "bg-primary/20 dark:bg-primary/30" : "bg-border/50 dark:bg-border/50"
                    )}>
                      {isActive && (
                        <motion.div
@@ -187,11 +187,11 @@ export default function TocObserver({
                    {/* Horizontal line */}
                    <div className={clsx(
                      "absolute left-0 top-1/2 h-px w-6",
-                      isActive ? "bg-primary/20" : "bg-stone-300 dark:bg-stone-600"
+                      isActive ? "bg-primary/20 dark:bg-primary/30" : "bg-border/50 dark:bg-border/50"
                    )}>
                      {isActive && (
                        <motion.div
-                          className="absolute left-0 top-0 h-full w-full bg-primary origin-left"
+                          className="absolute left-0 top-0 h-full w-full bg-primary dark:bg-accent origin-left"
                          initial={{ scaleX: 0 }}
                          animate={{ scaleX: scrollProgress }}
                          transition={{ duration: 0.3, delay: 0.1 }}
@@ -207,8 +207,8 @@ export default function TocObserver({
                  className={clsx(
                    "relative flex items-center py-2 transition-colors",
                    {
-                      "text-primary dark:text-primary-400 font-medium": isActive,
-                      "text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-200": !isActive,
+                      "text-primary dark:text-primary font-medium": isActive,
+                      "text-muted-foreground hover:text-foreground dark:hover:text-foreground/90": !isActive,
                    }
                  )}
                  style={{
@@ -229,13 +229,13 @@ export default function TocObserver({
                    <div className={clsx(
                      "w-1.5 h-1.5 rounded-full transition-all duration-300 relative z-10",
                      {
-                        "bg-primary scale-100": isActive,
-                        "bg-stone-300 dark:bg-stone-600 scale-75 group-hover:scale-100 group-hover:bg-primary/50": !isActive,
+                        "bg-primary scale-100 dark:bg-primary/90": isActive,
+                        "bg-muted-foreground/30 dark:bg-muted-foreground/30 scale-75 group-hover:scale-100 group-hover:bg-primary/50 dark:group-hover:bg-primary/50": !isActive,
                      }
                    )}>
                      {isActive && (
                        <motion.div
-                          className="absolute inset-0 rounded-full bg-primary/20"
+                          className="absolute inset-0 rounded-full bg-primary/20 dark:bg-primary/30"
                          initial={{ scale: 1 }}
                          animate={{ scale: 1.8 }}
                          transition={{
--- a/contents/docs/changelog/version-1/index.mdx
+++ b/contents/docs/changelog/version-1/index.mdx
@@ -1,12 +1,35 @@
 ---
-title: Changelog
+title: Release Version 1.0+
 description: List of latest changes and updates on DocuBook
 date: 24-05-2025
 ---

-## Version History
+<Note type="note" title="Version History">
+  This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
+</Note>

-> This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
+<div className="sr-only">
+### v 1.13.5
+</div>
+
+<Release version="1.13.5" date="2025-05-31" title="Add Theme schema for consistent theme">
+  <Changes type="added">
+    - Add Theme schema
+    - Add Freshlime theme
+    - Add Coffee theme
+    - Add llms context for generated theme with AI
+  </Changes>
+  <Changes type="improved">
+    - Markdown support for theme-colors
+    - consistent theme-colors page
+    - all components now consistent with theme-colors
+    - syntax with theme-colors
+  </Changes>
+  <Changes type="fixed">
+    - fix bug FileTree component
+    - fix issue markdown with theme-colors
+  </Changes>
+</Release>

 <div className="sr-only">
 ### v 1.13.0
--- a/contents/docs/getting-started/theme-colors/coffee/index.mdx
+++ b/contents/docs/getting-started/theme-colors/coffee/index.mdx
@@ -0,0 +1,167 @@
+---
+title: Coffee
+description: A warm, minimalistic design inspired by early computing. This theme is a replica of the "Coffee" theme from the `shiki-twoslash` package.
+date: 2025-05-30
+---
+
+## Styles
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+/* Rich Coffee Theme */
+@layer base {
+    :root {
+        --background: 35 40% 96%;
+        --foreground: 25 25% 10%;
+        --card: 0 0% 100%;
+        --card-foreground: 25 25% 10%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 25 25% 10%;
+        --primary: 25 60% 40%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 35 30% 90%;
+        --secondary-foreground: 25 25% 10%;
+        --muted: 35 20% 94%;
+        --muted-foreground: 25 15% 35%;
+        --accent: 30 50% 38%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 5 85% 45%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 30 15% 85%;
+        --input: 30 15% 88%;
+        --ring: 25 60% 40%;
+        --radius: 0.5rem;
+        --chart-1: 25 60% 45%;
+        --chart-2: 30 55% 45%;
+        --chart-3: 35 50% 42%;
+        --chart-4: 20 45% 38%;
+        --chart-5: 40 45% 40%;
+        --line-number-color: rgba(0, 0, 0, 0.08);
+    }
+
+    .dark {
+        --background: 30 10% 6%;
+        --foreground: 35 20% 94%;
+        --card: 30 10% 8%;
+        --card-foreground: 35 20% 94%;
+        --popover: 30 10% 8%;
+        --popover-foreground: 35 20% 94%;
+        --primary: 30 45% 52%;
+        --primary-foreground: 30 10% 6%;
+        --secondary: 30 12% 14%;
+        --secondary-foreground: 35 20% 94%;
+        --muted: 30 10% 16%;
+        --muted-foreground: 30 15% 60%;
+        --accent: 28 40% 48%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 5 80% 55%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 30 10% 20%;
+        --input: 30 10% 20%;
+        --ring: 30 45% 52%;
+        --chart-1: 30 45% 52%;
+        --chart-2: 28 40% 50%;
+        --chart-3: 32 45% 50%;
+        --chart-4: 25 35% 46%;
+        --chart-5: 35 40% 48%;
+        --line-number-color: rgba(255, 255, 255, 0.12);
+    }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Rich Coffee Theme - Syntax Highlighting */
+
+/* Light Mode */
+.keyword {
+  color: hsl(25 60% 35%); /* Rich coffee brown */
+}
+
+.function {
+  color: hsl(30 55% 38%); /* Warm coffee brown */
+}
+
+.punctuation {
+  color: hsl(30 15% 55%); /* Muted brown */
+}
+
+.comment {
+  color: hsl(25 15% 45%); /* Muted brown */
+  font-style: italic;
+  opacity: 0.9;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: hsl(32 50% 40%); /* Warm brown with hint of orange */
+}
+
+.tag {
+  color: hsl(25 65% 30%); /* Dark rich coffee */
+}
+
+.attr-name {
+  color: hsl(28 55% 38%); /* Warm brown */
+}
+
+.attr-value {
+  color: hsl(35 55% 35%); /* Slightly orange brown */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: hsl(30 50% 65%); /* Light warm brown */
+}
+
+.dark .function {
+  color: hsl(28 55% 68%); /* Light warm brown */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: hsl(35 50% 72%); /* Light warm brown with hint of orange */
+}
+
+.dark .tag {
+  color: hsl(30 50% 75%); /* Light warm brown */
+}
+
+.dark .attr-name {
+  color: hsl(28 45% 70%); /* Light warm brown */
+}
+
+.dark .attr-value {
+  color: hsl(35 50% 70%); /* Light warm brown with hint of orange */
+}
+
+.dark .comment {
+  color: hsl(30 15% 65%); /* Light brown-gray */
+  opacity: 0.8;
+}
+
+.dark .punctuation {
+  color: hsl(30 15% 70%); /* Light brown-gray */
+  opacity: 0.9;
+}
+```
+</TabsContent>
+</Tabs>
--- a/contents/docs/getting-started/theme-colors/default/index.mdx
+++ b/contents/docs/getting-started/theme-colors/default/index.mdx
@@ -0,0 +1,163 @@
+---
+title: Default Theme
+description: This page explains the Modern Blue theme colors used in DocuBook, which is a default theme provided by DocuBook.
+date: 2025-05-20
+---
+
+## Styles
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+    /* Modern Blue Theme */
+@layer base {
+    :root {
+        --background: 210 40% 98%;
+        --foreground: 220 30% 15%;
+        --card: 0 0% 100%;
+        --card-foreground: 220 30% 15%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 220 30% 15%;
+        --primary: 210 81% 56%; /* #2281E3 */
+        --primary-foreground: 0 0% 100%;
+        --secondary: 210 30% 90%;
+        --secondary-foreground: 220 30% 15%;
+        --muted: 210 20% 92%;
+        --muted-foreground: 220 15% 50%;
+        --accent: 200 100% 40%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 60%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 210 20% 85%;
+        --input: 210 20% 85%;
+        --ring: 210 81% 56%;
+        --radius: 0.5rem;
+        --chart-1: 210 81% 56%;
+        --chart-2: 200 100% 40%;
+        --chart-3: 220 76% 60%;
+        --chart-4: 190 90% 50%;
+        --chart-5: 230 86% 45%;
+        --line-number-color: rgba(0, 0, 0, 0.05);
+        }
+
+    .dark {
+        --background: 220 25% 10%;
+        --foreground: 210 30% 96%;
+        --card: 220 25% 15%;
+        --card-foreground: 210 30% 96%;
+        --popover: 220 25% 15%;
+        --popover-foreground: 210 30% 96%;
+        --primary: 210 100% 65%;
+        --primary-foreground: 220 25% 10%;
+        --secondary: 215 25% 20%;
+        --secondary-foreground: 210 30% 96%;
+        --muted: 215 20% 25%;
+        --muted-foreground: 215 20% 65%;
+        --accent: 200 100% 60%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 70%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 215 20% 25%;
+        --input: 215 20% 25%;
+        --ring: 210 100% 65%;
+        --chart-1: 210 100% 65%;
+        --chart-2: 200 100% 60%;
+        --chart-3: 220 90% 70%;
+        --chart-4: 190 100% 65%;
+        --chart-5: 230 90% 60%;
+        --line-number-color: rgba(255, 255, 255, 0.1);
+        }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Modern Blue Theme */
+/* Light Mode */
+.keyword {
+  color: #1d4ed8; /* Darker blue for better contrast */
+}
+
+.function {
+  color: #0369a1; /* Deep blue */
+}
+
+.punctuation {
+  color: #4b5563; /* Slate gray */
+}
+
+.comment {
+  color: #6b7280; /* Muted gray */
+  font-style: italic;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: #0d9488; /* Teal for better distinction */
+}
+
+.tag {
+  color: #1d4ed8; /* Matching keyword color */
+}
+
+.attr-name {
+  color: #0284c7; /* Sky blue */
+}
+
+.attr-value {
+  color: #2563eb; /* Primary blue */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: #60a5fa; /* Soft blue */
+}
+
+.dark .function {
+  color: #38bdf8; /* Sky blue */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: #2dd4bf; /* Teal */
+}
+
+.dark .tag {
+  color: #60a5fa; /* Matching keyword color */
+}
+
+.dark .attr-name {
+  color: #7dd3fc; /* Lighter blue */
+}
+
+.dark .attr-value {
+  color: #3b82f6; /* Brighter blue */
+}
+
+.dark .comment {
+  color: #9ca3af; /* Lighter gray for dark mode */
+}
+
+.dark .punctuation {
+  color: #9ca3af; /* Lighter gray for dark mode */
+}
+```
+</TabsContent>
+</Tabs>
--- a/contents/docs/getting-started/theme-colors/freshlime/index.mdx
+++ b/contents/docs/getting-started/theme-colors/freshlime/index.mdx
@@ -0,0 +1,164 @@
+---
+title: Fresh Lime
+description: A fresh and vibrant freshlime-themed color scheme that's easy on the eyes while maintaining excellent readability.
+date: 2025-05-30
+---
+
+## Styles
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Note type="note" title="note">
+  You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+</Note>
+
+<Tabs defaultValue="globals" className="pt-5 pb-1">
+  <TabsList>
+    <TabsTrigger value="globals">globals.css</TabsTrigger>
+    <TabsTrigger value="syntax">syntax.css</TabsTrigger>
+  </TabsList>
+  <TabsContent value="globals">
+    ```css:globals.css
+    /* Fresh Lime Theme */
+@layer base {
+    :root {
+        --background: 85 45% 98%;
+        --foreground: 85 30% 10%;
+        --card: 0 0% 100%;
+        --card-foreground: 85 30% 10%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 85 30% 10%;
+        --primary: 85 70% 45%;
+        --primary-foreground: 0 0% 100%;
+        --secondary: 85 40% 90%;
+        --secondary-foreground: 85 30% 10%;
+        --muted: 85 30% 92%;
+        --muted-foreground: 85 15% 45%;
+        --accent: 85 60% 40%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 60%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 85 25% 88%;
+        --input: 85 25% 88%;
+        --ring: 85 70% 45%;
+        --radius: 0.5rem;
+        --chart-1: 85 70% 45%;
+        --chart-2: 85 60% 40%;
+        --chart-3: 85 80% 40%;
+        --chart-4: 85 85% 35%;
+        --chart-5: 85 90% 30%;
+        --line-number-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .dark {
+        --background: 85 20% 8%;
+        --foreground: 85 30% 96%;
+        --card: 85 20% 10%;
+        --card-foreground: 85 30% 96%;
+        --popover: 85 20% 10%;
+        --popover-foreground: 85 30% 96%;
+        --primary: 85 75% 55%;
+        --primary-foreground: 85 20% 8%;
+        --secondary: 85 25% 18%;
+        --secondary-foreground: 85 30% 96%;
+        --muted: 85 20% 20%;
+        --muted-foreground: 85 20% 70%;
+        --accent: 85 70% 50%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 65%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 85 25% 22%;
+        --input: 85 25% 22%;
+        --ring: 85 75% 55%;
+        --chart-1: 85 75% 55%;
+        --chart-2: 85 70% 50%;
+        --chart-3: 85 80% 45%;
+        --chart-4: 85 85% 40%;
+        --chart-5: 85 90% 35%;
+        --line-number-color: rgba(255, 255, 255, 0.1);
+    }
+}
+```
+</TabsContent>
+
+  <TabsContent value="syntax">
+    ```css:syntax.css
+/* Fresh Lime Theme - Syntax Highlighting */
+
+/* Light Mode */
+.keyword {
+  color: hsl(85 70% 30%); /* Dark lime green */
+}
+
+.function {
+  color: hsl(85 65% 35%); /* Slightly lighter lime */
+}
+
+.punctuation {
+  color: hsl(85 15% 50%); /* Muted green-gray */
+}
+
+.comment {
+  color: hsl(85 15% 50%); /* Muted green-gray */
+  font-style: italic;
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: hsl(85 50% 35%); /* Medium lime green */
+}
+
+.tag {
+  color: hsl(85 70% 25%); /* Darker lime */
+}
+
+.attr-name {
+  color: hsl(85 60% 35%); /* Lime green */
+}
+
+.attr-value {
+  color: hsl(85 70% 30%); /* Dark lime green */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: hsl(85 75% 65%); /* Bright lime */
+}
+
+.dark .function {
+  color: hsl(85 75% 60%); /* Slightly less bright lime */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: hsl(85 60% 70%); /* Light lime */
+}
+
+.dark .tag {
+  color: hsl(85 70% 70%); /* Bright lime */
+}
+
+.dark .attr-name {
+  color: hsl(85 65% 70%); /* Light lime */
+}
+
+.dark .attr-value {
+  color: hsl(85 75% 65%); /* Bright lime */
+}
+
+.dark .comment {
+  color: hsl(85 15% 60%); /* Light gray-green */
+}
+
+.dark .punctuation {
+  color: hsl(85 20% 70%); /* Light gray-green */
+}
+```
+</TabsContent>
+</Tabs>
--- a/contents/docs/getting-started/theme-colors/index.mdx
+++ b/contents/docs/getting-started/theme-colors/index.mdx
@@ -0,0 +1,9 @@
+---
+title : Theme Colors
+description : Color system used in DocuBook for styling UI elements
+date : 2025-05-20
+---
+
+DocuBook comes with a carefully designed color system that ensures consistency and accessibility across your documentation. The theme includes both light and dark modes, automatically adapting to the user's system preferences.
+
+<Outlet path="getting-started/theme-colors" />
--- a/contents/docs/getting-started/theme-colors/llms/index.mdx
+++ b/contents/docs/getting-started/theme-colors/llms/index.mdx
@@ -0,0 +1,66 @@
+---
+title: Llms.txt - Generate Custom Theme
+description: Complete guide for creating and using AI-generated custom themes based on LLMS context.
+date: 2025-05-31
+---
+
+## Introduction
+This document explains how to create and implement custom color themes using AI with LLMS context. The context includes a consistent color palette for both light and dark modes, along with syntax highlighting colors for code.
+
+## Generate New Theme
+
+<Stepper>
+  <StepperItem title="Step 1: Access LLM for Color Generation">
+    Ensure you have access to a language model (LLM) that supports color palette generation
+  </StepperItem>
+  <StepperItem title="Step 2: Prepare Color Context">
+    Share the content of the [llms.txt](/llms.txt) file with the AI to provide the current color scheme context.
+  </StepperItem>
+  <StepperItem title="Step 3: Define Color Requirements">
+    Determine your preferred color scheme or theme requirements
+  </StepperItem>
+  <StepperItem title="Step 4: Generate New Theme">
+    Use the following prompt to request a new theme from the AI:
+
+    ```markdown
+    Create a new color theme based on the provided context with the following requirements:
+    1. Different primary color `#2281E3` - changes to your brand color
+    2. Maintain good contrast for accessibility
+    3. Include variants for both light and dark modes
+    4. Keep the same structure as the provided context
+    ```
+  </StepperItem>
+</Stepper>
+
+## Implementation
+After receiving the new color palette:
+
+1. Copy the generated CSS code to your theme file
+2. Update CSS variables in `globals.css`
+3. Adjust syntax colors in `syntax.css` if needed
+4. Test the theme across different devices and display modes
+
+## Example Implementation
+```css
+:root {
+  --primary: 210 81% 56%;  /* Primary color */
+  --secondary: 210 30% 90%;  /* Secondary color */
+  /* ... and so on */
+}
+
+.dark {
+  --primary: 210 100% 65%;  /* Dark mode primary color */
+  /* ... and so on */
+}
+```
+
+## Tips and Recommendations
+- Always test color contrast to ensure accessibility
+- Maintain consistency with existing themes
+- Use tools like [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify contrast ratios
+- Keep backups of previous theme versions before making major changes
+
+## Troubleshooting
+- If colors don't change, ensure CSS variables are properly imported
+- Check CSS selector specificity if styles conflict
+- Verify dark/light mode toggling is working correctly
--- a/docu.json
+++ b/docu.json
@@ -71,7 +71,17 @@
        { "title": "Installation", "href": "/installation" },
        { "title": "Quick Start Guide", "href": "/quick-start-guide" },
        { "title": "Project Structure", "href": "/project-structure" },
-        { "title": "Customize", "href": "/customize" }
+        { "title": "Customize", "href": "/customize" },
+        {
+            "title": "Theme Colors",
+            "href": "/theme-colors",
+            "items": [
+                { "title": "Default", "href": "/default" },
+                { "title": "Fresh Lime", "href": "/freshlime" },
+                { "title": "Coffee", "href": "/coffee" },
+                { "title": "llms.txt", "href": "/llms" }
+            ]
+        }
      ]
    },
    {
@@ -103,7 +113,7 @@
      ]
    },
    {
-      "title": "Changelog",
+      "title": "Release",
      "href": "/changelog",
      "noLink": true,
      "context": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "docubook",
-  "version": "1.13.0",
+  "version": "1.13.5",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,63 +4,63 @@

@import url("../styles/syntax.css");

-/* ocean */
+/* Modern Blue Theme */
@layer base {
    :root {
-        --background: 210 60% 97%; /* Lighter sky blue */
-        --foreground: 220 30% 10%; /* Deep navy */
-        --card: 210 50% 99%; /* Almost white blue */
-        --card-foreground: 220 30% 10%;
-        --popover: 210 50% 99%;
-        --popover-foreground: 220 30% 10%;
-        --primary: 220 85% 55%; /* Vibrant azure blue */
-        --primary-foreground: 210 60% 97%;
-        --secondary: 220 40% 80%; /* Softer sky blue */
-        --secondary-foreground: 220 30% 10%;
-        --muted: 220 40% 80%;
-        --muted-foreground: 220 30% 30%; /* Deeper steel blue */
-        --accent: 200 75% 38%; /* Stronger ocean blue */
-        --accent-foreground: 0 0% 100%; /* Pure white */
-        --destructive: 0 70% 50%; /* More vivid red */
-        --destructive-foreground: 220 30% 95%; /* Lightened foreground */
-        --border: 220 20% 85%; /* Slightly darker grey-blue */
-        --input: 220 20% 85%;
-        --ring: 220 50% 50%; /* More noticeable blue ring */
+        --background: 210 40% 98%;
+        --foreground: 220 30% 15%;
+        --card: 0 0% 100%;
+        --card-foreground: 220 30% 15%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 220 30% 15%;
+        --primary: 210 81% 56%; /* #2281E3 */
+        --primary-foreground: 0 0% 100%;
+        --secondary: 210 30% 90%;
+        --secondary-foreground: 220 30% 15%;
+        --muted: 210 20% 92%;
+        --muted-foreground: 220 15% 50%;
+        --accent: 200 100% 40%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 60%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 210 20% 85%;
+        --input: 210 20% 85%;
+        --ring: 210 81% 56%;
        --radius: 0.5rem;
-        --chart-1: 210 65% 45%; /* Classic blue */
-        --chart-2: 220 45% 60%; /* Softer sky */
-        --chart-3: 220 75% 45%; /* Azure blue */
-        --chart-4: 200 65% 50%; /* Ocean blue */
-        --chart-5: 240 35% 35%; /* Deeper teal */
+        --chart-1: 210 81% 56%;
+        --chart-2: 200 100% 40%;
+        --chart-3: 220 76% 60%;
+        --chart-4: 190 90% 50%;
+        --chart-5: 230 86% 45%;
        --line-number-color: rgba(0, 0, 0, 0.05);
    }

    .dark {
-        --background: 220 20% 8%; /* Deeper midnight navy */
-        --foreground: 220 85% 92%; /* Brighter sky blue */
-        --card: 220 20% 10%; /* Slightly darker midnight */
-        --card-foreground: 220 85% 92%;
-        --popover: 220 20% 10%;
-        --popover-foreground: 220 85% 92%;
-        --primary: 210 75% 65%; /* Softer but bright blue */
-        --primary-foreground: 220 20% 8%;
-        --secondary: 220 35% 12%; /* Darker steel blue */
-        --secondary-foreground: 220 85% 92%;
-        --muted: 220 35% 12%;
-        --muted-foreground: 210 25% 80%; /* Pale navy */
-        --accent: 220 85% 55%; /* Vibrant azure blue */
-        --accent-foreground: 220 85% 92%;
-        --destructive: 0 75% 50%; /* More noticeable red */
-        --destructive-foreground: 220 85% 92%;
-        --border: 220 35% 12%; /* Darker steel blue */
-        --input: 220 35% 12%;
-        --ring: 220 65% 55%; /* Vivid blue ring */
-        --chart-1: 210 65% 45%; /* Classic blue */
-        --chart-2: 220 45% 60%; /* Softer sky */
-        --chart-3: 220 75% 45%; /* Azure blue */
-        --chart-4: 200 65% 50%; /* Ocean blue */
-        --chart-5: 240 35% 35%; /* Deeper teal */
-        --line-number-color: rgba(255, 255, 255, 0.05);
+        --background: 220 25% 10%;
+        --foreground: 210 30% 96%;
+        --card: 220 25% 15%;
+        --card-foreground: 210 30% 96%;
+        --popover: 220 25% 15%;
+        --popover-foreground: 210 30% 96%;
+        --primary: 210 100% 65%;
+        --primary-foreground: 220 25% 10%;
+        --secondary: 215 25% 20%;
+        --secondary-foreground: 210 30% 96%;
+        --muted: 215 20% 25%;
+        --muted-foreground: 215 20% 65%;
+        --accent: 200 100% 60%;
+        --accent-foreground: 0 0% 100%;
+        --destructive: 0 85% 70%;
+        --destructive-foreground: 0 0% 100%;
+        --border: 215 20% 25%;
+        --input: 215 20% 25%;
+        --ring: 210 100% 65%;
+        --chart-1: 210 100% 65%;
+        --chart-2: 200 100% 60%;
+        --chart-3: 220 90% 70%;
+        --chart-4: 190 100% 65%;
+        --chart-5: 230 90% 60%;
+        --line-number-color: rgba(255, 255, 255, 0.1);
    }
 }

--- a/styles/syntax.css
+++ b/styles/syntax.css
@@ -1,23 +1,20 @@
-/* ocean */
+/* Modern Blue Theme */
 /* Light Mode */
 .keyword {
-  color: #2563eb;
-  /* Vibrant Blue */
+  color: #1d4ed8; /* Darker blue for better contrast */
 }

 .function {
-  color: #0284c7;
-  /* Deep Sky Blue */
+  color: #0369a1; /* Deep blue */
 }

 .punctuation {
-  color: #475569;
-  /* Cool Slate Gray */
+  color: #4b5563; /* Slate gray */
 }

 .comment {
-  color: #64748b;
-  /* Muted Slate */
+  color: #6b7280; /* Muted gray */
+  font-style: italic;
 }

 .string,
@@ -25,34 +22,28 @@
 .annotation,
 .boolean,
 .number {
-  color: #0369a1;
-  /* Dark Cyan */
+  color: #0d9488; /* Teal for better distinction */
 }

 .tag {
-  color: #1e40af;
-  /* Indigo */
+  color: #1d4ed8; /* Matching keyword color */
 }

 .attr-name {
-  color: #0ea5e9;
-  /* Light Sky Blue */
+  color: #0284c7; /* Sky blue */
 }

 .attr-value {
-  color: #2563eb;
-  /* Bright Blue */
+  color: #2563eb; /* Primary blue */
 }

 /* Dark Mode */
 .dark .keyword {
-  color: #93c5fd;
-  /* Soft Blue */
+  color: #60a5fa; /* Soft blue */
 }

 .dark .function {
-  color: #38bdf8;
-  /* Sky Blue */
+  color: #38bdf8; /* Sky blue */
 }

 .dark .string,
@@ -60,23 +51,27 @@
 .dark .annotation,
 .dark .boolean,
 .dark .number {
-  color: #60a5fa;
-  /* Light Blue */
+  color: #2dd4bf; /* Teal */
 }

 .dark .tag {
-  color: #3b82f6;
-  /* Bold Blue */
+  color: #60a5fa; /* Matching keyword color */
 }

 .dark .attr-name {
-  color: #67e8f9;
-  /* Aqua */
+  color: #7dd3fc; /* Lighter blue */
 }

 .dark .attr-value {
-  color: #93c5fd;
-  /* Frosty Blue */
+  color: #3b82f6; /* Brighter blue */
+}
+
+.dark .comment {
+  color: #9ca3af; /* Lighter gray for dark mode */
+}
+
+.dark .punctuation {
+  color: #9ca3af; /* Lighter gray for dark mode */
 }

 .youtube {