관리자 페이지 세미 컬러 모드 적용 방법 (이윰빌더 4.6.0 버전 이상) > 팁 & 테크

안녕하세요. 이윰빌더 4.6.0 버전 이상에서는 관리자 페이지에 화이트모드 / 다크모드를 지원합니다. 아래 이미지와 같이 헤더와 사이드 메뉴에 컬러가 있는 세미컬러 모드로 변경을 원하시면 ![!\[image\]](https://eyoom.net/data/editor/2303/1846406784_1679649888.53516.jpg) /adm/eyoom_adm/theme/eba_basic/css/light_mode.css 파일을 열어 제일 밑 251라인에 아래 소스를 넣어주면 됩니다. ``` /*----- Semi Color Mode -----*/ .header-logo {background-color:#ab0000;border-bottom-color:#12121b} .header-logo > a {color:#fff} .header-logo > a span {color:#fff} @media(max-width:991px) { .header-logo {background-color:#12121b} } .header-bar {background-color:#12121b;border-bottom-color:transparent} .header-left > a {color:#fff} .header-left > a:focus, .header-left > a:hover {color:#fff} .header-left .left-dropdown-btn {color:#fff} .header-left .left-dropdown-btn:hover {color:#fff} .header-nav .navbar-nav .nav-item-txt > a {color:#9596aa} .header-nav .nav-expand > a {color:#9596aa} .sidebar-left {background-color:#12121b;border-right-color:transparent} .sidebar-left-top {background-color:#12121b} .sidebar-top-box h5 {color:#fff} .sidebar-title {color:#4b4d6e} .sidebar-title i {color:#383d4b} .nav-item-icon {color:#545a6e} .nav-item-text {color:#9596aa} .nav-item.active:before {background-color:#7772fd} .nav-item.active .nav-item-icon {color:#fff} .nav-item.active .nav-item-text {color:#7772fd} .nav-item.active .is-sub-nav:after {color:#7772fd} .nav-link {color:#6c757d} .nav-link.is-sub-nav:after {color:#4b4d6e} .nav-link:hover {color:#7772fd} .nav-link:hover .nav-item-text {color:#7772fd} .nav-link.active {color:#7772fd} .nav-link.active:after {color:#7772fd} .nav-link.visible-sub-nav {color:#9596aa} .sub-nav {border-left-color:rgb(55, 54, 71, 0.7)} .sub-nav .sub-nav-link {color:#9596aa} .sub-nav .sub-nav-link.active, .sub-nav .sub-nav-link:focus, .sub-nav .sub-nav-link:hover {color:#7772fd} .sub-nav .sub-nav-link.active:before, .sub-nav .sub-nav-link:focus::before, .sub-nav .sub-nav-link:hover::before {background-color:#fff} .sub-nav .sub-nav-item.active .sub-nav-link {color:#9596aa} .sidebar-left-info .sidebar-left-info-box {border-top-color:rgb(55, 54, 71, 0.7);border-bottom-color:rgb(55, 54, 71, 0.7)} .sidebar-left-info .install-info-title {color:#9596aa} .sidebar-left-info .install-info-cont span {color:#4b4d6e} .sidebar-left-info .install-info-cont strong {color:#7772fd} .sidebar-left-info .install-info-cont small {color:#4b4d6e} .sidebar-left-info .install-info-cont small a {color:#4b4d6e} .sidebar-left-info .site-info-cont {color:#4b4d6e} .close-nav .sidebar-left-info {background-color:#202030} .open-nav .sidebar-left-info {background-color:transparent} .cover-left .sidebar-left-info {background-color:transparent} .cover-left .sidebar-top-box {background-color:#ab0000;border-bottom-color:#12121b} @media(min-width:992px) { .close-nav .nav-item.active .nav-item-icon {color:#fff} .close-nav .nav-item.active .nav-link.is-sub-nav:after {color:#7772fd} } ```