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

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

// ===================================
// layout
// ===================================
if (hexo-config('magic.enable')) {
  $header-height = 80px;        // magic 风格：头部默认高度
} else {
  $header-height = 100px;       // normal 风格：头部默认高度
}

$main-content-width = 62%;          // 中间内容区域宽度（PC）
$main-content-width-tablet = 80%;   // 中间内容区域宽度（平板）
$main-content-width-mobile = 88%;   // 中间内容区域宽度（手机）

$header-shrink-height = 60px;    // 头部收缩高度
$tool-button-width = 36px;       // tools 方形工具按钮宽度
$component-interspace = 30px;    // 组件/模块的间隔值（px）

// ===================================
// 媒体查询
// ===================================
$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;


// ===================================
// color
// ===================================
// normal mode color
$primary-color = rgba(30, 88, 217, 0.96);             // 主题颜色
$background-color = #fff;                             // normal 风格 背景颜色
$magic-background-color = #fafafa;                    // magic 风格 背景颜色
$normal-text-color = #43404d;                         // 通用文本颜色（默认字体颜色）
$first-text-color = darken($normal-text-color, 8%);   // 第一文本颜色
$second-text-color = darken($normal-text-color, 4%);  // 第二文本颜色
$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
$fourth-text-color = #eee;                            // 第四文本颜色
$border-color = darken($background-color, 30%);       // 边框颜色
$selection-color = lighten($primary-color, 20%);      // 文字选中的颜色

// dark mode color
$dark-primary-color = $primary-color;
$dark-background-color = #38373a;
$dark-magic-background-color = #2f2e31;
$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 = #2f2e31;
$dark-border-color = lighten($dark-background-color, 20%);
$dark-selection-color = $selection-color;


// ===================================
// font
// ===================================
// 'PingHei', 'PingFang SC', 'Microsoft YaHei';
// 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
// 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
// "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
$default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
$default-font-size = 15.2px;
$default-font-line-height = 20px;
$default-font-weight = 400;


// ===================================
//  light/dark color
// ===================================
:root {
  --background-color: $background-color;
  --magic-background-color: $magic-background-color;
  --primary-color: $primary-color;
  --first-text-color: $first-text-color;
  --fourth-text-color: $fourth-text-color;
  --second-text-color: $second-text-color;
  --third-text-color: $third-text-color;
  --normal-text-color: $normal-text-color;
  --border-color: $border-color;
  --selection-color: $selection-color;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: $dark-background-color;
    --magic-background-color: $dark-magic-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;
  }
}


.dark-mode {
  --background-color: $dark-background-color;
  --magic-background-color: $dark-magic-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;
}

.light-mode {
  --background-color: $background-color;
  --magic-background-color: $magic-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;
}