refactor: darkmode css variable 적용 #122

asdf99245 · 2023-07-08T14:28:27Z

바뀐점

색상에 대한 classname을 정의할 때 darkmode 색상을 편하게 처리할 수 있도록 css variable을 적용했습니당

근데 이거 컴포넌트들 classname 수정한거 땜에 conflict 엄청 날거같네요 ㄷㄷ

close [Feature] tailwind darkmode 사용 classname 하나로 통일 #102

바꾼이유

기존에는 색상에 semantic naming을 적용했음에도 불구하고 darkmode에 대한 색상을 처리하기 위해 extend에서 _dark suffix를 붙여 classname 정의시 ex) bg-text-primary dark:bg-text-primary_dark 처럼 사용하게 되었습니다.
이는 동일한 semantic color명에도 중복 처리하게 되어 classname을 길어지게 만들고 비효율적이라 판단하여 수정하였습니다.

설명

tailwind.css 에서 css variable로 동일한 semantic color token에 대해서 light, dark mode 각각에 대한 색상을 대응되게 정의했습니다.

/* tailwind.css */
:root {
    --color-text-primary: 0 0 0;
    --color-text-secondary: 115 115 115;
    --color-text-tertiary: 181 181 181;
}

/* darkmode(root에 dark class가 있을 시)일 시엔 아래 색상 적용 */
:root[class~='dark'] {
    --color-text-primary: 255 255 255;
    --color-text-secondary: 186 186 186;
    --color-text-tertiary: 122 122 122;
}

이제부터 dark선택자를 통해 다시한번 dark mode에서의 색상에 대한 명시를 해줄 필요 없이 ex) bg-primary-text 만 해도 두 가지 모드를 대응하게 됩니다.

만약 light와 dark일 때 각각 다른 색상을 적용하고 싶을 시에는 tailwind의 dark: 선택자를 통해 구별시켜 주시면 됩니닷
ex) bg-bg-primary dark:bg-bg-tertiary

기존에 semantic color token을 사용함에도 tailwind classname을 적용할 때 _dark를 color명 뒤에 붙여서 dark 선택자를 통해 중복 선언하던 것을 css variable을 통해 classname 하나로 한번에 처리할 수 있도록 하였습니다.

Seojunhwan

오오 매번 dark:~~~ 해줘야해서 귀찮았었는데 좋네용 😃

css variable을 한 곳에서 관리하고 가져다 쓰는 방법이 떠오르긴 했는데 css 에서 js를 가져다 쓸 수도 없구 관리할 방법은 조금 애매쓰 하네용,,🤔

뭐 저기가 바뀔 일은 그렇게 많지는 않을 것 같은데 관련해서 좋은 생각 있으실까요?,,

Seojunhwan · 2023-07-08T14:32:48Z

src/styles/tailwind.css

+    --color-text-primary: 0 0 0;
+    --color-text-secondary: 115 115 115;
+    --color-text-tertiary: 181 181 181;
+
+    --color-bg-primary: 255 255 255;
+    --color-bg-alpha-base: 255 255 255;
+    --color-bg-secondary: 243 244 246;
+    --color-bg-tertiary: 209 213 219;
+
+    --color-border-primary: 209 213 219;
+    --color-border-secondary: 243 244 246;
+
+    --color-button-secondary-bg: 235 235 235;
+
+    --color-white: 255 255 255;
+    --color-black: 0 0 0;
+    --color-green: 40 205 65;
+    --color-yellow: 255 204 0;
+    --color-cyan: 50 173 230;
+    --color-indigo: 88 86 214;
+    --color-mint: 0 199 190;
+    --color-pink: 255 45 85;
+    --color-brown: 162 132 94;
+    --color-red: 255 59 48;
+
+    --color-blue_200: 56 189 248;
+    --color-blue_300: 2 132 199;
+
+    --color-system-100: 186 230 253;
+    --color-system-200: 56 189 248;
+    --color-system-300: 2 132 199;
+
+    --color-green-100: 187 247 208;
+    --color-green-200: 34 197 94;
+    --color-green-300: 22 163 74;
+
+    --color-red-100: 254 202 202;
+    --color-red-200: 255 59 48;
+    --color-red-300: 220 38 38;
+
+    --color-yellow-100: 254 240 138;
+    --color-yellow-200: 250 204 21;
+    --color-yellow-300: 202 138 4;
+
+    --shadow-searchbar: 0px 0px 1px 0px #f3f4f6;
+    --shadow-searchbar-hover: 0px 0px 5px 1px #d1d5db;
+    --shadow-searchbar-solid-hover: 0px 0px 16px 4px #b5b5b5;
+  }
+
+  :root[class~='dark'] {
+    --color-text-primary: 255 255 255;
+    --color-text-secondary: 186 186 186;
+    --color-text-tertiary: 122 122 122;
+
+    --color-bg-primary: 10 10 10;
+    --color-bg-alpha-base: 0 0 0;
+    --color-bg-secondary: 20 20 20;
+    --color-bg-tertiary: 51 51 51;
+
+    --color-border-primary: 82 82 82;
+    --color-border-secondary: 38 38 38;
+
+    --color-button-secondary-bg: 46 46 46;
+
+    --shadow-searchbar: 0px 0px 1px 0px #262626;
+    --shadow-searchbar-hover: 0px 0px 5px 1px #525252;
+    --shadow-searchbar-solid-hover: 0px 0px 16px 4px #7a7a7a;


요거 hex 로 관리가 가능할까요? 디자인에서 hex로 주어지는 경우가 더 많은 것 같아요!

아아,, 어쩔 수 없군요,,

네 😢 저게 킹받긴 한데 hex로 못하더라구여

ㄷㄷㄷㄷㄷ

asdf99245 · 2023-07-08T16:17:07Z

@Seojunhwan

css variable을 한 곳에서 관리하고 가져다 쓰는 방법이 떠오르긴 했는데 css 에서 js를 가져다 쓸 수도 없구 관리할 방법은 조금 애매쓰 하네용,,🤔

뭐 저기가 바뀔 일은 그렇게 많지는 않을 것 같은데 관련해서 좋은 생각 있으실까요?,,

흠.. 확실히 관리하기 까다롭긴 하네요 확실히 fix만 되면 별로 바뀌지 않을거같긴한데 당장은 좋은생각이 안나서 디자인 작업할 때 같이 고민해보시져

hyongti

LGTM
럭키금성티비모바일

raejun92

vg

asdf99245 added 3 commits July 8, 2023 23:09

refactor: darkmode css variable적용에 따른 classname 수정

ba202ed

refactor: shadow extend css variable 적용

d36329a

asdf99245 self-assigned this Jul 8, 2023

Seojunhwan reviewed Jul 8, 2023

View reviewed changes

hyongti approved these changes Jul 9, 2023

View reviewed changes

raejun92 approved these changes Jul 9, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: darkmode css variable 적용 #122

refactor: darkmode css variable 적용 #122

asdf99245 commented Jul 8, 2023 •

edited

Loading

Seojunhwan left a comment •

edited

Loading

Seojunhwan Jul 8, 2023

Seojunhwan Jul 8, 2023

asdf99245 Jul 8, 2023

hyongti Jul 9, 2023

asdf99245 commented Jul 8, 2023 •

edited

Loading

hyongti left a comment

raejun92 left a comment

refactor: darkmode css variable 적용 #122

Are you sure you want to change the base?

refactor: darkmode css variable 적용 #122

Conversation

asdf99245 commented Jul 8, 2023 • edited Loading

바뀐점

바꾼이유

설명

Seojunhwan left a comment • edited Loading

Choose a reason for hiding this comment

Seojunhwan Jul 8, 2023

Choose a reason for hiding this comment

Seojunhwan Jul 8, 2023

Choose a reason for hiding this comment

asdf99245 Jul 8, 2023

Choose a reason for hiding this comment

hyongti Jul 9, 2023

Choose a reason for hiding this comment

asdf99245 commented Jul 8, 2023 • edited Loading

hyongti left a comment

Choose a reason for hiding this comment

raejun92 left a comment

Choose a reason for hiding this comment

asdf99245 commented Jul 8, 2023 •

edited

Loading

Seojunhwan left a comment •

edited

Loading

asdf99245 commented Jul 8, 2023 •

edited

Loading