diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index e067372c5..2ebdb900c 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -32,4 +32,4 @@ jobs: run: npm install - name: Build - run: hugo -v --source=exampleSite --themesDir ../.. --gc + run: npm run build diff --git a/README.md b/README.md index 2b61d42d8..624c1443f 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,7 @@ the DoIt theme may be more suitable for you. ### Appearance and Layout * **Responsive** layout -* **Light/Dark/Black** mode +* **Light/Dark** mode * Globally consistent **design language** * **Pagination** supported * Easy-to-use and self-expanding **table of contents** diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss index 718bb4130..0074ee09b 100644 --- a/assets/css/_core/_base.scss +++ b/assets/css/_core/_base.scss @@ -33,13 +33,6 @@ html { ::selection { background-color: $selection-color; - - [theme=dark] & { - background-color: $selection-color-dark; - } - [theme=black] & { - background-color: $selection-color-black; - } } body { @@ -47,14 +40,6 @@ body { color: $global-font-color; @include overflow-wrap(break-word); scrollbar-color: auto; - &[theme=dark] { - color: $global-font-color-dark; - background-color: $global-background-color-dark; - } - &[theme=black] { - color: $global-font-color-black; - background-color: $global-background-color-black; - } } @include ms; diff --git a/assets/css/_mixin/_link.scss b/assets/css/_mixin/_link.scss index 3423eefeb..9cd00c494 100644 --- a/assets/css/_mixin/_link.scss +++ b/assets/css/_mixin/_link.scss @@ -3,24 +3,16 @@ text-decoration: none; color: if($light, $global-link-color, $single-link-color); - - [theme=dark] & { - color: if($dark, $global-link-color-dark, $single-link-color-dark); - } - [theme=black] & { - color: if($dark, $global-link-color-black, $single-link-color-black); + .dark & { + color: if($dark, $global-link-color, $single-link-color); } } a:active, a:hover { color: if($light, $global-link-hover-color, $single-link-hover-color); - - [theme=dark] & { - color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark); - } - [theme=black] & { - color: if($dark, $global-link-hover-color-black, $single-link-hover-color-black); + .dark & { + color: if($dark, $global-link-hover-color, $single-link-hover-color); } } } diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss index 0e0c0dd33..17f9a5e76 100644 --- a/assets/css/_page/_home.scss +++ b/assets/css/_page/_home.scss @@ -58,13 +58,6 @@ margin: 0; padding: .5rem; color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } } } @@ -85,15 +78,6 @@ color: $global-font-color; border-bottom: 3px dashed $global-border-color; - [theme=dark] & { - color: $global-font-color-dark; - border-bottom: 3px dashed $global-border-color-dark; - } - [theme=black] & { - color: $global-font-color-black; - border-bottom: 3px dashed $global-border-color-black; - } - .featured-image-preview { width: 100%; padding: 30% 0 0; @@ -131,12 +115,6 @@ @include overflow-wrap(break-word); color: $global-font-secondary-color; - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } h2, h3, @@ -162,13 +140,6 @@ b, strong { color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } } diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss index 9fdce4c7f..c1a611ae3 100644 --- a/assets/css/_page/_single.scss +++ b/assets/css/_page/_single.scss @@ -25,14 +25,6 @@ display: inline-block; } - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - - [theme=black] & { - color: $global-font-secondary-color-black; - } - @include link(false, true); .author { @@ -92,16 +84,8 @@ h4, h5, h6 { - font-weight: bold; + font-weight: $single-h-font-weight; margin: 1.2rem 0; - - [theme=dark] & { - font-weight: bolder; - } - - [theme=black] & { - font-weight: bolder; - } } >h2, @@ -113,14 +97,6 @@ content: "|"; margin-right: .3125rem; color: $single-link-color; - - [theme=dark] & { - color: $single-link-color-dark; - } - - [theme=black] & { - color: $single-link-color-black; - } } } @@ -135,14 +111,7 @@ b, strong { font-weight: bold; - - [theme=dark] & { - color: #ddd; - } - - [theme=black] & { - color: #ddd; - } + color: $single-content-strong-color; } @include link(false, false); @@ -150,25 +119,16 @@ a { @include overflow-wrap(break-word); - [theme=dark] & b, - [theme=dark] & strong { - color: $single-link-color-dark; - } - - [theme=black] & b, - [theme=black] & strong { - color: $single-link-color-black; + & b, + & strong { + color: $single-link-color; } } - [theme=dark] a:hover b, - [theme=dark] a:hover strong { - color: $single-link-hover-color-dark; - } - [theme=black] a:hover b, - [theme=black] a:hover strong { - color: $single-link-hover-color-black; + a:hover b, + a:hover strong { + color: $single-link-hover-color; } ul, @@ -188,21 +148,6 @@ color: $global-font-secondary-color; } - [theme=dark] & { - background: $code-background-color-dark; - - rt { - color: $global-font-secondary-color-dark; - } - } - - [theme=black] & { - background: $code-background-color-black; - - rt { - color: $global-font-secondary-color-black; - } - } } .table-wrapper { @@ -211,26 +156,10 @@ @if $custom-scrollbar { &::-webkit-scrollbar { background-color: $table-background-color; - - [theme=dark] & { - background-color: $table-background-color-dark; - } - - [theme=black] & { - background-color: $table-background-color-black; - } } ::-webkit-scrollbar-corner { background-color: $table-background-color; - - [theme=dark] & { - background-color: $table-background-color-dark; - } - - [theme=black] & { - background-color: $table-background-color-black; - } } } @@ -242,24 +171,8 @@ background: $table-background-color; border-collapse: collapse; - [theme=dark] & { - background: $table-background-color-dark; - } - - [theme=black] & { - background: $table-background-color-dark; - } - thead { background: $table-thead-color; - - [theme=dark] & { - background-color: $table-thead-color-dark; - } - - [theme=black] & { - background-color: $table-thead-color-black; - } } td:nth-child(2).lntd { @@ -272,15 +185,8 @@ th, td { padding: .3rem 1rem; - border: 1px solid darken($table-thead-color, 2%); - - [theme=dark] & { - border-color: darken($table-thead-color-dark, 2%); - } + border: 1px solid $table-border-color; - [theme=black] & { - border-color: darken($table-thead-color-black, 2%); - } } th[role=columnheader]:not(.no-sort) { @@ -295,14 +201,6 @@ border-style: solid; border-color: $global-font-color transparent; - [theme=dark] & { - border-color: $global-font-color-dark transparent; - } - - [theme=black] & { - border-color: $global-font-color-black transparent; - } - visibility: hidden; opacity: 0; -ms-user-select: none; @@ -357,33 +255,16 @@ blockquote { display: block; - border-left: .5rem solid $blockquote-color; - background-color: rgba($blockquote-color, .2); + border-left: .25rem solid $blockquote-color; + background-color: $blockquote-bg-color; padding: .25rem .75rem; margin: 1rem 0; - [theme=dark] & { - border-left-color: $blockquote-color-dark; - background-color: rgba($blockquote-color-dark, .2); - } - - [theme=black] & { - border-left-color: $blockquote-color-black; - background-color: rgba($blockquote-color-black, .2); - } } .footnotes { color: $global-font-secondary-color; - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - - [theme=black] & { - color: $global-font-secondary-color-black; - } - p { margin: .25rem 0; } @@ -419,13 +300,6 @@ border-top: 3px dashed $global-border-color; border-bottom: none; - [theme=dark] & { - border-top: 3px dashed $global-border-color-dark; - } - - [theme=black] & { - border-top: 3px dashed $global-border-color-black; - } } kbd { @@ -440,21 +314,6 @@ font-family: $code-font-family; color: $code-color; - [theme=dark] & { - background-color: $global-background-color-dark; - border: 1px solid $global-border-color-dark; - border-bottom-color: $global-border-color-dark; - @include box-shadow(inset 0 -1px 0 $global-border-color-dark); - color: $code-color-dark; - } - - [theme=black] & { - background-color: $global-background-color-black; - border: 1px solid $global-border-color-black; - border-bottom-color: $global-border-color-black; - @include box-shadow(inset 0 -1px 0 $global-border-color-black); - color: $code-color-black; - } } .version { @@ -479,16 +338,13 @@ white-space: pre-wrap; } - --ti-cursor-font-family: $global-font-family; - --ti-cursor-font-size: $global-font-size; - --ti-cursor-font-weight: $global-font-weight; - --ti-cursor-line-height: $global-line-height; - --ti-cursor-color: $global-font-secondary-color; + --ti-cursor-font-family: #{$global-font-family}; + --ti-cursor-font-size: #{$global-font-size}; + --ti-cursor-font-weight: #{$global-font-weight}; + --ti-cursor-line-height: #{$global-line-height}; + --ti-cursor-color: #{$global-font-secondary-color}; --ti-cursor-margin-left: 0; - [theme=dark] & { - --ti-cursor-color: $global-font-secondary-color-dark; - } } .lg-toolbar .lg-icon::after { diff --git a/assets/css/_page/_taxonomy.scss b/assets/css/_page/_taxonomy.scss index e6fd79de6..07df2ef5c 100644 --- a/assets/css/_page/_taxonomy.scss +++ b/assets/css/_page/_taxonomy.scss @@ -1,16 +1,8 @@ .introduction blockquote { display: block; - border-left: .5rem solid $blockquote-color; - background-color: rgba($blockquote-color, .2); + border-left: .25rem solid $blockquote-color; + background-color: $blockquote-bg-color; padding: .25rem .75rem; margin: 1rem 0; - [theme=dark] & { - border-left-color: $blockquote-color-dark; - background-color: rgba($blockquote-color-dark, .2); - } - [theme=black] & { - border-left-color: $blockquote-color-black; - background-color: rgba($blockquote-color-black, .2); - } } \ No newline at end of file diff --git a/assets/css/_partial/_archive/_tags.scss b/assets/css/_partial/_archive/_tags.scss index 49b57d631..5b36333d2 100644 --- a/assets/css/_partial/_archive/_tags.scss +++ b/assets/css/_partial/_archive/_tags.scss @@ -18,13 +18,6 @@ sup { color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } } } diff --git a/assets/css/_partial/_archive/_terms.scss b/assets/css/_partial/_archive/_terms.scss index 6f1415ad9..e0c344db0 100644 --- a/assets/css/_partial/_archive/_terms.scss +++ b/assets/css/_partial/_archive/_terms.scss @@ -53,25 +53,13 @@ white-space: nowrap; text-overflow: ellipsis; + color: $global-link-color; + &:hover { color: $global-link-hover-color; background-color: transparent; } - [theme=dark] & { - color: $global-link-color-dark; - - &:hover { - color: $global-link-hover-color-dark; - } - } - [theme=black] & { - color: $global-link-color-black; - - &:hover { - color: $global-link-hover-color-black; - } - } } .archive-item-date { @@ -79,12 +67,6 @@ color: $global-font-secondary-color; font-variant-numeric: tabular-nums; min-width: fit-content; - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } .more-post { diff --git a/assets/css/_partial/_cookieconsent.scss b/assets/css/_partial/_cookieconsent.scss index 74969c2cf..94296aad1 100644 --- a/assets/css/_partial/_cookieconsent.scss +++ b/assets/css/_partial/_cookieconsent.scss @@ -3,22 +3,7 @@ color: $global-font-color; &:hover, &:focus { - background-color: #ccc; - } - - [theme=dark] & { - color: $global-font-color; - - &:hover, &:focus { - background-color: #fff; - } - } - [theme=black] & { - color: $global-font-color; - - &:hover, &:focus { - background-color: #fff; - } + background-color: $cookie-background-color; } } } diff --git a/assets/css/_partial/_details.scss b/assets/css/_partial/_details.scss index 6ca1ffd50..0c4bc78e5 100644 --- a/assets/css/_partial/_details.scss +++ b/assets/css/_partial/_details.scss @@ -8,13 +8,6 @@ .details-icon > svg { color: $global-font-secondary-color; @include transition(transform 0.2s ease); - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } .details-content { diff --git a/assets/css/_partial/_fixed-button.scss b/assets/css/_partial/_fixed-button.scss index c906a660d..69cb08dc6 100644 --- a/assets/css/_partial/_fixed-button.scss +++ b/assets/css/_partial/_fixed-button.scss @@ -11,7 +11,8 @@ line-height: 1.3rem; padding: .6rem .6rem; color: $global-font-secondary-color; - background: $global-border-color; + // background: $global-border-color; // 原 light $global-border-color dark,black $header-background-color + background: $header-background-color; @include border-radius(2rem); @include transition(color 0.4s ease); @@ -25,23 +26,6 @@ &:active, &:focus, &:hover { outline: none; } - - [theme=dark] & { - color: $global-font-secondary-color-dark; - background: $header-background-color-dark; - - &:hover, &:active { - color: $global-font-color-dark; - } - } - [theme=black] & { - color: $global-font-secondary-color-black; - background: $header-background-color-black; - - &:hover, &:active { - color: $global-font-color-black; - } - } } #back-to-top-button { diff --git a/assets/css/_partial/_header.scss b/assets/css/_partial/_header.scss index 1c6b2196b..5a3713d7f 100644 --- a/assets/css/_partial/_header.scss +++ b/assets/css/_partial/_header.scss @@ -4,13 +4,6 @@ header { background-color: $header-background-color; @include transition(box-shadow 0.3s ease); - [theme=dark] & { - background-color: $header-background-color-dark; - } - [theme=black] & { - background-color: $header-background-color-black; - } - .logo { display: inline-block; min-height: 1.5em; @@ -94,13 +87,6 @@ header { background-color: $header-background-color; vertical-align: baseline !important; @include transition(width 0.3s ease); - - [theme=dark] & { - background-color: $header-background-color-dark; - } - [theme=black] & { - background-color: $header-background-color-black; - } } @include placeholder(transparent); @@ -135,34 +121,10 @@ header { padding: 0 2rem 0 2rem; } - [theme=dark] & { - input { - color: $global-font-color-dark; - background-color: $search-background-color-dark; - } - - @include placeholder($global-font-secondary-color-dark); - } - [theme=black] & { - input { - color: $global-font-color-black; - background-color: $search-background-color-black; - } - - @include placeholder($global-font-secondary-color-black); - } - @include placeholder($global-font-secondary-color); .search-button { color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } .search-clear:hover { @@ -213,13 +175,7 @@ header { &.delimiter { border-left: 1.5px solid $global-font-color; - - [theme=dark] & { - border-left-color: $global-border-color-dark; - } - [theme=black] & { - border-left-color: $global-border-color-black; - } + border-left-color: $header-delimiter; } &.language { @@ -238,13 +194,6 @@ header { a.active { font-weight: 900; color: $header-hover-color; - - [theme=dark] & { - color: $header-hover-color-dark; - } - [theme=black] & { - color: $header-hover-color-black; - } } } } @@ -294,13 +243,6 @@ header { height: 2px; @include border-radius(3px); @include transition(all 0.3s ease-in-out); - - [theme=dark] & { - background: $global-font-color-dark; - } - [theme=black] & { - background: $global-font-color-black; - } } span:nth-child(1) { @@ -369,15 +311,6 @@ header { &.active { display: block; } - - [theme=dark] & { - background: $header-background-color-dark; - border-top-color: $global-border-color-dark; - } - [theme=black] & { - background: $header-background-color-black; - border-top-color: $global-border-color-black; - } } } @@ -421,13 +354,6 @@ header { right: 0 !important; background-color: $global-background-color; - [theme=dark] & { - background-color: $global-background-color-dark; - } - [theme=black] & { - background-color: $global-background-color-black; - } - .suggestions { overflow-y: auto; max-height: calc(100vh - #{$header-height}); @@ -454,13 +380,6 @@ header { float: right; text-align: right; color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } .suggestion-context { @@ -471,36 +390,15 @@ header { text-overflow: ellipsis; @include overflow-wrap(break-word); color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } em { font-style: normal; background-color: $selection-color; - - [theme=dark] & { - background-color: $selection-color-dark; - } - [theme=black] & { - background-color: $selection-color-black; - } } &.cursor { - background: darken($code-background-color, 5%); - - [theme=dark] & { - background: lighten($code-background-color-dark, 5%); - } - [theme=black] & { - background: lighten($code-background-color-black, 5%); - } + background: $code-background-color-darken-5; } &:hover { @@ -515,13 +413,7 @@ header { .search-query { font-weight: bold; - - [theme=dark] & { - color: #ddd; - } - [theme=black] & { - color: #ddd; - } + color: $search-empty-font-color; } } @@ -531,13 +423,6 @@ header { font-size: .8rem; color: $global-font-secondary-color; - [theme=dark] { - color: $global-font-secondary-color-dark; - } - [theme=black] { - color: $global-font-secondary-color-black; - } - @include link(false, false); a { diff --git a/assets/css/_partial/_icon.scss b/assets/css/_partial/_icon.scss index 49d23842f..362529e3b 100644 --- a/assets/css/_partial/_icon.scss +++ b/assets/css/_partial/_icon.scss @@ -23,12 +23,6 @@ svg.icon { width: 1.25em; vertical-align: -0.125em; color: $global-font-color default; - [theme=dark] & { - color: $global-font-color-dark default; - } - [theme=black] & { - color: $global-font-color-black default; - } } svg.icon > path { diff --git a/assets/css/_partial/_pagination.scss b/assets/css/_partial/_pagination.scss index f6fed0e82..6294cab95 100644 --- a/assets/css/_partial/_pagination.scss +++ b/assets/css/_partial/_pagination.scss @@ -15,12 +15,6 @@ padding: 5px 5px; text-decoration: none; @include transition(0.3s); - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } li { @@ -38,12 +32,6 @@ color: $pagination-link-hover-color; } - [theme=dark] &:hover a { - color: $pagination-link-hover-color-dark; - } - [theme=black] &:hover a { - color: $pagination-link-hover-color-black; - } &:before, &:after { @@ -56,15 +44,6 @@ bottom: 0px; } - [theme=dark] &:before, - [theme=dark] &:after { - background: $pagination-link-hover-color-dark; - } - [theme=black] &:before, - [theme=black] &:after { - background: $pagination-link-hover-color-black; - } - &:before .active, &:after .active { width: 100%; @@ -91,13 +70,6 @@ color: $pagination-link-hover-color; } - [theme=dark] & a { - color: $pagination-link-hover-color-dark; - } - [theme=black] & a { - color: $pagination-link-hover-color-black; - } - &:before, &:after { width: 60%; diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss index b90184b75..d3d7d7249 100644 --- a/assets/css/_partial/_single/_code.scss +++ b/assets/css/_partial/_single/_code.scss @@ -1,5 +1,5 @@ code { - display:inline-block; + display: inline-block; max-width: 100%; padding: 0 .4rem; @include overflow-wrap(break-word); @@ -7,13 +7,6 @@ code { font-size: $code-font-size; font-family: $code-font-family; color: $code-color; - - [theme=dark] & { - color: $code-color-dark; - } - [theme=black] & { - color: $code-color-black; - } } pre { @@ -33,26 +26,25 @@ pre { } } -code, pre, .highlight table, .highlight tr, .highlight td { - background: $code-background-color; - - [theme=dark] & { - background: $code-background-color-dark; - } - [theme=black] & { - background: $code-background-color-black; - } +code, +pre, +.highlight table, +.highlight tr, +.highlight td { + background-color: $code-background-color !important; } -.highlight, .gist { +.highlight, +.gist { font-family: $code-font-family; font-size: $code-font-size; .table-wrapper { - > table, - > table thead, - > table tr, - > table td { + + >table, + >table thead, + >table tr, + >table td { margin: 0; padding: 0; border: none !important; @@ -64,7 +56,7 @@ code, pre, .highlight table, .highlight tr, .highlight td { line-height: 1.4em; margin: .5rem 0; - > .chroma { + >.chroma { position: relative; .code-header { @@ -76,16 +68,7 @@ code, pre, .highlight table, .highlight tr, .highlight td { font-family: $global-font-family; font-weight: bold; color: $code-info-color; - background: darken($code-background-color, 8%); - - [theme=dark] & { - color: $code-info-color-dark; - background: darken($code-background-color-dark, 6%); - } - [theme=black] & { - color: $code-info-color-black; - background: darken($code-background-color-black, 6%); - } + background: $code-background-color-code-header; &:hover { cursor: pointer; @@ -127,25 +110,12 @@ code, pre, .highlight table, .highlight tr, .highlight td { .hl { display: block; - background-color: darken($code-background-color, 10%); - - [theme=dark] & { - background-color: darken($code-background-color-dark, 5%); - } - [theme=black] & { - background-color: darken($code-background-color-black, 5%); - } + background-color: $code-background-color-code-hl; } - .ln, .lnt { + .ln, + .lnt { color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } - [theme=black] & { - color: $global-font-secondary-color-black; - } } .arrow { @@ -164,13 +134,6 @@ code, pre, .highlight table, .highlight tr, .highlight td { &:hover { cursor: pointer; color: $global-link-hover-color; - - [theme=dark] & { - color: $global-link-hover-color-dark; - } - [theme=black] & { - color: $global-link-hover-color-black; - } } } @@ -182,16 +145,9 @@ code, pre, .highlight table, .highlight tr, .highlight td { &.open { .code-header { - background: darken($code-background-color, 3%); - - [theme=dark] & { - background: darken($code-background-color-dark, 3%); - } - [theme=black] & { - background: darken($code-background-color-black, 3%); - } + background: $code-header-color; } - + .table-wrapper { max-height: none; } @@ -210,362 +166,53 @@ code, pre, .highlight table, .highlight tr, .highlight td { } } - /* Comment */ .c, - /* CommentHashbang */ .ch, - /* CommentMultiline */ .cm, - /* CommentSingle */ .c1, - /* CommentSpecial */ .cs, - /* CommentPreproc */ .cp, - /* CommentPreprocFile */ .cpf { font-style: italic } - /* GenericUnderline */ .gl { text-decoration: underline } - - @each $class, $color in $code-highlight-color-map { - .#{$class} { color: $color; } + /* Comment */ + .c, + /* CommentHashbang */ + .ch, + /* CommentMultiline */ + .cm, + /* CommentSingle */ + .c1, + /* CommentSpecial */ + .cs, + /* CommentPreproc */ + .cp, + /* CommentPreprocFile */ + .cpf { + font-style: italic } - [theme=dark] & { - @each $class, $color in $code-highlight-color-map-dark { - .#{$class} { color: $color; } - } - } - [theme=black] & { - @each $class, $color in $code-highlight-color-map-black { - .#{$class} { color: $color; } - } + /* GenericUnderline */ + .gl { + text-decoration: underline } + + // @each $class, $color in $code-highlight-color-map { + // .#{$class} { color: $color; } + // } + + // [theme=dark] & { + // @each $class, $color in $code-highlight-color-map-dark { + // .#{$class} { color: $color; } + // } + // } } .gist { - .gist-file, .gist-data, .gist-meta { + + .gist-file, + .gist-data, + .gist-meta { border: none; } .gist-meta { padding: .4rem .8rem; - background-color: darken($code-background-color, 5%); + background-color: $code-background-color-darken-5; @include link(false, false); - [theme=dark] & { - background-color: darken($code-background-color-dark, 5%); - } - [theme=black] & { - background-color: darken($code-background-color-dark, 5%); - } } - [theme=dark] & { - // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css - .highlight { - background: #141414; - } - .blob-num, - .blob-code-inner, - .highlight, - .pl-enm, - .pl-ko, - .pl-mo, - .pl-mp1 .pl-sf, - .pl-ms, - .pl-pdc1, - .pl-scp, - .pl-smc, - .pl-som, - .pl-va, - .pl-vpf, - .pl-vpu, - .pl-mdr { - color: #aab1bf; - } - .pl-mb, - .pl-pdb { - font-weight: 700; - } - .pl-c, - .pl-c span, - .pl-pdc { - color: #5b6270; - font-style: italic; - } - .pl-sr .pl-cce { - color: #56b5c2; - font-weight: 400; - } - .pl-ef, - .pl-en, - .pl-enf, - .pl-eoai, - .pl-kos, - .pl-mh .pl-pdh, - .pl-mr { - color: #61afef; - } - .pl-ens, - .pl-vi { - color: #be5046; - } - .pl-enti, - .pl-mai .pl-sf, - .pl-ml, - .pl-sf, - .pl-sr, - .pl-sr .pl-sra, - .pl-src, - .pl-st, - .pl-vo { - color: #56b5c2; - } - .pl-eoi, - .pl-mri, - .pl-pds, - .pl-pse .pl-s1, - .pl-s, - .pl-s1 { - color: #97c279; - } - .pl-k, - .pl-kolp, - .pl-mc, - .pl-pde { - color: #c578dd; - } - .pl-mi, - .pl-pdi { - color: #c578dd; - font-style: italic; - } - .pl-mp, - .pl-stp { - color: #818896; - } - .pl-mdh, - .pl-mdi, - .pl-mdr { - font-weight: 400; - } - .pl-mdht, - .pl-mi1 { - color: #97c279; - background: #020; - } - .pl-md, - .pl-mdhf { - color: #df6b75; - background: #200; - } - .pl-corl { - color: #df6b75; - text-decoration: underline; - } - .pl-ib { - background: #df6b75; - } - .pl-ii { - background: #e0c184; - color: #fff; - } - .pl-iu { - background: #e05151; - } - .pl-ms1 { - color: #aab1bf; - background: #373b41; - } - .pl-c1, - .pl-cn, - .pl-e, - .pl-eoa, - .pl-eoac, - .pl-eoac .pl-pde, - .pl-kou, - .pl-mm, - .pl-mp .pl-s3, - .pl-mq, - .pl-s3, - .pl-sok, - .pl-sv, - .pl-mb { - color: #d19965; - } - .pl-enc, - .pl-entc, - .pl-pse .pl-s2, - .pl-s2, - .pl-sc, - .pl-smp, - .pl-sr .pl-sre, - .pl-stj, - .pl-v, - .pl-pdb { - color: #e4bf7a; - } - .pl-ent, - .pl-entl, - .pl-entm, - .pl-mh, - .pl-pdv, - .pl-smi, - .pl-sol, - .pl-mdh, - .pl-mdi { - color: #df6b75; - } - } - [theme=black] & { - // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css - .highlight { - background: #141414; - } - .blob-num, - .blob-code-inner, - .highlight, - .pl-enm, - .pl-ko, - .pl-mo, - .pl-mp1 .pl-sf, - .pl-ms, - .pl-pdc1, - .pl-scp, - .pl-smc, - .pl-som, - .pl-va, - .pl-vpf, - .pl-vpu, - .pl-mdr { - color: #aab1bf; - } - .pl-mb, - .pl-pdb { - font-weight: 700; - } - .pl-c, - .pl-c span, - .pl-pdc { - color: #5b6270; - font-style: italic; - } - .pl-sr .pl-cce { - color: #56b5c2; - font-weight: 400; - } - .pl-ef, - .pl-en, - .pl-enf, - .pl-eoai, - .pl-kos, - .pl-mh .pl-pdh, - .pl-mr { - color: #61afef; - } - .pl-ens, - .pl-vi { - color: #be5046; - } - .pl-enti, - .pl-mai .pl-sf, - .pl-ml, - .pl-sf, - .pl-sr, - .pl-sr .pl-sra, - .pl-src, - .pl-st, - .pl-vo { - color: #56b5c2; - } - .pl-eoi, - .pl-mri, - .pl-pds, - .pl-pse .pl-s1, - .pl-s, - .pl-s1 { - color: #97c279; - } - .pl-k, - .pl-kolp, - .pl-mc, - .pl-pde { - color: #c578dd; - } - .pl-mi, - .pl-pdi { - color: #c578dd; - font-style: italic; - } - .pl-mp, - .pl-stp { - color: #818896; - } - .pl-mdh, - .pl-mdi, - .pl-mdr { - font-weight: 400; - } - .pl-mdht, - .pl-mi1 { - color: #97c279; - background: #020; - } - .pl-md, - .pl-mdhf { - color: #df6b75; - background: #200; - } - .pl-corl { - color: #df6b75; - text-decoration: underline; - } - .pl-ib { - background: #df6b75; - } - .pl-ii { - background: #e0c184; - color: #fff; - } - .pl-iu { - background: #e05151; - } - .pl-ms1 { - color: #aab1bf; - background: #373b41; - } - .pl-c1, - .pl-cn, - .pl-e, - .pl-eoa, - .pl-eoac, - .pl-eoac .pl-pde, - .pl-kou, - .pl-mm, - .pl-mp .pl-s3, - .pl-mq, - .pl-s3, - .pl-sok, - .pl-sv, - .pl-mb { - color: #d19965; - } - .pl-enc, - .pl-entc, - .pl-pse .pl-s2, - .pl-s2, - .pl-sc, - .pl-smp, - .pl-sr .pl-sre, - .pl-stj, - .pl-v, - .pl-pdb { - color: #e4bf7a; - } - .pl-ent, - .pl-entl, - .pl-entm, - .pl-mh, - .pl-pdv, - .pl-smi, - .pl-sol, - .pl-mdh, - .pl-mdi { - color: #df6b75; - } - } -} +} \ No newline at end of file diff --git a/assets/css/_partial/_single/_footer.scss b/assets/css/_partial/_single/_footer.scss index 6587eacb3..eef0c44a7 100644 --- a/assets/css/_partial/_single/_footer.scss +++ b/assets/css/_partial/_single/_footer.scss @@ -5,13 +5,6 @@ border-bottom: 1px solid $global-border-color; padding: 1rem 0 0.3rem; - [theme="dark"] & { - border-bottom: 1px solid $global-border-color-dark; - } - [theme="black"] & { - border-bottom: 1px solid $global-border-color-black; - } - .post-info-line { display: flex; justify-content: space-between; @@ -20,13 +13,6 @@ font-size: 0.8em; color: $global-font-secondary-color; - [theme="dark"] & { - color: $global-font-secondary-color-dark; - } - [theme="black"] & { - color: $global-font-secondary-color-black; - } - @include link(false, false); } @@ -34,13 +20,6 @@ font-size: 0.8em; color: $global-font-secondary-color; - [theme="dark"] & { - color: $global-font-secondary-color-dark; - } - [theme="black"] & { - color: $global-font-secondary-color-black; - } - @include link(false, false); } @@ -70,12 +49,6 @@ } :hover { color: $global-link-hover-color; - [theme=dark] & { - color: $global-link-hover-color-dark; - } - [theme=black] & { - color: $global-link-hover-color-black; - } } } diff --git a/assets/css/_partial/_single/_friend.scss b/assets/css/_partial/_single/_friend.scss index 5ee27b27d..fcaff6683 100644 --- a/assets/css/_partial/_single/_friend.scss +++ b/assets/css/_partial/_single/_friend.scss @@ -5,12 +5,6 @@ display: inline-block; background: $friend-link-background-color; vertical-align: top; - [theme="dark"] & { - background: $friend-link-background-color-dark; - } - [theme="black"] & { - background: $friend-link-background-color-black; - } -webkit-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; @@ -32,20 +26,8 @@ .friend-link-info { margin: 18px 18px 18px 92px; color: $friend-link-color; - [theme="dark"] & { - color: $friend-link-color-dark; - } - [theme="black"] & { - color: $friend-link-color-black; - } &:hover { color: $friend-link-hover-color; - [theme="dark"] & { - color: $friend-link-hover-color-dark; - } - [theme="black"] & { - color: $friend-link-hover-color-black; - } } .friend-name-div { text-overflow: ellipsis; @@ -60,12 +42,6 @@ overflow: hidden; white-space: nowrap; color: $global-font-secondary-color; - [theme="dark"] & { - color: $global-font-secondary-color-dark; - } - [theme="black"] & { - color: $global-font-secondary-color-black; - } } } } diff --git a/assets/css/_partial/_single/_related.scss b/assets/css/_partial/_single/_related.scss index bb4be46b8..d6c719f69 100644 --- a/assets/css/_partial/_single/_related.scss +++ b/assets/css/_partial/_single/_related.scss @@ -1,13 +1,5 @@ .related-container { - --related-background-color: #f8f8f8; - --related-background-color-dark: #252627; - --related-background-color-black: #111111; - --related-color: #2D809A; - --related-color-dark: #a9a9b3; - --related-color-black: #d9d9d9; - --related-hover-color: #ef3982; - --related-hover-color-dark: #ffffff; - --related-hover-color-black: #ffffff; + display: flex; flex-wrap: nowrap; overflow-x: scroll; @@ -21,16 +13,8 @@ height: 270px; min-width: 300px; margin-right: 20px; - background: var(--related-background-color); + background: $related-background-color; position: relative; - - [theme="dark"] & { - background: var(--related-background-color-dark); - } - - [theme="black"] & { - background: var(--related-background-color-black); - } } .related-image { @@ -60,26 +44,10 @@ } .related-title a { - color: black; + color: $related-color; &:hover { - color: var(--related-hover-color); - } - - [theme="dark"] & { - color: var(--related-color-dark); - - &:hover { - color: var(--related-hover-color-dark); - } - } - - [theme="black"] & { - color: var(--related-color-black); - - &:hover { - color: var(--related-hover-color-black); - } + color: $related-hover-color; } } } \ No newline at end of file diff --git a/assets/css/_partial/_single/_series.scss b/assets/css/_partial/_single/_series.scss index 7809b8050..2d696afb7 100644 --- a/assets/css/_partial/_single/_series.scss +++ b/assets/css/_partial/_single/_series.scss @@ -10,14 +10,8 @@ justify-content: space-between; line-height: 2em; padding: 0 .75rem; - background: darken($code-background-color, 6%); - - [theme=dark] & { - background: darken($code-background-color-dark, 6%); - } - [theme=black] & { - background: darken($code-background-color-black, 6%); - } + background: $code-background-color-darken-6; + } .series-content { @@ -29,12 +23,6 @@ padding: .4rem 1rem .4rem 1.8rem; } - [theme=dark] & { - background-color: $code-background-color-dark; - } - [theme=black] & { - background-color: $code-background-color-black; - } ul { text-indent: -0.85rem; padding-left: .8rem; @@ -45,13 +33,6 @@ font-weight: bolder; margin-right: .5rem; color: $single-link-color; - - [theme=dark] & { - color: $single-link-color-dark; - } - [theme=black] & { - color: $single-link-color-black; - } } span.active { &:first-child::before { @@ -60,22 +41,9 @@ } font-weight: bolder; color: $single-link-color; - [theme=dark] & { - color: $single-link-color-dark; - } - [theme=black] & { - color: $single-link-color-black; - } &::before { color: $single-link-hover-color; - - [theme=dark] & { - color: $single-link-hover-color-dark; - } - [theme=black] & { - color: $single-link-hover-color-black; - } } } ul { @@ -85,14 +53,7 @@ } &.open { .toc-title { - background: darken($code-background-color, 3%); - - [theme=dark] & { - background: darken($code-background-color-dark, 3%); - } - [theme=black] & { - background: darken($code-background-color-black, 3%); - } + background: $code-header-color; } } } diff --git a/assets/css/_partial/_single/_showcase.scss b/assets/css/_partial/_single/_showcase.scss index fff6fa6d9..22fd95c35 100644 --- a/assets/css/_partial/_single/_showcase.scss +++ b/assets/css/_partial/_single/_showcase.scss @@ -1,14 +1,3 @@ -$showcase-background-color: #f8f8f8; -$showcase-background-color-dark: #252627; -$showcase-background-color-black: #111111; - -$showcase-color: #2D809A; -$showcase-color-dark: #a9a9b3; -$showcase-color-black: #d9d9d9; - -$showcase-hover-color: #ef3982; -$showcase-hover-color-dark: #ffffff; -$showcase-hover-color-black: #ffffff; .showcase-box { width: 48%; @@ -17,14 +6,6 @@ $showcase-hover-color-black: #ffffff; display: inline-block !important; background: $showcase-background-color; position: relative; - - [theme="dark"] & { - background: $showcase-background-color-dark; - } - - [theme="black"] & { - background: $showcase-background-color-black; - } } .column-1 { @@ -69,27 +50,11 @@ $showcase-hover-color-black: #ffffff; } .showcase-title a { - color: black; + color: $showcase-color; &:hover { color: $showcase-hover-color; } - - [theme="dark"] & { - color: $showcase-color-dark; - - &:hover { - color: $showcase-hover-color-dark; - } - } - - [theme="black"] & { - color: $showcase-color-black; - - &:hover { - color: $showcase-hover-color-black; - } - } } .showcase-summary { diff --git a/assets/css/_partial/_single/_sponsor.scss b/assets/css/_partial/_single/_sponsor.scss index 08ddbd3ac..ac7908e1a 100644 --- a/assets/css/_partial/_single/_sponsor.scss +++ b/assets/css/_partial/_single/_sponsor.scss @@ -34,18 +34,6 @@ background-color: $sponsor-button-hover-background-color; @include transform(scale(1.05)); } - [theme="dark"] & { - background-color: $sponsor-button-background-color-dark; - &:hover { - background-color: $sponsor-button-hover-background-color-dark; - } - } - [theme="black"] & { - background-color: $sponsor-button-background-color-black; - &:hover { - background-color: $sponsor-button-hover-background-color-black; - } - } span { vertical-align: top; } diff --git a/assets/css/_partial/_single/_toc.scss b/assets/css/_partial/_single/_toc.scss index 3cedeccfb..da1b1e60e 100644 --- a/assets/css/_partial/_single/_toc.scss +++ b/assets/css/_partial/_single/_toc.scss @@ -18,13 +18,6 @@ font-weight: bolder; margin-right: .5rem; color: $single-link-color; - - [theme=dark] & { - color: $single-link-color-dark; - } - [theme=black] & { - color: $single-link-color-black; - } } ul { @@ -40,20 +33,6 @@ color: $global-font-secondary-color; } - [theme=dark] & { - background: $code-background-color-dark; - - rt { - color: $global-font-secondary-color-dark; - } - } - [theme=black] & { - background: $code-background-color-black; - - rt { - color: $global-font-secondary-color-black; - } - } } } @@ -74,13 +53,6 @@ @include blur; - [theme=dark] & { - border-left-color: $global-border-color-dark; - } - [theme=black] & { - border-left-color: $global-border-color-black; - } - .toc-title { margin: .8rem 0; } @@ -90,7 +62,7 @@ display: block; } - > nav > ul { + >nav>ul { margin: .625rem 0; } @@ -99,7 +71,7 @@ display: none; } - .has-active > ul { + .has-active>ul { display: block; } } @@ -108,22 +80,8 @@ font-weight: bold; color: $single-link-color; - [theme=dark] & { - color: $single-link-color-dark; - } - [theme=black] & { - color: $single-link-color-black; - } - &::before { color: $single-link-hover-color; - - [theme=dark] & { - color: $single-link-hover-color-dark; - } - [theme=black] & { - color: $single-link-hover-color-black; - } } } } @@ -142,42 +100,21 @@ justify-content: space-between; line-height: 2em; padding: 0 .75rem; - background: darken($code-background-color, 6%); - - [theme=dark] & { - background: darken($code-background-color-dark, 6%); - } - [theme=black] & { - background: darken($code-background-color-black, 6%); - } + background: $code-background-color-darken-6; } .toc-content { background-color: $code-background-color; - > nav > ul { + >nav>ul { margin: 0; padding: .4rem 1rem .4rem 1.8rem; } - - [theme=dark] & { - background-color: $code-background-color-dark; - } - [theme=black] & { - background-color: $code-background-color-black; - } } &.open { .toc-title { - background: darken($code-background-color, 3%); - - [theme=dark] & { - background: darken($code-background-color-dark, 3%); - } - [theme=black] & { - background: darken($code-background-color-black, 3%); - } + background: $code-header-color; } } -} +} \ No newline at end of file diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index d51a9ae83..be9b13b5c 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -10,34 +10,22 @@ $global-font-weight: 400; $global-line-height: 1.5rem; // Color of the background -$global-background-color: #fff !default; -$global-background-color-dark: #292a2d !default; -$global-background-color-black: #000000 !default; +$global-background-color: var(--global-background-color) !default; // Color of the text -$global-font-color: #161209 !default; -$global-font-color-dark: #a9a9b3 !default; -$global-font-color-black: #d9d9d9 !default; +$global-font-color: var(--global-font-color) !default; // Color of the secondary text -$global-font-secondary-color: #4d4d4d !default; -$global-font-secondary-color-dark: #b5b5b5 !default; -$global-font-secondary-color-black: #a9a9b3 !default; +$global-font-secondary-color: var(--global-font-secondary-color) !default; // Color of the link -$global-link-color: #161209 !default; -$global-link-color-dark: #a9a9b3 !default; -$global-link-color-black: #d9d9d9 !default; +$global-link-color: var(--global-link-color) !default; // Color of the hover link -$global-link-hover-color: #2D809A !default; -$global-link-hover-color-dark: #fff !default; -$global-link-hover-color-black: #fff !default; +$global-link-hover-color: var(--global-link-hover-color) !default; // Color of the border -$global-border-color: #f0f0f0 !default; -$global-border-color-dark: #363636 !default; -$global-border-color-black: #363636 !default; +$global-border-color: var(--global-border-color) !default; // ========== Global ========== // // ========== Scrollbar ========== // @@ -53,9 +41,7 @@ $custom-scrollbar-hover-color: #a9a9b3 !default; // ========== Selection ========== // // Color of the selected text -$selection-color: rgba(53, 166, 247, 0.25) !default; -$selection-color-dark: rgba(50, 112, 194, 0.4) !default; -$selection-color-black: rgba(50, 112, 194, 0.4) !default; +$selection-color: var(--selection-color) !default; // ========== Selection ========== // // ========== Header ========== // @@ -63,82 +49,68 @@ $selection-color-black: rgba(50, 112, 194, 0.4) !default; $header-height: 3.5rem !default; // Color of the header background -$header-background-color: #f8f8f8 !default; -$header-background-color-dark: #252627 !default; -$header-background-color-black: #000000 !default; +$header-background-color: var(--header-background-color) !default; // Font style of the header title $header-title-font-family: $global-font-family !default; $header-title-font-size: 1.5rem !default; // Color of the hover header item -$header-hover-color: #161209 !default; -$header-hover-color-dark: #fff !default; -$header-hover-color-black: #fff !default; +$header-hover-color: var(--header-hover-color) !default; +$header-delimiter: var(--header-delimiter) !default; // Color of the search background -$search-background-color: #e9e9e9 !default; -$search-background-color-dark: #363636 !default; -$search-background-color-black: #363636 !default; +$search-background-color: var(--search-background-color) !default; +$search-empty-font-color: var(--search-empty-font-color) !default; // ========== Header ========== // // ========== Single Content ========== // +// Font weight of the single H2 - H6 +$single-h-font-weight: var(--single-h-font-weight) !default; +$single-content-strong-color: var(--single-content-strong-color) !default; // Font size of the TOC $toc-title-font-size: 1.2rem !default; $toc-content-font-size: 1rem !default; // Color of the single link -$single-link-color: #2D809A !default; -$single-link-color-dark: #55bde2 !default; -$single-link-color-black: #55bde2 !default; +$single-link-color: var(--single-link-color) !default; // Color of the hover single link -$single-link-hover-color: #ef3982 !default; -$single-link-hover-color-dark: #bdebfc !default; -$single-link-hover-color-black: #bdebfc !default; +$single-link-hover-color: var(--single-link-hover-color) !default; // Color of the table background -$table-background-color: #fff !default; -$table-background-color-dark: #272c34 !default; -$table-background-color-black: #272c34 !default; +$table-background-color: var(--table-background-color) !default; // Color of the table thead -$table-thead-color: #ededed !default; -$table-thead-color-dark: #20252b !default; -$table-thead-color-black: #20252b !default; +$table-thead-color: var(--table-thead-color) !default; +$table-border-color: var(--table-border-color) !default; // Color of the blockquote -$blockquote-color: #6bd6fd !default; -$blockquote-color-dark: #59c5ec !default; -$blockquote-color-black: #59c5ec !default; +$blockquote-color: var(--blockquote-color) !default; +$blockquote-bg-color: var(--blockquote-bg-color) !default; // ========== Single Content ========== // // ========== Pagination ========== // // Color of the link in pagination -$pagination-link-color: #2D809A !default; -$pagination-link-color-dark: #a9a9b3 !default; -$pagination-link-color-black: #a9a9b3 !default; +$pagination-link-color: var(--pagination-link-color) !default; // Color of the hover link in pagination -$pagination-link-hover-color: #000 !default; -$pagination-link-hover-color-dark: #fff !default; -$pagination-link-hover-color-black: #fff !default; +$pagination-link-hover-color: var(--pagination-link-hover-color) !default; // ========== Pagination ========== // // ========== Code ========== // // Color of the code -$code-color: #E74C3C !default; -$code-color-dark: #E5BF78 !default; -$code-color-black: #E5BF78 !default; +$code-color: var(--code-color) !default; // Color of the code background -$code-background-color: #f5f5f5 !default; -$code-background-color-dark: #272C34 !default; -$code-background-color-black: #272C34 !default; +$code-background-color: var(--code-background-color) !default; +$code-header-color: var(--code-header-color) !default; +$code-background-color-darken-5: var(--code-background-color-darken-5) !default; +$code-background-color-darken-6: var(--code-background-color-darken-6) !default; +$code-background-color-code-header: var(--code-background-color-code-header) !default; +$code-background-color-code-hl: var(--code-background-color-code-hl) !default; -$code-info-color: #9c9c9c !default; -$code-info-color-dark: #b1b0b0 !default; -$code-info-color-black: #b1b0b0 !default; +$code-info-color: var(--code-info-color) !default; // Font size of the code $code-font-size: .875rem !default; @@ -199,451 +171,7 @@ $code-type-map: ( language-yaml: 'YAML', ) !default; -// Color map of the code highlight -$code-highlight-color-map: ( - /* Parentheses */ - 'p': #a9a9b3, - /* Keyword */ - 'k': #b501a9, - /* KeywordConstant */ - 'kc': #b501a9, - /* KeywordDeclaration */ - 'kd': #b501a9, - /* KeywordNamespace */ - 'kn': #b501a9, - /* KeywordPseudo */ - 'kp': #b501a9, - /* KeywordReserved */ - 'kr': #b501a9, - /* KeywordType */ - 'kt': #b501a9, - /* Name */ - 'n': #333333, - /* NameAttribute */ - 'na': #2b77fa, - /* NameBuiltin */ - 'nb': #f74840, - /* NameBuiltinPseudo */ - 'bp': #f74840, - /* NameClass */ - 'nc': #cb8100, - /* NameConstant */ - 'no': #2b77fa, - /* NameDecorator */ - 'nd': #0086c1, - /* NameEntity */ - 'ni': #2b77fa, - /* NameException */ - 'ne': #2b77fa, - /* NameFunction */ - 'nf': #2b77fa, - /* NameFunctionMagic */ - 'fm': #1ccad6, - /* NameLabel */ - 'nl': #2b77fa, - /* NameNamespace */ - 'nn': #2b77fa, - /* NameOther */ - 'nx': #333333, - /* NameProperty */ - 'py': #2b77fa, - /* NameTag */ - 'nt': #2b77fa, - /* NameVariable */ - 'nv': #2b77fa, - /* NameVariableClass */ - 'vc': #2b77fa, - /* NameVariableGlobal */ - 'vg': #2b77fa, - /* NameVariableInstance */ - 'vi': #2b77fa, - /* NameVariableMagic */ - 'vm': #2b77fa, - /* Literal */ - 'l': #2aa198, - /* LiteralDate */ - 'ld': #2aa198, - /* LiteralString */ - 's': #24a443, - /* LiteralStringAffix */ - 'sa': #24a443, - /* LiteralStringBacktick */ - 'sb': #24a443, - /* LiteralStringChar */ - 'sc': #24a443, - /* LiteralStringDelimiter */ - 'dl': #24a443, - /* LiteralStringDoc */ - 'sd': #24a443, - /* LiteralStringDouble */ - 's2': #24a443, - /* LiteralStringEscape */ - 'se': #24a443, - /* LiteralStringHeredoc */ - 'sh': #24a443, - /* LiteralStringInterpol */ - 'si': #24a443, - /* LiteralStringOther */ - 'sx': #24a443, - /* LiteralStringRegex */ - 'sr': #24a443, - /* LiteralStringSingle */ - 's1': #24a443, - /* LiteralStringSymbol */ - 'ss': #24a443, - /* LiteralNumber */ - 'm': #e2893c, - /* LiteralNumberBin */ - 'mb': #e2893c, - /* LiteralNumberFloat */ - 'mf': #e2893c, - /* LiteralNumberHex */ - 'mh': #e2893c, - /* LiteralNumberInteger */ - 'mi': #e2893c, - /* LiteralNumberIntegerLong */ - 'il': #e2893c, - /* LiteralNumberOct */ - 'mo': #e2893c, - /* Operator */ - 'o': #f19b04, - /* OperatorWord */ - 'ow': #b501a9, - /* Comment */ - 'c': #a0a1a8, - /* CommentHashbang */ - 'ch': #a0a1a8, - /* CommentMultiline */ - 'cm': #a0a1a8, - /* CommentSingle */ - 'c1': #a0a1a8, - /* CommentSpecial */ - 'cs': #a0a1a8, - /* CommentPreproc */ - 'cp': #a0a1a8, - /* CommentPreprocFile */ - 'cpf': #a0a1a8, - /* Generic */ - 'g': #e72d40, - /* GenericDeleted */ - 'gd': #e72d40, - /* GenericEmph */ - 'ge': #e72d40, - /* GenericError */ - 'gr': #e72d40, - /* GenericHeading */ - 'gh': #e72d40, - /* GenericInserted */ - 'gi': #e72d40, - /* GenericOutput */ - 'go': #e72d40, - /* GenericPrompt */ - 'gp': #e72d40, - /* GenericStrong */ - 'gs': #e72d40, - /* GenericSubheading */ - 'gu': #e72d40, - /* GenericTraceback */ - 'gt': #e72d40, - /* TextWhitespace */ - 'w': #bbbbbb, - ) !default; -$code-highlight-color-map-dark: ( - /* Parentheses */ - 'p': #a9a9b3, - /* Keyword */ - 'k': #d371e3, - /* KeywordConstant */ - 'kc': #d371e3, - /* KeywordDeclaration */ - 'kd': #d371e3, - /* KeywordNamespace */ - 'kn': #d371e3, - /* KeywordPseudo */ - 'kp': #d371e3, - /* KeywordReserved */ - 'kr': #d371e3, - /* KeywordType */ - 'kt': #d371e3, - /* Name */ - 'n': #a9b2c0, - /* NameAttribute */ - 'na': #41b0f5, - /* NameBuiltin */ - 'nb': #19b9c4, - /* NameBuiltinPseudo */ - 'bp': #ecbf6f, - /* NameClass */ - 'nc': #ecbf6f, - /* NameConstant */ - 'no': #41b0f5, - /* NameDecorator */ - 'nd': #ecbf6f, - /* NameEntity */ - 'ni': #41b0f5, - /* NameException */ - 'ne': #41b0f5, - /* NameFunction */ - 'nf': #41b0f5, - /* NameFunctionMagic */ - 'fm': #19b9c4, - /* NameLabel */ - 'nl': #41b0f5, - /* NameNamespace */ - 'nn': #41b0f5, - /* NameOther */ - 'nx': #a9a9b3, - /* NameProperty */ - 'py': #41b0f5, - /* NameTag */ - 'nt': #41b0f5, - /* NameVariable */ - 'nv': #41b0f5, - /* NameVariableClass */ - 'vc': #41b0f5, - /* NameVariableGlobal */ - 'vg': #41b0f5, - /* NameVariableInstance */ - 'vi': #41b0f5, - /* NameVariableMagic */ - 'vm': #41b0f5, - /* Literal */ - 'l': #2aa198, - /* LiteralDate */ - 'ld': #2aa198, - /* LiteralString */ - 's': #8cc570, - /* LiteralStringAffix */ - 'sa': #8cc570, - /* LiteralStringBacktick */ - 'sb': #8cc570, - /* LiteralStringChar */ - 'sc': #8cc570, - /* LiteralStringDelimiter */ - 'dl': #8cc570, - /* LiteralStringDoc */ - 'sd': #8cc570, - /* LiteralStringDouble */ - 's2': #8cc570, - /* LiteralStringEscape */ - 'se': #8cc570, - /* LiteralStringHeredoc */ - 'sh': #8cc570, - /* LiteralStringInterpol */ - 'si': #8cc570, - /* LiteralStringOther */ - 'sx': #8cc570, - /* LiteralStringRegex */ - 'sr': #8cc570, - /* LiteralStringSingle */ - 's1': #8cc570, - /* LiteralStringSymbol */ - 'ss': #8cc570, - /* LiteralNumber */ - 'm': #db985c, - /* LiteralNumberBin */ - 'mb': #db985c, - /* LiteralNumberFloat */ - 'mf': #db985c, - /* LiteralNumberHex */ - 'mh': #db985c, - /* LiteralNumberInteger */ - 'mi': #db985c, - /* LiteralNumberIntegerLong */ - 'il': #db985c, - /* LiteralNumberOct */ - 'mo': #db985c, - /* Operator */ - 'o': #ecbf6f, - /* OperatorWord */ - 'ow': #d371e3, - /* Comment */ - 'c': #7e848f, - /* CommentHashbang */ - 'ch': #7e848f, - /* CommentMultiline */ - 'cm': #7e848f, - /* CommentSingle */ - 'c1': #7e848f, - /* CommentSpecial */ - 'cs': #7e848f, - /* CommentPreproc */ - 'cp': #7e848f, - /* CommentPreprocFile */ - 'cpf': #7e848f, - /* Generic */ - 'g': #f16372, - /* GenericDeleted */ - 'gd': #f16372, - /* GenericEmph */ - 'ge': #f16372, - /* GenericError */ - 'gr': #f16372, - /* GenericHeading */ - 'gh': #f16372, - /* GenericInserted */ - 'gi': #f16372, - /* GenericOutput */ - 'go': #f16372, - /* GenericPrompt */ - 'gp': #f16372, - /* GenericStrong */ - 'gs': #f16372, - /* GenericSubheading */ - 'gu': #f16372, - /* GenericTraceback */ - 'gt': #f16372, - /* TextWhitespace */ - 'w': #bbbbbb, - ) !default; -$code-highlight-color-map-black: ( - /* Parentheses */ - 'p': #a9a9b3, - /* Keyword */ - 'k': #d371e3, - /* KeywordConstant */ - 'kc': #d371e3, - /* KeywordDeclaration */ - 'kd': #d371e3, - /* KeywordNamespace */ - 'kn': #d371e3, - /* KeywordPseudo */ - 'kp': #d371e3, - /* KeywordReserved */ - 'kr': #d371e3, - /* KeywordType */ - 'kt': #d371e3, - /* Name */ - 'n': #a9b2c0, - /* NameAttribute */ - 'na': #41b0f5, - /* NameBuiltin */ - 'nb': #19b9c4, - /* NameBuiltinPseudo */ - 'bp': #ecbf6f, - /* NameClass */ - 'nc': #ecbf6f, - /* NameConstant */ - 'no': #41b0f5, - /* NameDecorator */ - 'nd': #ecbf6f, - /* NameEntity */ - 'ni': #41b0f5, - /* NameException */ - 'ne': #41b0f5, - /* NameFunction */ - 'nf': #41b0f5, - /* NameFunctionMagic */ - 'fm': #19b9c4, - /* NameLabel */ - 'nl': #41b0f5, - /* NameNamespace */ - 'nn': #41b0f5, - /* NameOther */ - 'nx': #a9a9b3, - /* NameProperty */ - 'py': #41b0f5, - /* NameTag */ - 'nt': #41b0f5, - /* NameVariable */ - 'nv': #41b0f5, - /* NameVariableClass */ - 'vc': #41b0f5, - /* NameVariableGlobal */ - 'vg': #41b0f5, - /* NameVariableInstance */ - 'vi': #41b0f5, - /* NameVariableMagic */ - 'vm': #41b0f5, - /* Literal */ - 'l': #2aa198, - /* LiteralDate */ - 'ld': #2aa198, - /* LiteralString */ - 's': #8cc570, - /* LiteralStringAffix */ - 'sa': #8cc570, - /* LiteralStringBacktick */ - 'sb': #8cc570, - /* LiteralStringChar */ - 'sc': #8cc570, - /* LiteralStringDelimiter */ - 'dl': #8cc570, - /* LiteralStringDoc */ - 'sd': #8cc570, - /* LiteralStringDouble */ - 's2': #8cc570, - /* LiteralStringEscape */ - 'se': #8cc570, - /* LiteralStringHeredoc */ - 'sh': #8cc570, - /* LiteralStringInterpol */ - 'si': #8cc570, - /* LiteralStringOther */ - 'sx': #8cc570, - /* LiteralStringRegex */ - 'sr': #8cc570, - /* LiteralStringSingle */ - 's1': #8cc570, - /* LiteralStringSymbol */ - 'ss': #8cc570, - /* LiteralNumber */ - 'm': #db985c, - /* LiteralNumberBin */ - 'mb': #db985c, - /* LiteralNumberFloat */ - 'mf': #db985c, - /* LiteralNumberHex */ - 'mh': #db985c, - /* LiteralNumberInteger */ - 'mi': #db985c, - /* LiteralNumberIntegerLong */ - 'il': #db985c, - /* LiteralNumberOct */ - 'mo': #db985c, - /* Operator */ - 'o': #ecbf6f, - /* OperatorWord */ - 'ow': #d371e3, - /* Comment */ - 'c': #7e848f, - /* CommentHashbang */ - 'ch': #7e848f, - /* CommentMultiline */ - 'cm': #7e848f, - /* CommentSingle */ - 'c1': #7e848f, - /* CommentSpecial */ - 'cs': #7e848f, - /* CommentPreproc */ - 'cp': #7e848f, - /* CommentPreprocFile */ - 'cpf': #7e848f, - /* Generic */ - 'g': #f16372, - /* GenericDeleted */ - 'gd': #f16372, - /* GenericEmph */ - 'ge': #f16372, - /* GenericError */ - 'gr': #f16372, - /* GenericHeading */ - 'gh': #f16372, - /* GenericInserted */ - 'gi': #f16372, - /* GenericOutput */ - 'go': #f16372, - /* GenericPrompt */ - 'gp': #f16372, - /* GenericStrong */ - 'gs': #f16372, - /* GenericSubheading */ - 'gu': #f16372, - /* GenericTraceback */ - 'gt': #f16372, - /* TextWhitespace */ - 'w': #bbbbbb, - ) !default; + // ========== Code ========== // // ========== Admonition ========== // @@ -680,30 +208,36 @@ $admonition-background-color-map: ( ) !default; // ========== Friend Link ========== // // Color of friend link background -$friend-link-background-color: #f8f8f8 !default; -$friend-link-background-color-dark: #252627 !default; -$friend-link-background-color-black: #111111 !default; +$friend-link-background-color: var(--friend-link-background-color) !default; // Color of friend link text -$friend-link-color: #2D809A !default; -$friend-link-color-dark: #a9a9b3 !default; -$friend-link-color-black: #d9d9d9 !default; +$friend-link-color: var(--friend-link-color) !default; // Color of hover friend link text -$friend-link-hover-color: #ef3982 !default; -$friend-link-hover-color-dark: #ffffff !default; -$friend-link-hover-color-black: #ffffff !default; +$friend-link-hover-color: var(--friend-link-hover-color) !default; // ========== Friend Link ========== // // ========== Sponsor Button ========== // // Sponsor button background color -$sponsor-button-background-color: #f0f0f0 !default; -$sponsor-button-background-color-dark: #363636 !default; -$sponsor-button-background-color-black: #363636 !default; +$sponsor-button-background-color: var(--sponsor-button-background-color) !default; // Sponsor button background color while in the :hover state -$sponsor-button-hover-background-color: #f0f0f0 !default; -$sponsor-button-hover-background-color-dark: #363636 !default; -$sponsor-button-hover-background-color-black: #363636 !default; -// ========== Sponsor Button ========== // \ No newline at end of file +$sponsor-button-hover-background-color: var(--sponsor-button-hover-background-color) !default; +// ========== Sponsor Button ========== // + +// ========== Cookie Consent ========== // +$cookie-background-color: var(--cookie-background-color) !default; +// ========== Cookie Consent ========== // + +// ========= related ========== // +$related-background-color: var(--related-background-color) !default; +$related-color: var(--related-color) !default; +$related-hover-color: var(--related-hover-color) !default; +// ========== related ========== // + +// ========== showcase ========== // +$showcase-background-color: var(--showcase-background-color) !default; +$showcase-color: var(--showcase-color) !default; +$showcase-hover-color: var(--showcase-hover-color) !default; +// ========== showcase ========== // \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index 0b41274f3..6ec85f9ce 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -477,6 +477,183 @@ ul { list-style-type: disc; } +:root { + /* ========== Global ========== */ + /* Color of the background */ + --global-background-color: #fff; + /* Color of the text */ + --global-font-color: #161209; + /* Color of the secondary text */ + --global-font-secondary-color: #4d4d4d; + /* Color of the link */ + --global-link-color: #161209; + /* Color of the hover link */ + --global-link-hover-color: #2d809a; + /* Color of the border */ + --global-border-color: #f0f0f0; + /* ========== Global ========== */ + /* ========== Selection ========== */ + /* Color of the selected text */ + --selection-color: #35a6f740; + /* ========== Selection ========== */ + /* ========== Header ========== */ + /* Color of the header background */ + --header-background-color: #f8f8f8; + /* Color of the hover header item */ + --header-hover-color: #161209; + --header-delimiter: unset; + /* Color of the search background */ + --search-background-color: #e9e9e9; + --search-empty-font-color: unset; + /* ========== Header ========== */ + /* ========== Single Content ========== */ + /* Font weight of the single H2 - H6 */ + --single-h-font-weight: bold; + /* Color of the single content strong/b */ + --single-content-strong-color: unset; + /* Color of the single link */ + --single-link-color: #2d809a; + /* Color of the hover single link */ + --single-link-hover-color: #ef3982; + /* Color of the table background */ + --table-background-color: #fff; + /* Color of the table thead */ + --table-thead-color: #ededed; + --table-border-color: darken(#ededed, 2%); + /* Color of the blockquote */ + --blockquote-color: #6bd6fd; + --blockquote-bg-color: rgba(107, 214, 253, 0.2); + /* ========== Single Content ========== */ + /* ========== Pagination ========== */ + /* Color of the link in pagination */ + --pagination-link-color: #2d809a; + /* Color of the hover link in pagination */ + --pagination-link-hover-color: #000; + /* ========== Pagination ========== */ + /* ========== Friend Link ========== */ + /* Color of friend link background */ + --friend-link-background-color: #f8f8f8; + /* Color of friend link text */ + --friend-link-color: #2d809a; + /* Color of hover friend link text */ + --friend-link-hover-color: #ef3982; + /* ========== Friend Link ========== */ + /* ========== Sponsor Button ========== */ + /* Sponsor button background color */ + --sponsor-button-background-color: #f0f0f0; + /* Sponsor button background color while in the :hover state */ + --sponsor-button-hover-background-color: #f0f0f0; + /* ========== Sponsor Button ========== */ + /* ========== Code ========== */ + /* Color of the code */ + --code-color: #e74c3c; + /* Color of the code background */ + --code-background-color: #f5f5f5; + --code-header-color: #ededed; + --code-background-color-darken-5: #e8e8e8; + --code-background-color-darken-6: #e6e6e6; + --code-background-color-code-header: var(--code-background-color-darken-6); + --code-background-color-code-hl: gainsboro; + --code-info-color: #9c9c9c; + /* ========== Code ========== */ + /* ========== Cookie Consent ========== */ + --cookie-background-color: #ccc; + /* ========== Cookie Consent ========== */ + /* ========== related ========== */ + --related-background-color: #f8f8f8; + --related-color: black; + --related-hover-color: #ef3982; + /* ========== related ========== */ + /* ========== showcase ========== */ + --showcase-background-color: #f8f8f8; + --showcase-color: black; + --showcase-hover-color: #ef3982; + /* ========== showcase ========== */ + /* ========== primitives ========== */ + --fgColor-default: #161209; + --fgColor-secondary: #4d4d4d; + --fgColor-muted: unset; + --fgColor-link: #2d809a; + --fgColor-link-hover: #ef3982; + --bgColor-default: #fff; + --bgColor-secondary: #ededed; + --bgColor-accent-emphasis: #6bd6fd; + --bgColor-accent-muted: #388bfd1a; + --borderColor-default: #f0f0f0; + --selection-bgColor: #35a6f740; + --button-default-bgColor-rest: #f0f0f0; + --button-default-bgColor-hover: #f0f0f0; + /* ========== primitives ========== */ +} + +/* Theme dark */ + +html.dark { + /* ========== primitives ========== */ + --fgColor-default: #e6edf3; + --fgColor-secondary: #d4dbe1; + --fgColor-muted: #848d97; + --fgColor-link: #4493f8; + --fgColor-link-hover: #61adff; + --bgColor-default: #0d1117; + --bgColor-secondary: #161b22; + --bgColor-accent-emphasis: #1f6feb; + --bgColor-accent-muted: #388bfd1a; + --borderColor-default: #30363d; + --selection-bgColor: #1f6febb3; + --button-default-bgColor-rest: #21262d; + --button-default-bgColor-hover: #292e36; + /* ========== primitives ========== */ + --global-background-color: var(--bgColor-default); + --global-font-color: var(--fgColor-default); + --global-font-secondary-color: var(--fgColor-secondary); + --global-link-color: var(--fgColor-default); + --global-link-hover-color: #ffffff; + --global-border-color: var(--borderColor-default); + --selection-color: var(--selection-bgColor); + --header-background-color: var(--bgColor-secondary); + --header-hover-color: #ffffff; + --header-delimiter: var(--fgColor-muted); + --search-background-color: var(--bgColor-default); + --search-empty-font-color: var(--fgColor-secondary); + --single-h-font-weight: bolder; + --single-content-strong-color: var(--fgColor-default); + --single-link-color: var(--fgColor-link); + --single-link-hover-color: var(--fgColor-link-hover); + --table-background-color: var(--bgColor-default); + --table-thead-color: var(--bgColor-secondary); + --table-border-color: var(--borderColor-default); + --blockquote-color: var(--bgColor-accent-emphasis); + --blockquote-bg-color: var(--bgColor-accent-muted); + --pagination-link-color: var(--fgColor-default); + --pagination-link-hover-color: white; + --friend-link-background-color: var(--bgColor-secondary); + --friend-link-color: var(--fgColor-link); + --friend-link-hover-color: var(--fgColor-link-hover); + --sponsor-button-background-color: var(--button-default-bgColor-rest); + --sponsor-button-hover-background-color: var(--button-default-bgColor-hover); + --cookie-background-color: white; + --code-color: #e5bf78; + --code-background-color: #1b2029; + --code-header-color: var(--bgColor-secondary); + --code-background-color-darken-5: #1c2025; + /* TODO */ + --code-background-color-darken-6: #1a1d23; + /* TODO */ + --code-background-color-code-header: var(--code-background-color-darken-6); + /* TODO */ + --code-background-color-code-hl: #1c2025; + /* TODO */ + --code-info-color: #b1b0b0; + /* TODO */ + --related-background-color: var(--bgColor-secondary); + --related-color: var(--fgColor-default); + --related-hover-color: white; + --showcase-background-color: var(--bgColor-secondary); + --showcase-color: var(--fgColor-default); + --showcase-hover-color: white; +} + *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; diff --git a/assets/css/style.scss b/assets/css/style.scss index cd685a8ad..4593727d0 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -3,6 +3,8 @@ @import "_variables"; @import "_override"; +@import "themes/_themes"; + @import "_mixin/index"; @import "_core/base"; diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index 00852e71b..db73aacbc 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -19,4 +19,197 @@ @apply tw-list-disc tw-list-outside; } + :root { + /* ========== Global ========== */ + /* Color of the background */ + --global-background-color: #fff; + /* Color of the text */ + --global-font-color: #161209; + /* Color of the secondary text */ + --global-font-secondary-color: #4d4d4d; + /* Color of the link */ + --global-link-color: #161209; + /* Color of the hover link */ + --global-link-hover-color: #2d809a; + /* Color of the border */ + --global-border-color: #f0f0f0; + /* ========== Global ========== */ + + /* ========== Selection ========== */ + /* Color of the selected text */ + --selection-color: #35a6f740; + /* ========== Selection ========== */ + + /* ========== Header ========== */ + /* Color of the header background */ + --header-background-color: #f8f8f8; + /* Color of the hover header item */ + --header-hover-color: #161209; + --header-delimiter: unset; + /* Color of the search background */ + --search-background-color: #e9e9e9; + --search-empty-font-color: unset; + /* ========== Header ========== */ + + /* ========== Single Content ========== */ + /* Font weight of the single H2 - H6 */ + --single-h-font-weight: bold; + /* Color of the single content strong/b */ + --single-content-strong-color: unset; + /* Color of the single link */ + --single-link-color: #2d809a; + /* Color of the hover single link */ + --single-link-hover-color: #ef3982; + /* Color of the table background */ + --table-background-color: #fff; + /* Color of the table thead */ + --table-thead-color: #ededed; + --table-border-color: darken(#ededed, 2%); + /* Color of the blockquote */ + --blockquote-color: #6bd6fd; + --blockquote-bg-color: rgba(107, 214, 253, 0.2); + /* ========== Single Content ========== */ + + /* ========== Pagination ========== */ + /* Color of the link in pagination */ + --pagination-link-color: #2d809a; + /* Color of the hover link in pagination */ + --pagination-link-hover-color: #000; + /* ========== Pagination ========== */ + + /* ========== Friend Link ========== */ + /* Color of friend link background */ + --friend-link-background-color: #f8f8f8; + /* Color of friend link text */ + --friend-link-color: #2d809a; + /* Color of hover friend link text */ + --friend-link-hover-color: #ef3982; + /* ========== Friend Link ========== */ + + /* ========== Sponsor Button ========== */ + /* Sponsor button background color */ + --sponsor-button-background-color: #f0f0f0; + /* Sponsor button background color while in the :hover state */ + --sponsor-button-hover-background-color: #f0f0f0; + /* ========== Sponsor Button ========== */ + + /* ========== Code ========== */ + /* Color of the code */ + --code-color: #e74c3c; + /* Color of the code background */ + --code-background-color: #f5f5f5; + + --code-header-color: #ededed; + --code-background-color-darken-5: #e8e8e8; + --code-background-color-darken-6: #e6e6e6; + --code-background-color-code-header: var(--code-background-color-darken-6); + --code-background-color-code-hl: gainsboro; + --code-info-color: #9c9c9c; + /* ========== Code ========== */ + + /* ========== Cookie Consent ========== */ + --cookie-background-color: #ccc; + /* ========== Cookie Consent ========== */ + /* ========== related ========== */ + --related-background-color: #f8f8f8; + --related-color: black; + --related-hover-color: #ef3982; + /* ========== related ========== */ + + /* ========== showcase ========== */ + --showcase-background-color: #f8f8f8; + --showcase-color: black; + --showcase-hover-color: #ef3982; + /* ========== showcase ========== */ + + /* ========== primitives ========== */ + --fgColor-default: #161209; + --fgColor-secondary: #4d4d4d; + --fgColor-muted: unset; + --fgColor-link: #2d809a; + --fgColor-link-hover: #ef3982; + --bgColor-default: #fff; + --bgColor-secondary: #ededed; + --bgColor-accent-emphasis: #6bd6fd; + --bgColor-accent-muted: #388bfd1a; + --borderColor-default: #f0f0f0; + --selection-bgColor: #35a6f740; + --button-default-bgColor-rest: #f0f0f0; + --button-default-bgColor-hover: #f0f0f0; + /* ========== primitives ========== */ + } + /* Theme dark */ + html.dark { + /* ========== primitives ========== */ + --fgColor-default: #e6edf3; + --fgColor-secondary: #d4dbe1; + --fgColor-muted: #848d97; + --fgColor-link: #4493f8; + --fgColor-link-hover: #61adff; + --bgColor-default: #0d1117; + --bgColor-secondary: #161b22; + --bgColor-accent-emphasis: #1f6feb; + --bgColor-accent-muted: #388bfd1a; + --borderColor-default: #30363d; + --selection-bgColor: #1f6febb3; + --button-default-bgColor-rest: #21262d; + --button-default-bgColor-hover: #292e36; + /* ========== primitives ========== */ + + --global-background-color: var(--bgColor-default); + --global-font-color: var(--fgColor-default); + --global-font-secondary-color: var(--fgColor-secondary); + --global-link-color: var(--fgColor-default); + --global-link-hover-color: #ffffff; + --global-border-color: var(--borderColor-default); + --selection-color: var(--selection-bgColor); + + --header-background-color: var(--bgColor-secondary); + --header-hover-color: #ffffff; + --header-delimiter: var(--fgColor-muted); + + --search-background-color: var(--bgColor-default); + --search-empty-font-color: var(--fgColor-secondary); + + --single-h-font-weight: bolder; + --single-content-strong-color: var(--fgColor-default); + --single-link-color: var(--fgColor-link); + --single-link-hover-color: var(--fgColor-link-hover); + + --table-background-color: var(--bgColor-default); + --table-thead-color: var(--bgColor-secondary); + --table-border-color: var(--borderColor-default); + + --blockquote-color: var(--bgColor-accent-emphasis); + --blockquote-bg-color: var(--bgColor-accent-muted); + + --pagination-link-color: var(--fgColor-default); + --pagination-link-hover-color: white; + + --friend-link-background-color: var(--bgColor-secondary); + --friend-link-color: var(--fgColor-link); + --friend-link-hover-color: var(--fgColor-link-hover); + + --sponsor-button-background-color: var(--button-default-bgColor-rest); + --sponsor-button-hover-background-color: var(--button-default-bgColor-hover); + + --cookie-background-color: white; + + --code-color: #e5bf78; + --code-background-color: #1b2029; + --code-header-color: var(--bgColor-secondary); + --code-background-color-darken-5: #1c2025; /* TODO */ + --code-background-color-darken-6: #1a1d23; /* TODO */ + --code-background-color-code-header: var(--code-background-color-darken-6); /* TODO */ + --code-background-color-code-hl: #1c2025; /* TODO */ + --code-info-color: #b1b0b0; /* TODO */ + + --related-background-color: var(--bgColor-secondary); + --related-color: var(--fgColor-default); + --related-hover-color: white; + + --showcase-background-color: var(--bgColor-secondary); + --showcase-color: var(--fgColor-default); + --showcase-hover-color: white; + } } diff --git a/assets/css/themes/_themes.scss b/assets/css/themes/_themes.scss new file mode 100644 index 000000000..12cdc47fb --- /dev/null +++ b/assets/css/themes/_themes.scss @@ -0,0 +1,8 @@ +// Syntax for themes light +@import "syntax-github"; +// Syntax for themes dark +@import "syntax-onedark"; +// Syntax for gist dark +@import "syntax-gist-dark"; + +// Themes is in assets/css/tailwind.css \ No newline at end of file diff --git a/assets/css/themes/code-map.scss b/assets/css/themes/code-map.scss new file mode 100644 index 000000000..03a69cc8f --- /dev/null +++ b/assets/css/themes/code-map.scss @@ -0,0 +1,300 @@ +// Now is was despecated +// It is removed from assets/css/_variables.scss +// This three variables was for code highlight assets/css/_partial/_single/_code.scss before rewrite +// Color map of the code highlight +$code-highlight-color-map: ( + /* Parentheses */ + 'p': #a9a9b3, + /* Keyword */ + 'k': #b501a9, + /* KeywordConstant */ + 'kc': #b501a9, + /* KeywordDeclaration */ + 'kd': #b501a9, + /* KeywordNamespace */ + 'kn': #b501a9, + /* KeywordPseudo */ + 'kp': #b501a9, + /* KeywordReserved */ + 'kr': #b501a9, + /* KeywordType */ + 'kt': #b501a9, + /* Name */ + 'n': #333333, + /* NameAttribute */ + 'na': #2b77fa, + /* NameBuiltin */ + 'nb': #f74840, + /* NameBuiltinPseudo */ + 'bp': #f74840, + /* NameClass */ + 'nc': #cb8100, + /* NameConstant */ + 'no': #2b77fa, + /* NameDecorator */ + 'nd': #0086c1, + /* NameEntity */ + 'ni': #2b77fa, + /* NameException */ + 'ne': #2b77fa, + /* NameFunction */ + 'nf': #2b77fa, + /* NameFunctionMagic */ + 'fm': #1ccad6, + /* NameLabel */ + 'nl': #2b77fa, + /* NameNamespace */ + 'nn': #2b77fa, + /* NameOther */ + 'nx': #333333, + /* NameProperty */ + 'py': #2b77fa, + /* NameTag */ + 'nt': #2b77fa, + /* NameVariable */ + 'nv': #2b77fa, + /* NameVariableClass */ + 'vc': #2b77fa, + /* NameVariableGlobal */ + 'vg': #2b77fa, + /* NameVariableInstance */ + 'vi': #2b77fa, + /* NameVariableMagic */ + 'vm': #2b77fa, + /* Literal */ + 'l': #2aa198, + /* LiteralDate */ + 'ld': #2aa198, + /* LiteralString */ + 's': #24a443, + /* LiteralStringAffix */ + 'sa': #24a443, + /* LiteralStringBacktick */ + 'sb': #24a443, + /* LiteralStringChar */ + 'sc': #24a443, + /* LiteralStringDelimiter */ + 'dl': #24a443, + /* LiteralStringDoc */ + 'sd': #24a443, + /* LiteralStringDouble */ + 's2': #24a443, + /* LiteralStringEscape */ + 'se': #24a443, + /* LiteralStringHeredoc */ + 'sh': #24a443, + /* LiteralStringInterpol */ + 'si': #24a443, + /* LiteralStringOther */ + 'sx': #24a443, + /* LiteralStringRegex */ + 'sr': #24a443, + /* LiteralStringSingle */ + 's1': #24a443, + /* LiteralStringSymbol */ + 'ss': #24a443, + /* LiteralNumber */ + 'm': #e2893c, + /* LiteralNumberBin */ + 'mb': #e2893c, + /* LiteralNumberFloat */ + 'mf': #e2893c, + /* LiteralNumberHex */ + 'mh': #e2893c, + /* LiteralNumberInteger */ + 'mi': #e2893c, + /* LiteralNumberIntegerLong */ + 'il': #e2893c, + /* LiteralNumberOct */ + 'mo': #e2893c, + /* Operator */ + 'o': #f19b04, + /* OperatorWord */ + 'ow': #b501a9, + /* Comment */ + 'c': #a0a1a8, + /* CommentHashbang */ + 'ch': #a0a1a8, + /* CommentMultiline */ + 'cm': #a0a1a8, + /* CommentSingle */ + 'c1': #a0a1a8, + /* CommentSpecial */ + 'cs': #a0a1a8, + /* CommentPreproc */ + 'cp': #a0a1a8, + /* CommentPreprocFile */ + 'cpf': #a0a1a8, + /* Generic */ + 'g': #e72d40, + /* GenericDeleted */ + 'gd': #e72d40, + /* GenericEmph */ + 'ge': #e72d40, + /* GenericError */ + 'gr': #e72d40, + /* GenericHeading */ + 'gh': #e72d40, + /* GenericInserted */ + 'gi': #e72d40, + /* GenericOutput */ + 'go': #e72d40, + /* GenericPrompt */ + 'gp': #e72d40, + /* GenericStrong */ + 'gs': #e72d40, + /* GenericSubheading */ + 'gu': #e72d40, + /* GenericTraceback */ + 'gt': #e72d40, + /* TextWhitespace */ + 'w': #bbbbbb, + ) !default; +$code-highlight-color-map-dark: ( + /* Parentheses */ + 'p': #a9a9b3, + /* Keyword */ + 'k': #d371e3, + /* KeywordConstant */ + 'kc': #d371e3, + /* KeywordDeclaration */ + 'kd': #d371e3, + /* KeywordNamespace */ + 'kn': #d371e3, + /* KeywordPseudo */ + 'kp': #d371e3, + /* KeywordReserved */ + 'kr': #d371e3, + /* KeywordType */ + 'kt': #d371e3, + /* Name */ + 'n': #a9b2c0, + /* NameAttribute */ + 'na': #41b0f5, + /* NameBuiltin */ + 'nb': #19b9c4, + /* NameBuiltinPseudo */ + 'bp': #ecbf6f, + /* NameClass */ + 'nc': #ecbf6f, + /* NameConstant */ + 'no': #41b0f5, + /* NameDecorator */ + 'nd': #ecbf6f, + /* NameEntity */ + 'ni': #41b0f5, + /* NameException */ + 'ne': #41b0f5, + /* NameFunction */ + 'nf': #41b0f5, + /* NameFunctionMagic */ + 'fm': #19b9c4, + /* NameLabel */ + 'nl': #41b0f5, + /* NameNamespace */ + 'nn': #41b0f5, + /* NameOther */ + 'nx': #a9a9b3, + /* NameProperty */ + 'py': #41b0f5, + /* NameTag */ + 'nt': #41b0f5, + /* NameVariable */ + 'nv': #41b0f5, + /* NameVariableClass */ + 'vc': #41b0f5, + /* NameVariableGlobal */ + 'vg': #41b0f5, + /* NameVariableInstance */ + 'vi': #41b0f5, + /* NameVariableMagic */ + 'vm': #41b0f5, + /* Literal */ + 'l': #2aa198, + /* LiteralDate */ + 'ld': #2aa198, + /* LiteralString */ + 's': #8cc570, + /* LiteralStringAffix */ + 'sa': #8cc570, + /* LiteralStringBacktick */ + 'sb': #8cc570, + /* LiteralStringChar */ + 'sc': #8cc570, + /* LiteralStringDelimiter */ + 'dl': #8cc570, + /* LiteralStringDoc */ + 'sd': #8cc570, + /* LiteralStringDouble */ + 's2': #8cc570, + /* LiteralStringEscape */ + 'se': #8cc570, + /* LiteralStringHeredoc */ + 'sh': #8cc570, + /* LiteralStringInterpol */ + 'si': #8cc570, + /* LiteralStringOther */ + 'sx': #8cc570, + /* LiteralStringRegex */ + 'sr': #8cc570, + /* LiteralStringSingle */ + 's1': #8cc570, + /* LiteralStringSymbol */ + 'ss': #8cc570, + /* LiteralNumber */ + 'm': #db985c, + /* LiteralNumberBin */ + 'mb': #db985c, + /* LiteralNumberFloat */ + 'mf': #db985c, + /* LiteralNumberHex */ + 'mh': #db985c, + /* LiteralNumberInteger */ + 'mi': #db985c, + /* LiteralNumberIntegerLong */ + 'il': #db985c, + /* LiteralNumberOct */ + 'mo': #db985c, + /* Operator */ + 'o': #ecbf6f, + /* OperatorWord */ + 'ow': #d371e3, + /* Comment */ + 'c': #7e848f, + /* CommentHashbang */ + 'ch': #7e848f, + /* CommentMultiline */ + 'cm': #7e848f, + /* CommentSingle */ + 'c1': #7e848f, + /* CommentSpecial */ + 'cs': #7e848f, + /* CommentPreproc */ + 'cp': #7e848f, + /* CommentPreprocFile */ + 'cpf': #7e848f, + /* Generic */ + 'g': #f16372, + /* GenericDeleted */ + 'gd': #f16372, + /* GenericEmph */ + 'ge': #f16372, + /* GenericError */ + 'gr': #f16372, + /* GenericHeading */ + 'gh': #f16372, + /* GenericInserted */ + 'gi': #f16372, + /* GenericOutput */ + 'go': #f16372, + /* GenericPrompt */ + 'gp': #f16372, + /* GenericStrong */ + 'gs': #f16372, + /* GenericSubheading */ + 'gu': #f16372, + /* GenericTraceback */ + 'gt': #f16372, + /* TextWhitespace */ + 'w': #bbbbbb, + ) !default; diff --git a/assets/css/themes/syntax-gist-dark.scss b/assets/css/themes/syntax-gist-dark.scss new file mode 100644 index 000000000..f1c66ad09 --- /dev/null +++ b/assets/css/themes/syntax-gist-dark.scss @@ -0,0 +1,157 @@ +.dark .gist { + // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css + .highlight { + background: #141414; + } + .blob-num, + .blob-code-inner, + .highlight, + .pl-enm, + .pl-ko, + .pl-mo, + .pl-mp1 .pl-sf, + .pl-ms, + .pl-pdc1, + .pl-scp, + .pl-smc, + .pl-som, + .pl-va, + .pl-vpf, + .pl-vpu, + .pl-mdr { + color: #aab1bf; + } + .pl-mb, + .pl-pdb { + font-weight: 700; + } + .pl-c, + .pl-c span, + .pl-pdc { + color: #5b6270; + font-style: italic; + } + .pl-sr .pl-cce { + color: #56b5c2; + font-weight: 400; + } + .pl-ef, + .pl-en, + .pl-enf, + .pl-eoai, + .pl-kos, + .pl-mh .pl-pdh, + .pl-mr { + color: #61afef; + } + .pl-ens, + .pl-vi { + color: #be5046; + } + .pl-enti, + .pl-mai .pl-sf, + .pl-ml, + .pl-sf, + .pl-sr, + .pl-sr .pl-sra, + .pl-src, + .pl-st, + .pl-vo { + color: #56b5c2; + } + .pl-eoi, + .pl-mri, + .pl-pds, + .pl-pse .pl-s1, + .pl-s, + .pl-s1 { + color: #97c279; + } + .pl-k, + .pl-kolp, + .pl-mc, + .pl-pde { + color: #c578dd; + } + .pl-mi, + .pl-pdi { + color: #c578dd; + font-style: italic; + } + .pl-mp, + .pl-stp { + color: #818896; + } + .pl-mdh, + .pl-mdi, + .pl-mdr { + font-weight: 400; + } + .pl-mdht, + .pl-mi1 { + color: #97c279; + background: #020; + } + .pl-md, + .pl-mdhf { + color: #df6b75; + background: #200; + } + .pl-corl { + color: #df6b75; + text-decoration: underline; + } + .pl-ib { + background: #df6b75; + } + .pl-ii { + background: #e0c184; + color: #fff; + } + .pl-iu { + background: #e05151; + } + .pl-ms1 { + color: #aab1bf; + background: #373b41; + } + .pl-c1, + .pl-cn, + .pl-e, + .pl-eoa, + .pl-eoac, + .pl-eoac .pl-pde, + .pl-kou, + .pl-mm, + .pl-mp .pl-s3, + .pl-mq, + .pl-s3, + .pl-sok, + .pl-sv, + .pl-mb { + color: #d19965; + } + .pl-enc, + .pl-entc, + .pl-pse .pl-s2, + .pl-s2, + .pl-sc, + .pl-smp, + .pl-sr .pl-sre, + .pl-stj, + .pl-v, + .pl-pdb { + color: #e4bf7a; + } + .pl-ent, + .pl-entl, + .pl-entm, + .pl-mh, + .pl-pdv, + .pl-smi, + .pl-sol, + .pl-mdh, + .pl-mdi { + color: #df6b75; + } +} diff --git a/assets/css/themes/syntax-github.scss b/assets/css/themes/syntax-github.scss new file mode 100644 index 000000000..593fcb399 --- /dev/null +++ b/assets/css/themes/syntax-github.scss @@ -0,0 +1,89 @@ +// hugo gen chromastyles --style=github > syntax.css +.light .highlight { +/* Background */ .bg { background-color:#fff; } +/* PreWrapper */ .chroma { background-color:#fff; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color:#a61717;background-color:#e3d2d2 } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } +/* LineHighlight */ .chroma .hl { background-color:#e5e5e5 } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* Line */ .chroma .line { display:flex; } +/* Keyword */ .chroma .k { color:#000;font-weight:bold } +/* KeywordConstant */ .chroma .kc { color:#000;font-weight:bold } +/* KeywordDeclaration */ .chroma .kd { color:#000;font-weight:bold } +/* KeywordNamespace */ .chroma .kn { color:#000;font-weight:bold } +/* KeywordPseudo */ .chroma .kp { color:#000;font-weight:bold } +/* KeywordReserved */ .chroma .kr { color:#000;font-weight:bold } +/* KeywordType */ .chroma .kt { color:#458;font-weight:bold } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color:#008080 } +/* NameBuiltin */ .chroma .nb { color:#0086b3 } +/* NameBuiltinPseudo */ .chroma .bp { color:#999 } +/* NameClass */ .chroma .nc { color:#458;font-weight:bold } +/* NameConstant */ .chroma .no { color:#008080 } +/* NameDecorator */ .chroma .nd { color:#3c5d5d;font-weight:bold } +/* NameEntity */ .chroma .ni { color:#800080 } +/* NameException */ .chroma .ne { color:#900;font-weight:bold } +/* NameFunction */ .chroma .nf { color:#900;font-weight:bold } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { color:#900;font-weight:bold } +/* NameNamespace */ .chroma .nn { color:#555 } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { } +/* NameTag */ .chroma .nt { color:#000080 } +/* NameVariable */ .chroma .nv { color:#008080 } +/* NameVariableClass */ .chroma .vc { color:#008080 } +/* NameVariableGlobal */ .chroma .vg { color:#008080 } +/* NameVariableInstance */ .chroma .vi { color:#008080 } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color:#d14 } +/* LiteralStringAffix */ .chroma .sa { color:#d14 } +/* LiteralStringBacktick */ .chroma .sb { color:#d14 } +/* LiteralStringChar */ .chroma .sc { color:#d14 } +/* LiteralStringDelimiter */ .chroma .dl { color:#d14 } +/* LiteralStringDoc */ .chroma .sd { color:#d14 } +/* LiteralStringDouble */ .chroma .s2 { color:#d14 } +/* LiteralStringEscape */ .chroma .se { color:#d14 } +/* LiteralStringHeredoc */ .chroma .sh { color:#d14 } +/* LiteralStringInterpol */ .chroma .si { color:#d14 } +/* LiteralStringOther */ .chroma .sx { color:#d14 } +/* LiteralStringRegex */ .chroma .sr { color:#009926 } +/* LiteralStringSingle */ .chroma .s1 { color:#d14 } +/* LiteralStringSymbol */ .chroma .ss { color:#990073 } +/* LiteralNumber */ .chroma .m { color:#099 } +/* LiteralNumberBin */ .chroma .mb { color:#099 } +/* LiteralNumberFloat */ .chroma .mf { color:#099 } +/* LiteralNumberHex */ .chroma .mh { color:#099 } +/* LiteralNumberInteger */ .chroma .mi { color:#099 } +/* LiteralNumberIntegerLong */ .chroma .il { color:#099 } +/* LiteralNumberOct */ .chroma .mo { color:#099 } +/* Operator */ .chroma .o { color:#000;font-weight:bold } +/* OperatorWord */ .chroma .ow { color:#000;font-weight:bold } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color:#998;font-style:italic } +/* CommentHashbang */ .chroma .ch { color:#998;font-style:italic } +/* CommentMultiline */ .chroma .cm { color:#998;font-style:italic } +/* CommentSingle */ .chroma .c1 { color:#998;font-style:italic } +/* CommentSpecial */ .chroma .cs { color:#999;font-weight:bold;font-style:italic } +/* CommentPreproc */ .chroma .cp { color:#999;font-weight:bold;font-style:italic } +/* CommentPreprocFile */ .chroma .cpf { color:#999;font-weight:bold;font-style:italic } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color:#000;background-color:#fdd } +/* GenericEmph */ .chroma .ge { color:#000;font-style:italic } +/* GenericError */ .chroma .gr { color:#a00 } +/* GenericHeading */ .chroma .gh { color:#999 } +/* GenericInserted */ .chroma .gi { color:#000;background-color:#dfd } +/* GenericOutput */ .chroma .go { color:#888 } +/* GenericPrompt */ .chroma .gp { color:#555 } +/* GenericStrong */ .chroma .gs { font-weight:bold } +/* GenericSubheading */ .chroma .gu { color:#aaa } +/* GenericTraceback */ .chroma .gt { color:#a00 } +/* GenericUnderline */ .chroma .gl { text-decoration:underline } +/* TextWhitespace */ .chroma .w { color:#bbb } +} diff --git a/assets/css/themes/syntax-onedark.scss b/assets/css/themes/syntax-onedark.scss new file mode 100644 index 000000000..a2223265e --- /dev/null +++ b/assets/css/themes/syntax-onedark.scss @@ -0,0 +1,89 @@ +// hugo gen chromastyles --style=onedark > syntax.css +.dark { +/* Background */ .bg { color:#abb2bf;background-color:#282c34; } +/* PreWrapper */ .chroma { color:#abb2bf;background-color:#282c34; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { } +/* CodeLine */ .chroma .cl { } +/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } +/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } +/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } +/* LineHighlight */ .chroma .hl { background-color:#3d4148 } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#55595f } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#55595f } +/* Line */ .chroma .line { display:flex; } +/* Keyword */ .chroma .k { color:#c678dd } +/* KeywordConstant */ .chroma .kc { color:#e5c07b } +/* KeywordDeclaration */ .chroma .kd { color:#c678dd } +/* KeywordNamespace */ .chroma .kn { color:#c678dd } +/* KeywordPseudo */ .chroma .kp { color:#c678dd } +/* KeywordReserved */ .chroma .kr { color:#c678dd } +/* KeywordType */ .chroma .kt { color:#e5c07b } +/* Name */ .chroma .n { color:#e06c75 } +/* NameAttribute */ .chroma .na { color:#e06c75 } +/* NameBuiltin */ .chroma .nb { color:#e5c07b } +/* NameBuiltinPseudo */ .chroma .bp { color:#e06c75 } +/* NameClass */ .chroma .nc { color:#e5c07b } +/* NameConstant */ .chroma .no { color:#e06c75 } +/* NameDecorator */ .chroma .nd { color:#61afef } +/* NameEntity */ .chroma .ni { color:#e06c75 } +/* NameException */ .chroma .ne { color:#e06c75 } +/* NameFunction */ .chroma .nf { color:#61afef;font-weight:bold } +/* NameFunctionMagic */ .chroma .fm { color:#56b6c2;font-weight:bold } +/* NameLabel */ .chroma .nl { color:#e06c75 } +/* NameNamespace */ .chroma .nn { color:#e06c75 } +/* NameOther */ .chroma .nx { color:#e06c75 } +/* NameProperty */ .chroma .py { color:#e06c75 } +/* NameTag */ .chroma .nt { color:#e06c75 } +/* NameVariable */ .chroma .nv { color:#e06c75 } +/* NameVariableClass */ .chroma .vc { color:#e06c75 } +/* NameVariableGlobal */ .chroma .vg { color:#e06c75 } +/* NameVariableInstance */ .chroma .vi { color:#e06c75 } +/* NameVariableMagic */ .chroma .vm { color:#e06c75 } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color:#98c379 } +/* LiteralStringAffix */ .chroma .sa { color:#98c379 } +/* LiteralStringBacktick */ .chroma .sb { color:#98c379 } +/* LiteralStringChar */ .chroma .sc { color:#98c379 } +/* LiteralStringDelimiter */ .chroma .dl { color:#98c379 } +/* LiteralStringDoc */ .chroma .sd { color:#98c379 } +/* LiteralStringDouble */ .chroma .s2 { color:#98c379 } +/* LiteralStringEscape */ .chroma .se { color:#98c379 } +/* LiteralStringHeredoc */ .chroma .sh { color:#98c379 } +/* LiteralStringInterpol */ .chroma .si { color:#98c379 } +/* LiteralStringOther */ .chroma .sx { color:#98c379 } +/* LiteralStringRegex */ .chroma .sr { color:#98c379 } +/* LiteralStringSingle */ .chroma .s1 { color:#98c379 } +/* LiteralStringSymbol */ .chroma .ss { color:#98c379 } +/* LiteralNumber */ .chroma .m { color:#d19a66 } +/* LiteralNumberBin */ .chroma .mb { color:#d19a66 } +/* LiteralNumberFloat */ .chroma .mf { color:#d19a66 } +/* LiteralNumberHex */ .chroma .mh { color:#d19a66 } +/* LiteralNumberInteger */ .chroma .mi { color:#d19a66 } +/* LiteralNumberIntegerLong */ .chroma .il { color:#d19a66 } +/* LiteralNumberOct */ .chroma .mo { color:#d19a66 } +/* Operator */ .chroma .o { color:#56b6c2 } +/* OperatorWord */ .chroma .ow { color:#56b6c2 } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color:#7f848e } +/* CommentHashbang */ .chroma .ch { color:#7f848e } +/* CommentMultiline */ .chroma .cm { color:#7f848e } +/* CommentSingle */ .chroma .c1 { color:#7f848e } +/* CommentSpecial */ .chroma .cs { color:#7f848e } +/* CommentPreproc */ .chroma .cp { color:#7f848e } +/* CommentPreprocFile */ .chroma .cpf { color:#7f848e } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color:#e06c75 } +/* GenericEmph */ .chroma .ge { } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { color:#98c379;font-weight:bold } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { } +/* GenericSubheading */ .chroma .gu { } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } +} \ No newline at end of file diff --git a/assets/js/theme.js b/assets/js/theme.js index 0cab9a961..79e1dd6e2 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -84,8 +84,6 @@ function initSwitchTheme () { themeSwitch.addEventListener('click', () => { const currentTheme = document.body.getAttribute('theme') if (currentTheme === 'dark') { - setColorTheme('black') - } else if (currentTheme === 'black') { setColorTheme('light') } else { setColorTheme('dark') @@ -689,8 +687,7 @@ function initMeta () { const themeColorMeta = getMeta('theme-color') const metaColors = { light: '#f8f8f8', - dark: '#252627', - black: '#000000' + dark: '#161b22' } window._metaThemeColorOnSwitchTheme = () => { themeColorMeta.content = metaColors[document.body.getAttribute('theme')] diff --git a/assets/lib/aplayer/dark.scss b/assets/lib/aplayer/dark.scss index ef2dccb18..bff3cdd10 100644 --- a/assets/lib/aplayer/dark.scss +++ b/assets/lib/aplayer/dark.scss @@ -110,115 +110,3 @@ } } } -[theme=black] .aplayer { - background: #212121; - - &.aplayer-withlist { - .aplayer-info { - border-bottom-color: #5c5c5c; - } - } - - &.aplayer-fixed { - .aplayer-list { - border-color: #5c5c5c; - } - } - - .aplayer-body { - background-color: #212121; - } - - .aplayer-info { - border-top-color: #212121; - } - - .aplayer-info { - .aplayer-music { - .aplayer-title { - color: #fff; - } - - .aplayer-author { - color: #fff; - } - } - - .aplayer-controller { - .aplayer-time { - color: #eee; - - .aplayer-icon { - path { - fill: #eee; - } - } - } - } - } - - .aplayer-list { - background-color: #212121; - - &::-webkit-scrollbar-thumb { - background-color: #999; - } - - &::-webkit-scrollbar-thumb:hover { - background-color: #bbb; - } - - li { - color: #fff; - border-top-color: #666; - - &:hover { - background: #4e4e4e; - } - - &.aplayer-list-light { - background: #6c6c6c; - } - - .aplayer-list-index { - color: #ddd; - } - - .aplayer-list-author { - color: #ddd; - } - } - } - - .aplayer-lrc { - text-shadow: -1px -1px 0 #666; - - &:before { - background: -moz-linear-gradient(top, rgba(33,33,33,1) 0%, rgba(33,33,33,0) 100%); - background: -webkit-linear-gradient(top, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%); - background: linear-gradient(to bottom, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 ); - } - - &:after { - background: -moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%); - background: -webkit-linear-gradient(top, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%); - background: linear-gradient(to bottom, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 ); - } - - p { - color: #fff; - } - } - - .aplayer-miniswitcher { - background: #484848; - - .aplayer-icon { - path { - fill: #eee; - } - } - } -} diff --git a/assets/lib/valine/Valine.scss b/assets/lib/valine/Valine.scss index 0db5361f1..90a5cfd2a 100644 --- a/assets/lib/valine/Valine.scss +++ b/assets/lib/valine/Valine.scss @@ -4,39 +4,15 @@ .v[data-class=v] { .vbtn { color: $global-font-color; - [theme=dark] & { - color: $global-font-color-dark; - } - [theme=black] & { - color: $global-font-color-black; - } } .vicon { fill: $global-font-color; - [theme=dark] & { - fill: $global-font-color-dark; - } - [theme=black] & { - fill: $global-font-color-black; - } } code, pre { background-color: $code-background-color; - [theme=dark] & { - background-color: $code-background-color-dark; - } - [theme=black] & { - background-color: $code-background-color-black; - } } .status-bar, .veditor, .vinput, p, pre code { color: $global-font-color; - [theme=dark] & { - color: $global-font-color-dark; - } - [theme=black] & { - color: $global-font-color-black; - } } .vcards .vcard { .vh, .vquote { @@ -45,23 +21,12 @@ .vcontent.expand:after { color: $global-font-color; background: $global-background-color; - [theme=dark] & { - color: $global-font-color-dark; - background: $global-background-color-dark; - } - [theme=black] & { - color: $global-font-color-black; - background: $global-background-color-black; - } } .vcontent.expand:before { background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.9)); - [theme=dark] & { + .dark & { background: linear-gradient(180deg,hsla(0,0%,100%,0),#292a2de6); } - [theme=black] & { - background: linear-gradient(180deg,hsla(0,0%,100%,0),#000000e6); - } } } } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 6aacb92db..f0ab7b270 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -45,6 +45,7 @@ diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html index 57887889b..7eac7e301 100644 --- a/layouts/partials/comment.html +++ b/layouts/partials/comment.html @@ -78,7 +78,7 @@
{{- $source := $cdn.walineCSS | default "lib/waline/waline.css" -}} {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}} - {{- $commentConfig = dict "el" "#waline" "serverURL" $waline.serverURL "lang" .Lang "dark" "body[theme='dark'], body[theme='black']" "copyright" true | dict "waline" | merge $commentConfig -}} + {{- $commentConfig = dict "el" "#waline" "serverURL" $waline.serverURL "lang" .Lang "dark" "body[theme='dark']" "copyright" true | dict "waline" | merge $commentConfig -}} {{- with $waline.pageview -}} {{- $commentConfig = dict "pageview" . | dict "waline" | merge $commentConfig -}} {{- end -}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 94ae2e110..9d5ec65ac 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -87,7 +87,6 @@ @@ -174,7 +173,6 @@ diff --git a/tailwind.config.js b/tailwind.config.js index 838b4a7fb..feff505d2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { theme: { extend: { colors: { - "doit-blue": { + 'doit-blue': { '50': '#f2f9fd', '100': '#e4f2fa', '200': '#c2e5f5', @@ -34,7 +34,20 @@ module.exports = { '900': '#353c44', '950': '#20252b', }, - }, + 'fgColor-default' : 'var(--fgColor-default)', + 'fgColor-secondary' : 'var(--fgColor-secondary)', + 'fgColor-muted' : 'var(--fgColor-muted)', + 'fgColor-link' : 'var(--fgColor-link)', + 'fgColor-link-hover' : 'var(--fgColor-link-hover)', + 'bgColor-default' : 'var(--bgColor-default)', + 'bgColor-secondary' : 'var(--bgColor-secondary)', + 'bgColor-accent-emphasis' : 'var(--bgColor-accent-emphasis)', + 'bgColor-accent-muted' : 'var(--bgColor-accent-muted)', + 'borderColor-default' : 'var(--borderColor-default)', + 'selection-bgColor' : 'var(--selection-bgColor)', + 'button-default-bgColor-rest' : 'var(--button-default-bgColor-rest)', + 'button-default-bgColor-hover' : 'var(--button-default-bgColor-hover)', + } } }, plugins: [