hexo-theme-keep/source/css/layout/common/variables.styl

// ========================================================================
//                              THEME VARIABLE                           //
// ========================================================================

// ========================================================================
// layout
// ========================================================================
$header-height = 72px; // 头部默认高度
$main-content-width = 62%; // 中间内容区域宽度（PC）
$main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
$main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
$header-shrink-height = 56px; // 头部收缩高度
$circle-button-width = 40px; // tools 圆形工具按钮宽度
$tools-button-width = 32px; // tools 方形工具按钮宽度
$component-interspace = 40px; // 组件/模块的间隔值（PC）
$component-interspace-tablet = 30px; // 组件/模块的间隔值（平板）
$component-interspace-mobile = 20px; // 组件/模块的间隔值（手机）

// ========================================================================
// 媒体查询
// ========================================================================
$media-max-width = 760px; // 媒体查询最大宽度 (平板)
$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机）

ils-tablet()
  @media (max-width: $media-max-width)
    {block}

ils-mobile()
  @media (max-width: $media-max-width-mobile)
    {block}


// ========================================================================
// z-index
// ========================================================================
$z-index-1 = 1001;
$z-index-2 = 1002;
$z-index-3 = 1003;
$z-index-4 = 1004;
$z-index-5 = 1005;
$z-index-6 = 1006;
$z-index-7 = 1007;
$z-index-8 = 1008;
$z-index-9 = 1009;


// ========================================================================
// color
// ========================================================================
// primary color
$temp-color = hexo-config('style.primary_color');
$primary-color = $temp-color ? convert($temp-color):#0066CC;
$background-color = #fff; // light background color
$second-background-color = darken($background-color, 2%); // second light background color
$normal-text-color = #393939; // 通用文本颜色（默认字体颜色）
$first-text-color = darken($normal-text-color, 10%); // 第一文本颜色
$second-text-color = darken($normal-text-color, 5%); // 第二文本颜色
$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
$fourth-text-color = lighten($normal-text-color, 90%); // 第三文本颜色
$border-color = darken($background-color, 30%); // 边框颜色
$selection-color = lighten($primary-color, 10%); // 文字选中的颜色
$shadow-color = rgba(0, 0, 0, 0.2);
$shadow-hover-color = rgba(0, 0, 0, 0.28);
$scroll-bar-color = #585858;

// dark mode color
$dark-primary-color = $primary-color;
$dark-background-color = #2f2e31;
$dark-second-background-color = darken($dark-background-color, 2%);
$dark-normal-text-color = #b9b5c2;
$dark-first-text-color = lighten($dark-normal-text-color, 30%);
$dark-second-text-color = lighten($dark-normal-text-color, 20%);
$dark-third-text-color = darken($dark-normal-text-color, 20%);
$dark-fourth-text-color = darken($dark-normal-text-color, 80%);
$dark-border-color = lighten($dark-background-color, 20%);
$dark-selection-color = $selection-color;
$dark-shadow-color = rgba(128, 128, 128, 0.2);
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
$dark-scroll-bar-color = #686868;


// ========================================================================
// font
// ========================================================================
$default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
$default-font-size = 15.2px;
$default-font-line-height = 22px;
$default-font-weight = 400;


// ========================================================================
//  light/dark color
// ========================================================================
root-light() {
  --background-color: $background-color;
  --second-background-color: $second-background-color;
  --primary-color: $primary-color;
  --first-text-color: $first-text-color;
  --second-text-color: $second-text-color;
  --third-text-color: $third-text-color;
  --fourth-text-color: $fourth-text-color;
  --normal-text-color: $normal-text-color;
  --border-color: $border-color;
  --selection-color: $selection-color;
  --shadow-color: $shadow-color;
  --shadow-hover-color: $shadow-hover-color;
  --scroll-bar-color: $scroll-bar-color;
}


root-dark() {
  --background-color: $dark-background-color;
  --second-background-color: $dark-second-background-color;
  --primary-color: $dark-primary-color;
  --first-text-color: $dark-first-text-color;
  --second-text-color: $dark-second-text-color;
  --third-text-color: $dark-third-text-color;
  --fourth-text-color: $dark-fourth-text-color;
  --normal-text-color: $dark-normal-text-color;
  --border-color: $dark-border-color;
  --selection-color: $dark-selection-color;
  --shadow-color: $dark-shadow-color;
  --shadow-hover-color: $dark-shadow-hover-color;
  --scroll-bar-color: $dark-scroll-bar-color;
}


:root {
  root-light();
}


@media (prefers-color-scheme: dark) {
  :root {
    root-dark();
  }
}


.dark-mode {
  root-dark();
}


.light-mode {
  root-light();
}