ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 다크 모드 적용

Browse Source
This commit is contained in:
chanii8
2025-03-20 18:50:31 +09:00
parent 55ac57d73c
commit b8e0a8a878
13 changed files with 94 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/components/src/ui/button-group/button-group.css
+30 -6
View File
@@ -10,16 +10,16 @@
/* 버튼 색상 */
div[role="radiogroup"][data-variant="button"][data-color="primary"] {
@apply border border-primary dark:border-[#404040];
@apply border border-primary;
}
div[role="radiogroup"][data-variant="button"][data-color="primary"] button {
@apply text-[#6f98bd] hover:bg-[#ecf3f9] hover:text-[#498bc7] data-[state=checked]:bg-primary data-[state=checked]:text-white dark:bg-[#505050] dark:text-[#aeb7bf] dark:hover:bg-[#525e69] dark:data-[state=checked]:bg-primary dark:data-[state=checked]:text-white;
@apply text-[#6f98bd] hover:bg-[#ecf3f9] hover:text-[#498bc7] data-[state=checked]:bg-primary data-[state=checked]:text-white;
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"] {
@apply border border-[#ababab] dark:border-[#808080];
@apply border border-[#ababab];
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"] button {
@apply bg-[#f3f3f3] text-[#8a8a8a] hover:bg-[#ececec] hover:text-[#808080] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white dark:bg-[#505050] dark:text-[#a5a5a5] dark:hover:bg-[#444444] dark:data-[state=checked]:bg-[#848484] dark:data-[state=checked]:text-white;
@apply bg-[#f3f3f3] text-[#8a8a8a] hover:bg-[#ececec] hover:text-[#808080] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white;
}
/* 버튼 모양 */
@@ -28,13 +28,37 @@
}
div[role="radiogroup"][data-variant="button"][data-color="primary"][data-shape="rounded"]
button {
@apply bg-[#70bcff] text-white hover:bg-[#6bb0ec] data-[state=checked]:bg-primary dark:bg-[#505050] dark:hover:bg-[#525e69] dark:data-[state=checked]:bg-primary;
@apply bg-[#70bcff] text-white hover:bg-[#6bb0ec] data-[state=checked]:bg-primary;
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"] {
@apply border-[#7b7b7b];
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"]
button {
@apply bg-[#b7b7b7] text-white hover:bg-[#a9a9a9] data-[state=checked]:bg-[#797979] dark:bg-[#505050] dark:hover:bg-[#444444] dark:data-[state=checked]:bg-[#797979];
@apply bg-[#b7b7b7] text-white hover:bg-[#a9a9a9] data-[state=checked]:bg-[#797979];
}
[data-theme="black"] {
div[role="radiogroup"][data-variant="button"][data-color="primary"] {
@apply border-[#404040];
}
div[role="radiogroup"][data-variant="button"][data-color="primary"] button {
@apply bg-[#505050] text-[#aeb7bf] hover:bg-[#525e69] data-[state=checked]:bg-primary data-[state=checked]:text-white;
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"] {
@apply border-[#808080];
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"]
button {
@apply bg-[#505050] text-[#a5a5a5] hover:bg-[#444444] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white;
}
div[role="radiogroup"][data-variant="button"][data-color="primary"][data-shape="rounded"]
button {
@apply bg-[#505050] hover:bg-[#525e69] data-[state=checked]:bg-primary;
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"]
button {
@apply bg-[#505050] hover:bg-[#444444] data-[state=checked]:bg-[#797979];
}
}
}