[영화 앱 2] 테마 설정( 다크모드 ..)

 

테마  추가하기 

 

 

svg 이미지 사용으 위해서 사용하는 플러그인 추가 

 

https://www.npmjs.com/package/vite-plugin-svgr?activeTab=readme

vite-plugin-svgr

 

 

 

다크모드 

DarkMode.zip

0.00MB

 

svg파일은 assets파일에 추가

components폴더에 

DarkMode폴더 만들고 css와jsx파일 넣음

 

 

DarkMode.jsx에 import 경로 수정해야함

 

체크박스라서 체크가 됐으면 다크테마고 체크가 되면 라이트테마로 바뀜

import React from "react";

import "./DarkMode.css";
import Sun from "../../assets/Sun.svg?react";
import Moon from "../../assets/Moon.svg?react";

const DarkMode = () => {
  const setDarkTheme = () =>
    document.querySelector("body").setAttribute("data-theme", "dark");
  const setLightTheme = () =>
    document.querySelector("body").setAttribute("data-theme", "light");

  const toggleTheme = (e) =>
    e.target.checked ? setDarkTheme() : setLightTheme();

  setDarkTheme();
  return (
    <div className="dark_mode">
      <input
        onChange={toggleTheme}
        className="dark_mode_input"
        type="checkbox"
        id="darkmode-toggle"
      />
      <label className="dark_mode_label" htmlFor="darkmode-toggle">
        <Sun />
        <Moon />
      </label>
    </div>
  );
};

export default DarkMode;

 

 

 

Index.css

 

@font-face {
	font-family: 'Pretendard-Regular';
	src: url(./assets/fonts/Pretendard-Regular.woff2);
}

/* css컬러 변수 설정 */
:root {
	--body_backgroud: #101010;
	--body_color: #fff;
	--heading_color: #ffe400;
}

[data-theme='light'] {
	--body_backgroud: #fff;
	--body_color: #000;
	--heading_color: #000;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: all 0.3s ease-in-out;
}

body {
	background-color: var(--body_backgroud);
	color: var(--body_color);
	font-family: 'Pretendard-Regular', sans-serif;
}

 

 

 

Navbar.css

.navbar > h1 {
	font-size: 30px;
	color: var(--heading_color);
}
...
.navbar_links > a {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 500;
	color: var(--body_color);
	text-decoration: none;
	padding: 0 15px;
}

 

 

 

MovieList.css

.movie_list_heading {
	font-size: 26px;
	color: var(--heading_color);
}
.movie_filter_item {
  color: var(--body_color);
  padding: 5px 10px;
  cursor: pointer;
}