One-Click Theme Customization
Learn how to quickly change your application's theme color with a simple search and replace operation.
About Theme Customization
SuperFast Docs uses Tailwind CSS for styling, making it easy to change the entire theme color with a single search and replace operation.
How to Change Your Theme Color
Follow these simple steps to change your application's theme color:
1
Open Your IDE
Open your project in any code editor like VS Code, Cursor, or Windsurf
Supported IDEs:
- Visual Studio Code
- Cursor
- Windsurf
- Any IDE with search and replace functionality
2
Use Search and Replace
Use the search and replace functionality in your IDE to change the theme color
Search For
Search for -indigo- in your project files
Replace With
Replace with your desired color (e.g., -sky-)
3
Apply Changes
Click "Replace All" to apply the changes throughout your project
Important Notes:
- Make sure to use "Replace All" to ensure consistency
- Restart your development server to see the changes
- Test your application to ensure all components look correct
Available Tailwind Colors
Here are the available Tailwind CSS colors you can use for your theme:
Color Restrictions
Please avoid using the following colors for your theme:
- gray - Reserved for system UI elements
- slate - Reserved for system UI elements
- zinc - Reserved for system UI elements
- neutral - Reserved for system UI elements
- stone - Reserved for system UI elements
- red - Reserved for error states
- green - Reserved for success states
orange
amber
yellow
lime
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Example: Changing from Indigo to Sky
Here's an example of how to change your theme from indigo to sky:
Bash
# 1. Open your project in your IDE# 2. Use the project file search in the left sidebar# 3. Enter '-indigo-' in the search field# 4. Enter '-sky-' in the replace field# 5. Click 'Replace All'# 6. Restart your development server# 7. Your theme is now changed from indigo to sky!Theme Customization Complete
Your application now has a new theme color. The implementation includes:
- Simple search and replace operation
- Consistent color scheme throughout the application
- Wide range of color options from Tailwind CSS
- No need to modify individual component styles
