Theme Color Customization
Customizing the theme color in DashTail Alpine is highly flexible, allowing you to use any custom color as the theme color.
Adding a New Color:
To begin, open the app.css file and add your new color following the code snippet provided.
💡
Ensure you use the HSL color values.
app.css
.theme-apple {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
////////////////////
--default-950: 240 10% 3.9%;
--ring: 240 5.9% 10%;
}
.dark .theme-apple {
--background: 240 5.9% 10%;
--foreground: 0 0% 98%;
////////////////////
--default-200: 240 5.3% 26.1%;
--default-100: 240 3.7% 15.9%;
--default-50: 240 5.9% 10%;
}Defining Your Color:
After creating your color, define it in the app.js file by referring to the code snippet provided.
app.js
isDark: false,
theme: 'violet',