Llms.txt - Generate Custom Theme

Complete guide for creating and using AI-generated custom themes based on LLMS context.

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.

File Structure

styles
globals.css
syntax.css

Generate New Theme

1

Step 1: Access LLM for Color Generation

Ensure you have access to a language model (LLM) that supports color palette generation

2

Step 2: Prepare Color Context

Share the content of the llms.txt file with the AI to provide the current color scheme context.

3

Step 3: Define Color Requirements

Determine your preferred color scheme or theme requirements

4

Step 4: Generate New Theme

Use the following prompt to request a new theme from the AI:

Create a new color theme based on the provided context with the following requirements:
1. Different primary color #2281E3
2. Maintain good contrast for accessibility
3. Include variants for both light and dark modes
4. Keep the same structure as the provided context
Colors example:

changes the value of Hex color #2281E3 into your brand colors.

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

: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 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
Edit this page

Published on Nov 14, 1936