[data-theme="dark"] {
  --nav-header-bg: #242526;
  --nav-header-input-bg: #3a3b3c;
  --nav-header-focus-bg: #303131;
  --nav-header-text-color: #d8e6eb;
  --nav-header-btn-login-bg: #3a3b3c;
  --nav-header-btn-login-bg-hover: #121212;
  --nav-header-btn-login-text-hover: #bbbbbb;
  --nav-header-btn-login-color: #b1b1b1;

  --ntfc-icon-color: #bbb;
  --ntfc-icon-hover-color: #bbb;
  --ntfc-icon-hover-bg: #3a3b3c;

  --sidebar-bg: #18191a;
  --sidebar-color: #bbbbbb;
  --sidebar-color-active: #21deef;
  --sidebar-bg-active: #232323;

  --main-bg: #18191a;
  --main-video-bg: #242526;
  --main-video-text-color: #d8e6eb;
  --main-video-sub-text-color: #9e9e9e;
  --main-title-color: #d8e6eb;

  --main-ntfc-bg: #18191a;
  --main-list-bg-hover: #242526;
  --main-login-bg: #242526;
  --main-login-input-bg: #3a3b3c;
  --main-login-input-color: #ddd;
  --main-login-btn-bg: #262727;

  --main-publish-bg: #242526;

  --msg-warning-bg: #3a3b3c;

  --main-eps-bg: #18191a;
  --main-eps-border: #444546;
  --main-eps-bg-hover: #242526;

  --recommended-grid-info-shadow: none;
  --recommended-info-p: #9e9e9e;

  --icon-title-bg: #bbbbbb;
  --icon-title-text: #333;

  --slide-bg: #000;

  --pagin-bg: #262727;
  --pagin-color: #21deef;
  
  --title-icon-bg-deep-purple: #bbbbbb;
  --title-icon-bg-purple: #bbbbbb;
  --title-icon-bg-blue: #bbbbbb;
  --title-icon-bg-pink: #bbbbbb;
  --title-icon-bg-teal: #bbbbbb;
}

[data-theme="light"] {
  --nav-header-bg: #fff;
  --nav-header-input-bg: #eceff0;
  --nav-header-focus-bg: #e3eff3;
  --nav-header-text-color: #18191a;
  --nav-header-btn-login-bg: #04abf2;
  --nav-header-btn-login-bg-hover: #0eb2f8;
  --nav-header-btn-login-text-hover: #fff;
  --nav-header-btn-login-color: #ffffff;

  --ntfc-icon-color: #0eb2f8;
  --ntfc-icon-hover-color: #0b86bb;
  --ntfc-icon-hover-bg: #d7ebff;

  --sidebar-bg: #fff;
  --sidebar-color: #696969;
  --sidebar-color-active: #04abf2;
  --sidebar-bg-active: #d1effc;

  --main-bg: #f5f5f5;
  --main-video-bg: #0000000d;
  --main-video-text-color: #030303;
  --main-video-sub-text-color: #696969;
  --main-title-color: #030303;

  --main-ntfc-bg: #f5f5f5;
  --main-list-bg-hover: #0000000d;
  --main-login-bg: #fff;
  --main-login-input-bg: #eceff0;
  --main-login-input-color: #030303;
  --main-login-btn-bg: #04abf2;

  --main-publish-bg: #0000000d;

  --msg-warning-bg: #eceff0;

  --main-eps-bg: #eceff0;
  --main-eps-border: #e3e3e3;
  --main-eps-bg-hover: #ffffff;

  --recommended-grid-info-shadow: 0 6px 12px rgb(0 0 0 / 18%);
  --recommended-info-p: #030303;

  --icon-title-bg: #04abf2;
  --icon-title-text: #fff;

  --slide-bg: #fff;

  --pagin-bg: #04abf2;
  --pagin-color: #fff;

  --title-icon-bg-deep-purple: #512DA8;
  --title-icon-bg-purple: #9C27B0;
  --title-icon-bg-blue: #2196F3;
  --title-icon-bg-pink: #E91E63;
  --title-icon-bg-teal: #009688;
}