침하하 글 쓸 때 라이트/다크 모드에 따라 변하는 색 쓰는 방법

진품먹품을 보면서

이번 진품먹품과 같이 이런 식으로(숨겨진 글) 글자를 가리는 글이 있어요. 그런데 이 방법에는 단점이 있습니다. 다크 모드를 사용하는 사람에게는 배경색과 너무 비슷해보여요. 뭔가 먹칠한 느낌이 안 나지 않나요? 아래 비교 이미지를 보시면 라이트 모드는 진짜 펜으로 칠한 느낌인데 다크 모드는 구멍이 뚫린 느낌..?

방법

침하하 사이트에서 쓰는 테마색을 이용하면 됩니다! 어떤 색이 있는 지는 이따가 이야기하도록 하고, 우선 사용법을 말씀드릴게요.

1. 글을 쓰다가 가릴 내용을 먼저 적어놓습니다.
2. 글쓰기 메뉴 맨 오른쪽의 <>소스를 선택합니다.
3. 쓰던 부분을 찾습니다. 실시간으로 쓰고 있던 중이라면 맨 아래에 있을거예요.
4. 가릴 부분 앞에 <span style="background-color: var(--default-font-color)">를 더하고, 뒤에는 </span>을 넣어줍니다.               
   (<span style="background-color: var(--default-font-color)">내용</span> 이런 모습이 되겠습니다.)
5.  이 방법은 배경색을 기본 글자색으로 만들어줍니다. 이렇게요. 이제 이걸 입맛대로 고쳐서 글자색과 배경색을 바꿔봐요.

더 자세한 방법은 이래요. 저기 style=" “ 안에 있는게 꾸며주는 내용인데요, color: 하고 색을 쓰면 글자 색이 바뀌고, background-color: 하고 색을 쓰면 배경 색이 바뀌는 식이예요. 또 이 두 개를 같이 쓸 때는 사이에 세미콜론(;)을 쉼표처럼 넣어주세요. 그러니까 만약 style=”color: red; background-color: green"이라고 하면 이런 끔찍한 디자인이 나올 거예요. 실사용 때는 red와 green 부분이 원하는 색으로 바뀌는 거죠.

테마 색들

하지만 우리는 빨강, 초록 같은 시시한 색을 쓰려는게 아니잖아요. 침하하 사이트와 같이 어우러지며 변화하는 그런 색깔을 쓰려고 하는 거잖아요. 그래서 침하하의 색깔 목록을 적어보겠습니다.

순서는 색 / 이게 무슨 색인지 / 코드 로 표시하겠습니다

• ■ / 기본 글자 색 / var(--default-font-color)
• ■ / 기본 배경 색 / var(--default-background-color)
• ■ / 침하하 테마색(메뉴에 쓰인 거, 이건 바뀌지는 않아요) / var(--point-background-color)
• ■ / 인기글 게시판 말머리 배경색, 최근 방문 게시판 배경색, 침하하 버튼 배경색 / var(--alpha-5)

유용해 보이는 색은 저게 전부인 거 같아요. 또 쓰고 싶은 색이 있으면 알려주세요.