diff --git a/_config.yml b/_config.yml index 9d2b585..f703b64 100644 --- a/_config.yml +++ b/_config.yml @@ -159,6 +159,7 @@ post: code_block: enable: false # Option values: true | false style: default # Option values: default | mac + highlight_theme: default # Option values: default | obsidian # --------------------------------------------------------------------------------------- # Table of Contents in the Sidebar diff --git a/source/css/common/code-block/code-block.styl b/source/css/common/code-block/code-block.styl index 66f546e..c7c82ff 100644 --- a/source/css/common/code-block/code-block.styl +++ b/source/css/common/code-block/code-block.styl @@ -10,30 +10,32 @@ box-sizing border-box width 100% padding 0.3rem 0.4rem - background var(--background-color-3) + background var(--toolbar-background) border-top-left-radius 0.3rem border-top-right-radius 0.3rem + color var(--toolbar-foreground) + &.folded { border-bottom-right-radius 0.3rem border-bottom-left-radius 0.3rem } + .code-lang { justify-content flex-start margin-left 0.2rem - color var(--text-color-3) font-weight 600 font-size 0.9rem font-family "Source Code Pro", consolas, Menlo } + .tool { disable-user-select() cursor pointer i { - color var(--text-color-2) font-size 0.8rem } } @@ -64,6 +66,7 @@ } } + .code-tools-box { justify-content flex-end padding 0.4rem 0.6rem 0.7rem 0.4rem @@ -80,6 +83,7 @@ content '' } + &.folded { border-bottom-right-radius 0 border-bottom-left-radius 0 @@ -89,14 +93,17 @@ } } + .code-lang { order 1 color #bbb } + .fold { order 2 padding 0 0.1rem 0 0.6rem + i { color #ccc } diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl index 04698de..1435002 100644 --- a/source/css/common/code-block/code-theme.styl +++ b/source/css/common/code-block/code-theme.styl @@ -1,40 +1,89 @@ @import "../variables.styl" +// A single line block of code $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 + + +if (hexo-config('code_block.highlight_theme') == 'obsidian') { + + $toolbar-foreground = #b5b5b5 + $toolbar-background = #3a3f40 + $highlight-foreground = #e8e2bb + $highlight-background = #273036 + $highlight-gutter-color = #7a979a + $highlight-gutter-bg-color = #273130 + $highlight-comment = #76888e + $highlight-red = #ee5758 + $highlight-orange = #ec7600 + $highlight-yellow = #ffcd22 + $highlight-green = #93c763 + $highlight-aqua = #458383 + $highlight-blue = #6e95bd + $highlight-purple = #b18bb7 + $highlight-deletion = #ff9999 + $highlight-addition = #ccff99 + + $dark-toolbar-foreground = darken($toolbar-foreground, 2%) + $dark-toolbar-background = darken($toolbar-background, 2%) + $dark-highlight-foreground = darken($highlight-foreground, 10%) + $dark-highlight-background = darken($highlight-background, 2%) + $dark-highlight-gutter-color = lighten($highlight-gutter-color, 1%) + $dark-highlight-gutter-bg-color = darken($highlight-gutter-bg-color, 2%) + $dark-highlight-comment = $highlight-comment + $dark-highlight-red = darken($highlight-red, 2%) + $dark-highlight-orange = darken($highlight-orange, 2%) + $dark-highlight-yellow = darken($highlight-yellow, 2%) + $dark-highlight-green = darken($highlight-green, 2%) + $dark-highlight-aqua = darken($highlight-aqua, 2%) + $dark-highlight-blue = darken($highlight-blue, 2%) + $dark-highlight-purple = darken($highlight-purple, 2%) + $dark-highlight-deletion = darken($highlight-deletion, 2%) + $dark-highlight-addition = darken($highlight-addition, 2%) + +} else { + + $toolbar-foreground = $text-color-3 + $toolbar-background = $background-color-3 + $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-toolbar-foreground = $dark-text-color-3 + $dark-toolbar-background = $dark-background-color-3 + $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) { + --toolbar-foreground mode == 'light' ? $toolbar-foreground : $dark-toolbar-foreground + --toolbar-background mode == 'light' ? $toolbar-background : $dark-toolbar-background --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 diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl index c105fff..5a0b4aa 100644 --- a/source/css/common/code-block/highlight.styl +++ b/source/css/common/code-block/highlight.styl @@ -8,7 +8,7 @@ $code-block { font-size 0.96rem line-height 1.5rem background var(--highlight-background) - -webkit-text-size-adjust none + not-text-size-adjust() } @@ -40,7 +40,8 @@ pre { .highlight { @extend $code-block - border-radius 0.1rem + border-bottom-left-radius 0.1rem + border-bottom-right-radius 0.1rem pre { margin 0 @@ -95,24 +96,28 @@ pre { .line { height 1.5rem - color var(--text-color-3) + color var(--highlight-foreground) .attr { - color var(--text-color-3) + color var(--highlight-foreground) } .string { - color var(--text-color-3) + color var(--highlight-foreground) } } } .gutter { - -webkit-user-select none - -moz-user-select none - -ms-user-select none - user-select none + disable-user-select() + color var(--highlight-gutter-color) + background var(--highlight-gutter-bg-color) + + .line { + color var(--highlight-gutter-color) + } + } .gist table { @@ -123,7 +128,6 @@ pre { } } -// For diff highlight pre .deletion { background var(--highlight-deletion) } @@ -157,6 +161,10 @@ pre { color var(--highlight-red) } + .property { + color var(--highlight-blue) + } + .number .preprocessor .built_in diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl index b947e83..735a79b 100644 --- a/source/css/common/keep-theme.styl +++ b/source/css/common/keep-theme.styl @@ -58,3 +58,12 @@ disable-user-select() { -webkit-user-select none user-select none } + + +not-text-size-adjust() { + -ms-text-size-adjust none + -moz-text-size-adjust none + -webkit-text-size-adjust none +} + +