인스타그램 사이트 (라이트, 다크모드) 만들기

사용자 지정 속성

- CSS를 작성하는 자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다.

 

사용자 지정 속성 정의

:root {
    --primary : #FFFFFF;
    --secondary : #FAFAFA;
    --border: #DBDBDB;

    --story-border: #c7c7c7;

    --text-dark: #262626;
    --text-light: #999999;
}

:root.darkTheme {
    --primary: #000000;
    --secondary: #050505;
    --border: #262626;

    --story-border: #707070;
    
    --text-dark: #FAFAFA;
    --text-light: #999999;
}

 

var()로 적용

.header_search input {
    width: 100%;
    height: 100%;
    background-color: var(--secondary);
    padding: 4px 10px 4px 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 300;
    color: var(--text-light);
    text-overflow: hidden;
    white-space: nowrap;
}

.header_search input:focus {
    color: var(--text-dark)
}

svg 파일도 fill=var()로 사용자 지정 가능

   <svg width="24" height="24" viewBox="0 0 24 24"  fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M21.669 21.6543C21.8625 21.4622 21.863 21.1494 21.6703 20.9566L17.3049 16.5913C18.7912 14.9327 19.7017 12.7525 19.7017 10.3508C19.7017 5.18819 15.5135 1 10.3508 1C5.18819 1 1 5.18819 1 10.3508C1 15.5135 5.18819 19.7017 10.3508 19.7017C12.7624 19.7017 14.9475 18.7813 16.606 17.2852L20.9739 21.653C21.1657 21.8449 21.4765 21.8454 21.669 21.6543ZM1.9843 10.3508C1.9843 5.7394 5.7394 1.9843 10.3508 1.9843C14.9623 1.9843 18.7174 5.7394 18.7174 10.3508C18.7174 14.9623 14.9623 18.7174 10.3508 18.7174C5.7394 18.7174 1.9843 14.9623 1.9843 10.3508Z"
              fill="var(--text-dark)" stroke="#A5A5A5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>

토글 (화면에 나타나기, 사라지기)

- display : none 화면에 안나옴

- display : unset 부모로부터 상속값 있으면 상속, 아니면 초깃값(block)

 

해, 달 아이콘 나타나기, 사라지기

.header_theme-button-sun{
    display: none;
}
.header_theme-button-moon{
    display: unset;
}

:root.darkTheme .header_theme-button-sun{
    display: unset;
}
:root.darkTheme .header_theme-button-moon{
    display: none;
}

javascript로 class 이름 조작

const toggleThemeBtn = document.querySelector('.header_theme-button');

document.onload = setInitialTheme(localStorage.getItem('theme'));
function setInitialTheme(themeKey){
    if(themeKey === 'dark') {
        document.documentElement.classList.add('darkTheme');
    }else {
        document.documentElement.classList.remove('darkTheme');
    }
}

 

페이지 새로고침해도 변경 사항 유지하려면 (localStorage)

- web storage : 서버가 아닌, 클라이언트에 데이터 저장.

- localStorage : 웹 스토리지 중에 웹페이지 세션이 끝나도 데이터 지워지지 않고 기억.
  (새로 고침, 다시 실행해도 기억 )

- sessionStorage : 웹 스토리지 중에 현제 떠 있는 탭 내에서만 데이터 기억. (새로 고침만 기억)

- document.onload : 처음에 시작할때 로딩할 때 실행

- localStorage.setItem : 키-값 쌍 보관

- localStorage.getItem : 키에 해당하는 값을 받음.

toggleThemeBtn.addEventListener('click',() => {
    document.documentElement.classList.toggle('darkTheme')

    if(document.documentElement.classList.contains('darkTheme')){
        localStorage.setItem('theme','dark');
    }else{
        localStorage.setItem('theme','light');
    }
})

실행 장면

헤더 html

<header class="header">
      <nav class="header_content">
        <div class="header_buttons">
          <a href="index.html" class="header_home">
            <!-- <img src="assets/icons/logo.svg" alt="logo" /> -->
            <svg
              width="104"
              height="30"
              viewBox="0 0 104 30"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
            </svg>
          </a>
          <button class="header_theme-button" title="Toggle Theme">
            <svg
              class="header_theme-button-moon"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="var(--text-dark)"
              viewBox="0 0 16 16"
            >
            
            </svg>
            <svg
              class="header_theme-button-sun"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="var(--text-dark)"
              viewBox="0 0 16 16"
            >
           
            </svg>
          </button>
        </div>
        <div class="header_search">
          <!-- <img src="assets/icons/search.svg" alt="search" /> -->
          <svg width="24" height="24" viewBox="0 0 24 24"  fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M21.669 21.6543C21.8625 21.4622 21.863 21.1494 21.6703 20.9566L17.3049 16.5913C18.7912 14.9327 19.7017 12.7525 19.7017 10.3508C19.7017 5.18819 15.5135 1 10.3508 1C5.18819 1 1 5.18819 1 10.3508C1 15.5135 5.18819 19.7017 10.3508 19.7017C12.7624 19.7017 14.9475 18.7813 16.606 17.2852L20.9739 21.653C21.1657 21.8449 21.4765 21.8454 21.669 21.6543ZM1.9843 10.3508C1.9843 5.7394 5.7394 1.9843 10.3508 1.9843C14.9623 1.9843 18.7174 5.7394 18.7174 10.3508C18.7174 14.9623 14.9623 18.7174 10.3508 18.7174C5.7394 18.7174 1.9843 14.9623 1.9843 10.3508Z"
              fill="var(--text-dark)" stroke="#A5A5A5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          
          <input type="text" placeholder="Search..." />
        </div>
        <div class="header_buttons">
          <a href="#">
            <img src="assets/icons/home.svg" alt="home" />
          </a>
          <a href="#">
            <img src="assets/icons/shop.svg" alt="shop" />
          </a>
          <a href="#">
            <img src="assets/icons/messenger.svg" alt="messenger" />
          </a>
          <div class="profile_picture">
            <img src="assets/images/avatar.png" alt="user picture" />
          </div>
        </div>
      </nav>
    </header>

GitHub

GitHub - jeongdong99/Instagram