zidell

/* prefers-color-scheme 를 지원하는 곳에서만 가능한 코드 */
@media (prefers-color-scheme: dark) {
  :root {
    ...
  }
}
/* 유저설정에 의해 클래스가 부여되므로 모든 CSS 변수 지원브라우저에서 가능한 코드 */
html.darkmode:root {
  ...
}

zidell

function userTheme(toggle = false) {
  let userMode = localStorage.userThemeMode || 'auto';
  const osMode = !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
  if(toggle) {
   switch(userMode) {
    case 'auto':
     userMode = 'dark'; break;
    case 'dark':
     userMode = 'light'; break;
    default:

zidell

if (window.__THEME_MODE) {
  // 다크모드에서만 실행하는 코드...(뭐가 있지? 여튼..)
}

zidell

/* 미디어 쿼리 없이 일반적인 형식으로 대체 */
html.darkmode:root {
  ...
}
.btn-primary {
  // 라이트모드에서의 속성들
  html.darkmode & { /* 다른 셀렉터와 손쉽게 결합 */
   // 다크모드에서의 속성 오버라이드
  }
}

zidell

function userTheme() {
 window.__THEME_MODE = 'light';
 if (!!window.matchMedia) {
  window.__THEME_MODE = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'auto';
 }
  document.getElementsByTagName('html')[0].classList[window.__THEME_MODE === 'dark' ? 'add' : 'remove']('darkmode');
}
if (!!window.matchMedia) {
 ['light', 'dark'].forEach(mode => {
  window.matchMedia(`(prefers-color-scheme: ${mode})`).addListener(e => {

zidell

html,body {
  width: 100%;
  height: 100%;
  padding:0;
  margin:0;
  font-family:sans-serif;
  line-height: 1.7rem;
  background-color: $bg-color; /* CSS 변수가 안 될 때 */
  background-color: var(--bg-color);
  color:$color3;

zidell

html,body {
  width: 100%;
  height: 100%;
  padding:0;
  margin:0;
  font-family:sans-serif;
  line-height: 1.7rem;
  background-color: $bg-color; /* CSS 변수가 안 될 때 */
  background-color: var(--bg-color);
  color:$color3;

zidell

:root {
  --bg-color: #fff;
  --box-color: rgba(0,0,0,0.05);
  --color1: #ccc;
  --color2: #999;
  --color3: #000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #000;

zidell

.col-xxs-1,.col-xxs-10,.col-xxs-11,.col-xxs-12,.col-xxs-2,.col-xxs-3,.col-xxs-4,.col-xxs-5,.col-xxs-6,.col-xxs-7,.col-xxs-8,.col-xxs-9{min-height:1px;padding-left:15px;padding-right:15px;position:relative}.visible-xxs,.visible-xxs-block,.visible-xxs-inline,.visible-xxs-inline-block{display:none!important}@media (max-width:480px){.col-xxs-1,.col-xxs-10,.col-xxs-11,.col-xxs-2,.col-xxs-3,.col-xxs-4,.col-xxs-5,.col-xxs-6,.col-xxs-7,.col-xxs-8,.col-xxs-9{float:left}.col-xxs-1{width:8.333333333333332%}.col-xxs-2{width:16.666666666666664%}.col-xxs-3{width:25%}.col-xxs-4{width:33.33333333333333%}.col-xxs-5{width:41.66666666666667%}.col-xxs-6{width:50%}.col-xxs-7{width:58.333333333333336%}.col-xxs-8{width:66.66666666666666%}.col-xxs-9{width:75%}.col-xxs-10{width:83.33333333333334%}.col-xxs-11{width:91.66666666666666%}.col-xxs-12{width:100%}.col-xxs-push-1{left:8.333333333333332%}.col-xxs-push-2{left:16.666666666666664%}.col-xxs-push-3{left:25%}.col-xss-push-4{left:33.33333333333333%}.col-xxs-push-5{left:41.66666666666

zidell

const zidellPagination = (baseUrl='#', pageNum=1, totalRecord=200, perPage=20, displayButtons=8) =>
{
  let totalPage = Math.ceil(totalRecord/perPage);
  
  let s = '<ul class="pagination">';
  let lis = [];
  
  // 맨 좌측의 페이지 번호를 구함
  let startPageNum = (Math.ceil(pageNum/displayButtons)-1) * displayButtons + 1;
  let endPageNum = startPageNum + displayButtons - 1;