Theme Gallery
Preview all available color themes. Each theme provides a cohesive set of colors for light and dark modes.
gray Theme
A gray color palette for your application.
Light Mode
Card Title
Card description with muted text.
Dark Mode
Card Title
Card description with muted text.
CSS Variables
All color values use HSL format without the hsl() wrapper for flexibility.
Light Mode Variables
| Variable | Value | Preview |
|---|---|---|
| --background | 0 0% 100% | |
| --foreground | 224 71.4% 4.1% | |
| --card | 0 0% 100% | |
| --card-foreground | 224 71.4% 4.1% | |
| --popover | 0 0% 100% | |
| --popover-foreground | 224 71.4% 4.1% | |
| --primary | 220.9 39.3% 11% | |
| --primary-foreground | 210 20% 98% | |
| --secondary | 220 14.3% 95.9% | |
| --secondary-foreground | 220.9 39.3% 11% | |
| --muted | 220 14.3% 95.9% | |
| --muted-foreground | 220 8.9% 46.1% | |
| --accent | 220 14.3% 95.9% | |
| --accent-foreground | 220.9 39.3% 11% | |
| --destructive | 0 84.2% 60.2% | |
| --destructive-foreground | 210 20% 98% | |
| --border | 220 13% 91% | |
| --input | 220 13% 91% | |
| --ring | 224 71.4% 4.1% |
Dark Mode Variables
| Variable | Value | Preview |
|---|---|---|
| --background | 224 71.4% 4.1% | |
| --foreground | 210 20% 98% | |
| --card | 224 71.4% 4.1% | |
| --card-foreground | 210 20% 98% | |
| --popover | 224 71.4% 4.1% | |
| --popover-foreground | 210 20% 98% | |
| --primary | 210 20% 98% | |
| --primary-foreground | 220.9 39.3% 11% | |
| --secondary | 215 27.9% 16.9% | |
| --secondary-foreground | 210 20% 98% | |
| --muted | 215 27.9% 16.9% | |
| --muted-foreground | 217.9 10.6% 64.9% | |
| --accent | 215 27.9% 16.9% | |
| --accent-foreground | 210 20% 98% | |
| --destructive | 0 62.8% 30.6% | |
| --destructive-foreground | 210 20% 98% | |
| --border | 215 27.9% 16.9% | |
| --input | 215 27.9% 16.9% | |
| --ring | 216 12.2% 83.9% |
How to Use Themes
To change the theme in your Rails application, configure it in an initializer:
# config/initializers/shadcn.rb
Shadcn::Rails.configure do |config|
config.base_color = "gray" # Options: neutral, slate, stone, gray, zinc
config.dark_mode = :class # Options: :class, :media, :selector
end
Or generate the theme using the CLI:
rails generate shadcn:theme gray
For dark mode, add the dark class to your <html> element:
<html class="dark">
<!-- Your app content -->
</html>
All Themes Comparison
neutral
slate
stone
gray
zinc