Project Log/personal website DarkTheme(다크모드) 적용하기 1편 (feat.useContext) 이번에 개인 웹사이트를 개편하면서 dark-theme도 한 번 적용해보려고 한다. 별 다른 이유는 없고 그냥 깐지나보여서ㅎㅎ light/dark모드를 오가기 위해서 먼저 toggle button이 필요하다. Toggle이라는 이름의 컴포넌트를 만들까 했지만 토글 버튼을 사용할 경우가 theme switching 해주는 경우 말고는 없는 것 같아 그냥 아예 ThemeToggle이라는 이름으로 컴포넌트를 만들었다. import React, { useState } from 'react'; import styles from './ThemeToggle.scss'; const ThemeToggle = () => { const [lightMode, setLightMode] = useState(true); const .. 더보기 Table of Content 컴포넌트 만들기 - useContext 원페이지 개념이라 스크롤이 좀 길어지다 보니 스크롤을 맨 위로 올리는 top 버튼이나 목차 컴포넌트가 필요했다. 처음에는 간단하게 top버튼을 만들까 했는데 그것보다는 목차 컴포넌트를 만드는 게 뭔가 더 포멀 한 느낌을 줄 것 같아 목차 컴포넌트를 만들기로 결정했다. 각 목차는 태그로 감싸고, 이동할 컴포넌트에는 id를 달아줘서 태그가 해당 id를 가진 섹션으로 이동할 수 있게 만들었다. 이동하는 것 까지는 완성했는데 문제는 스크롤이 머무는 해당 섹션의 스타일을 다르게 표현하고 싶었는데 도저히 어떻게 해야 할지 감이 안 왔다. 자주 보는 블로그 사이트 velog에도 ToC컴포넌트가 있어서 뜯어보려고 개발자 도구를 열어서 봤는데 그것만으로는 알 수가 없었다. 다행히도(?) 개발자이신 velopert님이 오.. 더보기 이전 1 다음