본문 바로가기

다크모드

IT관련/CSS 관련 2022. 12. 28.
[Chakra] 차크라 UI로 정말 간단하고 쉽게 다크모드 구현해봅시다 ! 안녕하세요 !! 이번에 저번 시리즈에 이어서 차크라 UI로 정말 간단하고 쉽게 다크모드를 구현해 볼 생각입니다 !!! 정말 쉬우니 잘 따라와주세요 ^^ 자 바로 코드 보면서 설명 들어가겠습니다 !! ( 기본적으로 chakra UI는 설치를 해주세요 !!!! 안하시는 분들은 여기서 밑에 URL에서 확인해주세요 !!! ) https://heokknkn.tistory.com/51 index.tsx import { ChakraProvider, ColorModeScript } from "@chakra-ui/react"; import ReactDOM from "react-dom/client"; import router from "./router"; import { RouterProvider } from "react..
IT관련/CSS 관련 2022. 4. 27.
Tailwind css를 이용해서 Dark(다크)모드를 구현해보자 !!! 안녕하세요 ! 저번 반응형 페이지에 이어서 이번에는 다크모드를 구현해보겠습니닷 !!! 다크모드도 Tailwind css를 이용하면 너무너무 간단하게 되니까 연습 해봅시다 ! 먼저 저는 리액트 환경에서 진행할것입니다 !! 먼지 기존의 화면을 봐볼까요?? 기존 화면 저렇게 있습니다 !!! 그리고 아래에 보시면 다크모드라고 원을 만들었습니다 !! 이제 구현을 해볼까요?? const [dark, setDark] = useState("다크모드"); // 다크모드 있는곳 텍스트 ! const toggleDarkMode = () => { if (localStorage.getItem("theme") === "dark") { // 다크모드 -> 기본모드 localStorage.removeItem("theme"); // ..
728x90

티스토리툴바