hexo-theme-keep/source/css/common/code-block/code-theme.styl

@import "../variables.styl"

$code-foreground = lighten($text-color-3, 2%)
$code-background = darken($background-color-1, 5%)
$highlight-foreground = lighten($text-color-3, 2%)
$highlight-background = darken($background-color-1, 2%)
$highlight-gutter-color = lighten($text-color-3, 5%)
$highlight-gutter-bg-color = darken($background-color-1, 5%)
$highlight-comment = #8e908c
$highlight-red = #c82829
$highlight-orange = #f5871f
$highlight-yellow = #eab700
$highlight-green = #718c00
$highlight-aqua = #3e999f
$highlight-blue = #4271ae
$highlight-purple = #8959a8
$highlight-deletion = #fdd
$highlight-addition = #dfd

$dark-code-foreground = lighten($dark-text-color-3, 2%)
$dark-code-background = darken($dark-background-color-1, 10%)
$dark-highlight-foreground = lighten($dark-text-color-3, 2%)
$dark-highlight-background = darken($dark-background-color-1, 8%)
$dark-highlight-gutter-color = lighten($dark-text-color-3, 5%)
$dark-highlight-gutter-bg-color = darken($dark-background-color-1, 10%)
$dark-highlight-comment = #969896
$dark-highlight-red = #cc6666
$dark-highlight-orange = #de935f
$dark-highlight-yellow = #f0c674
$dark-highlight-green = #b5bd68
$dark-highlight-aqua = #8abeb7
$dark-highlight-blue = #81a2be
$dark-highlight-purple = #b294bb
$dark-highlight-deletion = #008000
$dark-highlight-addition = #800000

code-theme(mode) {
  --code-foreground mode == 'light' ? $code-foreground : $dark-code-foreground
  --code-background mode == 'light' ? $code-background : $dark-code-background
  --highlight-background mode == 'light' ? $highlight-background : $dark-highlight-background
  --highlight-foreground mode == 'light' ? $highlight-foreground : $dark-highlight-foreground
  --highlight-comment mode == 'light' ? $highlight-comment : $dark-highlight-comment
  --highlight-red mode == 'light' ? $highlight-red : $dark-highlight-red
  --highlight-orange mode == 'light' ? $highlight-orange : $dark-highlight-orange
  --highlight-yellow mode == 'light' ? $highlight-yellow : $dark-highlight-yellow
  --highlight-green mode == 'light' ? $highlight-green : $dark-highlight-green
  --highlight-aqua mode == 'light' ? $highlight-aqua : $dark-highlight-aqua
  --highlight-blue mode == 'light' ? $highlight-blue : $dark-highlight-blue
  --highlight-purple mode == 'light' ? $highlight-purple : $dark-highlight-purple
  --highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $dark-highlight-gutter-color
  --highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $dark-highlight-gutter-bg-color
}


:root {
  code-theme('light')
}

@media (prefers-color-scheme light) {
  :root {
    code-theme('light')
  }
}

@media (prefers-color-scheme dark) {
  :root {
    code-theme('dark')
  }
}

.light-mode {
  code-theme('light')
}

.dark-mode {
  code-theme('dark')
}