refs #4795 Add color themes

This commit is contained in:
AkiraFukushima 2024-03-09 22:13:44 +09:00
parent dc6c36ce99
commit 4571f1c548
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
2 changed files with 160 additions and 0 deletions

View File

@ -185,3 +185,147 @@ a {
@apply text-deep-orange-600; @apply text-deep-orange-600;
} }
} }
.theme-purple {
.theme-account-bg {
@apply bg-gradient-to-b;
@apply from-purple-900;
@apply to-purple-800;
}
.theme-bg {
@apply bg-deep-purple-900;
}
.theme-bg-secondary {
@apply bg-purple-900;
}
.theme-text-primary {
@apply text-deep-purple-100;
}
.theme-text-subtle {
@apply text-deep-purple-600;
}
.theme-badge {
@apply bg-deep-purple-600;
}
.theme-enabled {
@apply text-deep-purple-400;
}
.theme-enabled:hover {
@apply text-deep-purple-600;
}
}
.theme-green {
.theme-account-bg {
@apply bg-gradient-to-b;
@apply from-teal-900;
@apply to-teal-800;
}
.theme-bg {
@apply bg-green-900;
}
.theme-bg-secondary {
@apply bg-green-900;
}
.theme-text-primary {
@apply text-green-100;
}
.theme-text-subtle {
@apply text-green-600;
}
.theme-badge {
@apply bg-green-600;
}
.theme-enabled {
@apply text-green-400;
}
.theme-enabled:hover {
@apply text-green-600;
}
}
.theme-brown {
.theme-account-bg {
@apply bg-gradient-to-b;
@apply from-gray-900;
@apply to-gray-800;
}
.theme-bg {
@apply bg-brown-900;
}
.theme-bg-secondary {
@apply bg-brown-900;
}
.theme-text-primary {
@apply text-brown-100;
}
.theme-text-subtle {
@apply text-brown-600;
}
.theme-badge {
@apply bg-brown-600;
}
.theme-enabled {
@apply text-brown-400;
}
.theme-enabled:hover {
@apply text-brown-600;
}
}
.theme-gray {
.theme-account-bg {
@apply bg-gradient-to-b;
@apply from-gray-900;
@apply to-gray-800;
}
.theme-bg {
@apply bg-blue-gray-900;
}
.theme-bg-secondary {
@apply bg-blue-gray-900;
}
.theme-text-primary {
@apply text-blue-gray-100;
}
.theme-text-subtle {
@apply text-blue-gray-600;
}
.theme-badge {
@apply bg-blue-gray-600;
}
.theme-enabled {
@apply text-blue-gray-400;
}
.theme-enabled:hover {
@apply text-blue-gray-600;
}
}

View File

@ -32,6 +32,22 @@ const themes = [
{ {
label: 'Orange', label: 'Orange',
value: 'theme-orange' value: 'theme-orange'
},
{
label: 'Purple',
value: 'theme-purple'
},
{
label: 'Green',
value: 'theme-green'
},
{
label: 'Brown',
value: 'theme-brown'
},
{
label: 'Gray',
value: 'theme-gray'
} }
] ]