mirror of https://github.com/luizdepra/hugo-coder.git

Sam A
28.55.2022 30e9adb8321c431d843aafc6acb4491341d97dce
Fix code blocks in dark mode (#733)

### Prerequisites

Put an `x` into the box(es) that apply:

- [x] This pull request fixes a bug.
- [ ] This pull request adds a feature.
- [ ] This pull request introduces breaking change.

### Description

In dark mode, the `code` tag inside `pre` in source code blocks has a
different background color, resulting in two different colors like the
following example:


![codeblocks](https://user-images.githubusercontent.com/26819407/202913094-757949fa-feb6-43a3-ae01-2a3a9ed6b5ee.png)

The bug seems to have been introduced by commit
476429d42ac1971595ccd44a8232685a5ee86d8a.

I have fixed it by adding `inherit` colors to `code` tags that are
inside `.highlight` classes.

### Issues Resolved

No issue has been filed.

### Checklist

Put an `x` into the box(es) that apply:

#### General

- [x] Describe what changes are being made
- [x] Explain why and how the changes were necessary and implemented
respectively
- [ ] Reference issue with `#<ISSUE_NO>` if applicable

#### Resources

- [x] If you have changed any SCSS code, run `make release` to
regenerate all CSS files

#### Contributors

- [ ] Add yourself to `CONTRIBUTORS.md` if you aren't on it already
3 files modified
9 ■■■■ changed files
assets/scss/_base_dark.scss 5 ●●●●● patch | view | raw | blame | history
resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.content 2 ●●● patch | view | raw | blame | history
resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.json 2 ●●● patch | view | raw | blame | history
assets/scss/_base_dark.scss
@@ -43,6 +43,11 @@
    pre {
      background-color: $alt-bg-color-dark;
      color: $fg-color-dark;
      code {
        background-color: inherit;
        color: inherit;
      }
    }
  }
resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.content
@@ -1 +1 @@
body.colorscheme-dark{color:#dadada;background-color:#212121}body.colorscheme-dark a{color:#42a5f5}body.colorscheme-dark h1,body.colorscheme-dark h2,body.colorscheme-dark h3,body.colorscheme-dark h4,body.colorscheme-dark h5,body.colorscheme-dark h6{color:#dadada}body.colorscheme-dark h1:hover .heading-link,body.colorscheme-dark h2:hover .heading-link,body.colorscheme-dark h3:hover .heading-link,body.colorscheme-dark h4:hover .heading-link,body.colorscheme-dark h5:hover .heading-link,body.colorscheme-dark h6:hover .heading-link{visibility:visible}body.colorscheme-dark h1 .heading-link,body.colorscheme-dark h2 .heading-link,body.colorscheme-dark h3 .heading-link,body.colorscheme-dark h4 .heading-link,body.colorscheme-dark h5 .heading-link,body.colorscheme-dark h6 .heading-link{color:#42a5f5;font-weight:inherit;text-decoration:none;font-size:80%;visibility:hidden}body.colorscheme-dark h1 .title-link,body.colorscheme-dark h2 .title-link,body.colorscheme-dark h3 .title-link,body.colorscheme-dark h4 .title-link,body.colorscheme-dark h5 .title-link,body.colorscheme-dark h6 .title-link{color:inherit;font-weight:inherit;text-decoration:none}body.colorscheme-dark code{background-color:#424242;color:#dadada}body.colorscheme-dark .highlight pre{background-color:#424242;color:#dadada}body.colorscheme-dark :not(.highlight)>pre code{background-color:inherit;color:inherit}body.colorscheme-dark blockquote{border-left:2px solid #424242}body.colorscheme-dark th,body.colorscheme-dark td{padding:1.6rem}body.colorscheme-dark table{border-collapse:collapse}body.colorscheme-dark table td,body.colorscheme-dark table th{border:2px solid #dadada}body.colorscheme-dark table tr:first-child th{border-top:0}body.colorscheme-dark table tr:last-child td{border-bottom:0}body.colorscheme-dark table tr td:first-child,body.colorscheme-dark table tr th:first-child{border-left:0}body.colorscheme-dark table tr td:last-child,body.colorscheme-dark table tr th:last-child{border-right:0}@media(prefers-color-scheme:dark){body.colorscheme-auto{color:#dadada;background-color:#212121}body.colorscheme-auto a{color:#42a5f5}body.colorscheme-auto h1,body.colorscheme-auto h2,body.colorscheme-auto h3,body.colorscheme-auto h4,body.colorscheme-auto h5,body.colorscheme-auto h6{color:#dadada}body.colorscheme-auto h1:hover .heading-link,body.colorscheme-auto h2:hover .heading-link,body.colorscheme-auto h3:hover .heading-link,body.colorscheme-auto h4:hover .heading-link,body.colorscheme-auto h5:hover .heading-link,body.colorscheme-auto h6:hover .heading-link{visibility:visible}body.colorscheme-auto h1 .heading-link,body.colorscheme-auto h2 .heading-link,body.colorscheme-auto h3 .heading-link,body.colorscheme-auto h4 .heading-link,body.colorscheme-auto h5 .heading-link,body.colorscheme-auto h6 .heading-link{color:#42a5f5;font-weight:inherit;text-decoration:none;font-size:80%;visibility:hidden}body.colorscheme-auto h1 .title-link,body.colorscheme-auto h2 .title-link,body.colorscheme-auto h3 .title-link,body.colorscheme-auto h4 .title-link,body.colorscheme-auto h5 .title-link,body.colorscheme-auto h6 .title-link{color:inherit;font-weight:inherit;text-decoration:none}body.colorscheme-auto code{background-color:#424242;color:#dadada}body.colorscheme-auto .highlight pre{background-color:#424242;color:#dadada}body.colorscheme-auto :not(.highlight)>pre code{background-color:inherit;color:inherit}body.colorscheme-auto blockquote{border-left:2px solid #424242}body.colorscheme-auto th,body.colorscheme-auto td{padding:1.6rem}body.colorscheme-auto table{border-collapse:collapse}body.colorscheme-auto table td,body.colorscheme-auto table th{border:2px solid #dadada}body.colorscheme-auto table tr:first-child th{border-top:0}body.colorscheme-auto table tr:last-child td{border-bottom:0}body.colorscheme-auto table tr td:first-child,body.colorscheme-auto table tr th:first-child{border-left:0}body.colorscheme-auto table tr td:last-child,body.colorscheme-auto table tr th:last-child{border-right:0}}body.colorscheme-dark .content .post .tags .tag{background-color:#424242}body.colorscheme-dark .content .post .tags .tag a{color:#dadada}body.colorscheme-dark .content .post .tags .tag a:active{color:#dadada}body.colorscheme-dark .content .list ul li .title{color:#dadada}body.colorscheme-dark .content .list ul li .title:hover,body.colorscheme-dark .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-dark .content .centered .about ul li a{color:#dadada}body.colorscheme-dark .content .centered .about ul li a:hover,body.colorscheme-dark .content .centered .about ul li a:focus{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .content .post .tags .tag{background-color:#424242}body.colorscheme-auto .content .post .tags .tag a{color:#dadada}body.colorscheme-auto .content .post .tags .tag a:active{color:#dadada}body.colorscheme-auto .content .list ul li .title{color:#dadada}body.colorscheme-auto .content .list ul li .title:hover,body.colorscheme-auto .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-auto .content .centered .about ul li a{color:#dadada}body.colorscheme-auto .content .centered .about ul li a:hover,body.colorscheme-auto .content .centered .about ul li a:focus{color:#42a5f5}}body.colorscheme-dark .notice .notice-title{border-bottom:1px solid #212121}@media(prefers-color-scheme:dark){body.colorscheme-auto .notice .notice-title{border-bottom:1px solid #212121}}body.colorscheme-dark .navigation a,body.colorscheme-dark .navigation span{color:#dadada}body.colorscheme-dark .navigation a:hover,body.colorscheme-dark .navigation a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation #menu-toggle:checked+label>i{color:#424242}}body.colorscheme-dark .navigation i{color:#dadada}body.colorscheme-dark .navigation i:hover,body.colorscheme-dark .navigation i:focus{color:#42a5f5}body.colorscheme-dark .navigation .menu-button i:hover,body.colorscheme-dark .navigation .menu-button i:focus{color:#dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation a,body.colorscheme-auto .navigation span{color:#dadada}body.colorscheme-auto .navigation a:hover,body.colorscheme-auto .navigation a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation #menu-toggle:checked+label>i{color:#424242}}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation i{color:#dadada}body.colorscheme-auto .navigation i:hover,body.colorscheme-auto .navigation i:focus{color:#42a5f5}body.colorscheme-auto .navigation .menu-button i:hover,body.colorscheme-auto .navigation .menu-button i:focus{color:#dadada}}body.colorscheme-dark .tabs label.tab-label{background-color:#424242;border-color:#4f4f4f}body.colorscheme-dark .tabs input.tab-input:checked+label.tab-label{background-color:#212121}body.colorscheme-dark .tabs .tab-content{background-color:#212121;border-color:#4f4f4f}@media(prefers-color-scheme:dark){body.colorscheme-auto .tabs label.tab-label{background-color:#424242;border-color:#4f4f4f}body.colorscheme-auto .tabs input.tab-input:checked+label.tab-label{background-color:#212121}body.colorscheme-auto .tabs .tab-content{background-color:#212121;border-color:#4f4f4f}}body.colorscheme-dark .taxonomy-element{background-color:#424242}body.colorscheme-dark .taxonomy-element a{color:#dadada}body.colorscheme-dark .taxonomy-element a:active{color:#dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto .taxonomy-element{background-color:#424242}body.colorscheme-auto .taxonomy-element a{color:#dadada}body.colorscheme-auto .taxonomy-element a:active{color:#dadada}}body.colorscheme-dark .footer a{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .footer a{color:#42a5f5}}body.colorscheme-dark .float-container a{color:#dadada;background-color:#424242}body.colorscheme-dark .float-container a:hover,body.colorscheme-dark .float-container a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .float-container a:hover,body.colorscheme-dark .float-container a:focus{color:#dadada}}@media(prefers-color-scheme:dark){body.colorscheme-auto .float-container a{color:#dadada;background-color:#424242}body.colorscheme-auto .float-container a:hover,body.colorscheme-auto .float-container a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .float-container a:hover,body.colorscheme-auto .float-container a:focus{color:#dadada}}
body.colorscheme-dark{color:#dadada;background-color:#212121}body.colorscheme-dark a{color:#42a5f5}body.colorscheme-dark h1,body.colorscheme-dark h2,body.colorscheme-dark h3,body.colorscheme-dark h4,body.colorscheme-dark h5,body.colorscheme-dark h6{color:#dadada}body.colorscheme-dark h1:hover .heading-link,body.colorscheme-dark h2:hover .heading-link,body.colorscheme-dark h3:hover .heading-link,body.colorscheme-dark h4:hover .heading-link,body.colorscheme-dark h5:hover .heading-link,body.colorscheme-dark h6:hover .heading-link{visibility:visible}body.colorscheme-dark h1 .heading-link,body.colorscheme-dark h2 .heading-link,body.colorscheme-dark h3 .heading-link,body.colorscheme-dark h4 .heading-link,body.colorscheme-dark h5 .heading-link,body.colorscheme-dark h6 .heading-link{color:#42a5f5;font-weight:inherit;text-decoration:none;font-size:80%;visibility:hidden}body.colorscheme-dark h1 .title-link,body.colorscheme-dark h2 .title-link,body.colorscheme-dark h3 .title-link,body.colorscheme-dark h4 .title-link,body.colorscheme-dark h5 .title-link,body.colorscheme-dark h6 .title-link{color:inherit;font-weight:inherit;text-decoration:none}body.colorscheme-dark code{background-color:#424242;color:#dadada}body.colorscheme-dark .highlight pre{background-color:#424242;color:#dadada}body.colorscheme-dark .highlight pre code{background-color:inherit;color:inherit}body.colorscheme-dark :not(.highlight)>pre code{background-color:inherit;color:inherit}body.colorscheme-dark blockquote{border-left:2px solid #424242}body.colorscheme-dark th,body.colorscheme-dark td{padding:1.6rem}body.colorscheme-dark table{border-collapse:collapse}body.colorscheme-dark table td,body.colorscheme-dark table th{border:2px solid #dadada}body.colorscheme-dark table tr:first-child th{border-top:0}body.colorscheme-dark table tr:last-child td{border-bottom:0}body.colorscheme-dark table tr td:first-child,body.colorscheme-dark table tr th:first-child{border-left:0}body.colorscheme-dark table tr td:last-child,body.colorscheme-dark table tr th:last-child{border-right:0}@media(prefers-color-scheme:dark){body.colorscheme-auto{color:#dadada;background-color:#212121}body.colorscheme-auto a{color:#42a5f5}body.colorscheme-auto h1,body.colorscheme-auto h2,body.colorscheme-auto h3,body.colorscheme-auto h4,body.colorscheme-auto h5,body.colorscheme-auto h6{color:#dadada}body.colorscheme-auto h1:hover .heading-link,body.colorscheme-auto h2:hover .heading-link,body.colorscheme-auto h3:hover .heading-link,body.colorscheme-auto h4:hover .heading-link,body.colorscheme-auto h5:hover .heading-link,body.colorscheme-auto h6:hover .heading-link{visibility:visible}body.colorscheme-auto h1 .heading-link,body.colorscheme-auto h2 .heading-link,body.colorscheme-auto h3 .heading-link,body.colorscheme-auto h4 .heading-link,body.colorscheme-auto h5 .heading-link,body.colorscheme-auto h6 .heading-link{color:#42a5f5;font-weight:inherit;text-decoration:none;font-size:80%;visibility:hidden}body.colorscheme-auto h1 .title-link,body.colorscheme-auto h2 .title-link,body.colorscheme-auto h3 .title-link,body.colorscheme-auto h4 .title-link,body.colorscheme-auto h5 .title-link,body.colorscheme-auto h6 .title-link{color:inherit;font-weight:inherit;text-decoration:none}body.colorscheme-auto code{background-color:#424242;color:#dadada}body.colorscheme-auto .highlight pre{background-color:#424242;color:#dadada}body.colorscheme-auto .highlight pre code{background-color:inherit;color:inherit}body.colorscheme-auto :not(.highlight)>pre code{background-color:inherit;color:inherit}body.colorscheme-auto blockquote{border-left:2px solid #424242}body.colorscheme-auto th,body.colorscheme-auto td{padding:1.6rem}body.colorscheme-auto table{border-collapse:collapse}body.colorscheme-auto table td,body.colorscheme-auto table th{border:2px solid #dadada}body.colorscheme-auto table tr:first-child th{border-top:0}body.colorscheme-auto table tr:last-child td{border-bottom:0}body.colorscheme-auto table tr td:first-child,body.colorscheme-auto table tr th:first-child{border-left:0}body.colorscheme-auto table tr td:last-child,body.colorscheme-auto table tr th:last-child{border-right:0}}body.colorscheme-dark .content .post .tags .tag{background-color:#424242}body.colorscheme-dark .content .post .tags .tag a{color:#dadada}body.colorscheme-dark .content .post .tags .tag a:active{color:#dadada}body.colorscheme-dark .content .list ul li .title{color:#dadada}body.colorscheme-dark .content .list ul li .title:hover,body.colorscheme-dark .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-dark .content .centered .about ul li a{color:#dadada}body.colorscheme-dark .content .centered .about ul li a:hover,body.colorscheme-dark .content .centered .about ul li a:focus{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .content .post .tags .tag{background-color:#424242}body.colorscheme-auto .content .post .tags .tag a{color:#dadada}body.colorscheme-auto .content .post .tags .tag a:active{color:#dadada}body.colorscheme-auto .content .list ul li .title{color:#dadada}body.colorscheme-auto .content .list ul li .title:hover,body.colorscheme-auto .content .list ul li .title:focus{color:#42a5f5}body.colorscheme-auto .content .centered .about ul li a{color:#dadada}body.colorscheme-auto .content .centered .about ul li a:hover,body.colorscheme-auto .content .centered .about ul li a:focus{color:#42a5f5}}body.colorscheme-dark .notice .notice-title{border-bottom:1px solid #212121}@media(prefers-color-scheme:dark){body.colorscheme-auto .notice .notice-title{border-bottom:1px solid #212121}}body.colorscheme-dark .navigation a,body.colorscheme-dark .navigation span{color:#dadada}body.colorscheme-dark .navigation a:hover,body.colorscheme-dark .navigation a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (max-width:768px){body.colorscheme-dark .navigation #menu-toggle:checked+label>i{color:#424242}}body.colorscheme-dark .navigation i{color:#dadada}body.colorscheme-dark .navigation i:hover,body.colorscheme-dark .navigation i:focus{color:#42a5f5}body.colorscheme-dark .navigation .menu-button i:hover,body.colorscheme-dark .navigation .menu-button i:focus{color:#dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation a,body.colorscheme-auto .navigation span{color:#dadada}body.colorscheme-auto .navigation a:hover,body.colorscheme-auto .navigation a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list{background-color:#212121;border-top:solid 2px #424242;border-bottom:solid 2px #424242}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation .navigation-list .menu-separator{border-top:2px solid #dadada}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .navigation #menu-toggle:checked+label>i{color:#424242}}@media(prefers-color-scheme:dark){body.colorscheme-auto .navigation i{color:#dadada}body.colorscheme-auto .navigation i:hover,body.colorscheme-auto .navigation i:focus{color:#42a5f5}body.colorscheme-auto .navigation .menu-button i:hover,body.colorscheme-auto .navigation .menu-button i:focus{color:#dadada}}body.colorscheme-dark .tabs label.tab-label{background-color:#424242;border-color:#4f4f4f}body.colorscheme-dark .tabs input.tab-input:checked+label.tab-label{background-color:#212121}body.colorscheme-dark .tabs .tab-content{background-color:#212121;border-color:#4f4f4f}@media(prefers-color-scheme:dark){body.colorscheme-auto .tabs label.tab-label{background-color:#424242;border-color:#4f4f4f}body.colorscheme-auto .tabs input.tab-input:checked+label.tab-label{background-color:#212121}body.colorscheme-auto .tabs .tab-content{background-color:#212121;border-color:#4f4f4f}}body.colorscheme-dark .taxonomy-element{background-color:#424242}body.colorscheme-dark .taxonomy-element a{color:#dadada}body.colorscheme-dark .taxonomy-element a:active{color:#dadada}@media(prefers-color-scheme:dark){body.colorscheme-auto .taxonomy-element{background-color:#424242}body.colorscheme-auto .taxonomy-element a{color:#dadada}body.colorscheme-auto .taxonomy-element a:active{color:#dadada}}body.colorscheme-dark .footer a{color:#42a5f5}@media(prefers-color-scheme:dark){body.colorscheme-auto .footer a{color:#42a5f5}}body.colorscheme-dark .float-container a{color:#dadada;background-color:#424242}body.colorscheme-dark .float-container a:hover,body.colorscheme-dark .float-container a:focus{color:#42a5f5}@media only screen and (max-width:768px){body.colorscheme-dark .float-container a:hover,body.colorscheme-dark .float-container a:focus{color:#dadada}}@media(prefers-color-scheme:dark){body.colorscheme-auto .float-container a{color:#dadada;background-color:#424242}body.colorscheme-auto .float-container a:hover,body.colorscheme-auto .float-container a:focus{color:#42a5f5}}@media only screen and (prefers-color-scheme:dark) and (max-width:768px){body.colorscheme-auto .float-container a:hover,body.colorscheme-auto .float-container a:focus{color:#dadada}}
resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.json
@@ -1 +1 @@
{"Target":"css/coder-dark.min.78b5fe3864945faf5207fb8fe3ab2320d49c3365def0e88ac1df0ddadc54a03c.css","MediaType":"text/css","Data":{"Integrity":"sha256-eLX+OGSUX69SB/uP46sjINScM2Xe8OiKwd8N2txUoDw="}}
{"Target":"css/coder-dark.min.216e36d3eaf6f4cdfd67dc1200c49a8169e6478102977b3e9ac51a064c57054c.css","MediaType":"text/css","Data":{"Integrity":"sha256-IW420+r29M39Z9wSAMSagWnmR4ECl3s+msUaBkxXBUw="}}