+ 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.
+
-> 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.
+
+### v 1.13.5
+
+
+
+
+ - Add Theme schema
+ - Add Freshlime theme
+ - Add Coffee theme
+ - Add llms context for generated theme with AI
+
+
+ - Markdown support for theme-colors
+ - consistent theme-colors page
+ - all components now consistent with theme-colors
+ - syntax with theme-colors
+
+
+ - fix bug FileTree component
+ - fix issue markdown with theme-colors
+
+
### v 1.13.0
diff --git a/contents/docs/getting-started/theme-colors/coffee/index.mdx b/contents/docs/getting-started/theme-colors/coffee/index.mdx
new file mode 100644
index 0000000..1822c1d
--- /dev/null
+++ 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.
+
+
+ You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+
+
+
+
+ globals.css
+ syntax.css
+
+
+ ```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);
+ }
+}
+```
+
+
+
+ ```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;
+}
+```
+
+
diff --git a/contents/docs/getting-started/theme-colors/default/index.mdx b/contents/docs/getting-started/theme-colors/default/index.mdx
new file mode 100644
index 0000000..40e9f9b
--- /dev/null
+++ 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.
+
+
+ You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+
+
+
+
+ globals.css
+ syntax.css
+
+
+ ```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);
+ }
+}
+```
+
+
+
+ ```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 */
+}
+```
+
+
diff --git a/contents/docs/getting-started/theme-colors/freshlime/index.mdx b/contents/docs/getting-started/theme-colors/freshlime/index.mdx
new file mode 100644
index 0000000..de6ef5f
--- /dev/null
+++ 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.
+
+
+ You can override the default styles by adding your own CSS variables in the `globals.css` and `syntax.css` files.
+
+
+
+
+ globals.css
+ syntax.css
+
+
+ ```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);
+ }
+}
+```
+
+
+
+ ```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 */
+}
+```
+
+
diff --git a/contents/docs/getting-started/theme-colors/index.mdx b/contents/docs/getting-started/theme-colors/index.mdx
new file mode 100644
index 0000000..b983d5e
--- /dev/null
+++ 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.
+
+
diff --git a/contents/docs/getting-started/theme-colors/llms/index.mdx b/contents/docs/getting-started/theme-colors/llms/index.mdx
new file mode 100644
index 0000000..52a1e9f
--- /dev/null
+++ 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
+
+
+
+ Ensure you have access to a language model (LLM) that supports color palette generation
+
+
+ Share the content of the [llms.txt](/llms.txt) file with the AI to provide the current color scheme context.
+
+
+ Determine your preferred color scheme or theme requirements
+
+
+ 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
+ ```
+
+
+
+## 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
diff --git a/docu.json b/docu.json
index cf6c8c4..6603fee 100644
--- 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": {
diff --git a/package.json b/package.json
index d21fdbe..6ce6aba 100644
--- 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",
diff --git a/styles/globals.css b/styles/globals.css
index 3ba076c..f2ddca2 100644
--- 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);
}
}
diff --git a/styles/syntax.css b/styles/syntax.css
index 31f476b..0459326 100644
--- 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 {