forked from git/git-scm.com
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dark-mode' into gh-pages
This is ongoing work, deployed to my personal fork for the convenience of testing out the changes from Pull Request 1888. Signed-off-by: Johannes Schindelin <[email protected]>
- Loading branch information
Showing
41 changed files
with
344 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| @mixin mode($mode: light, $theme: "") { | ||
| // Palette | ||
| $orange: #f14e32; | ||
| $blue: #009099; | ||
| $font-color: #4e443c; | ||
| $aside-font-color: lighten($font-color, 20%); | ||
| $light-font-color: #9a9994; | ||
| $link-color: #0388a6; | ||
| $nav-link-color: #413932; | ||
| $fixed-width-font-color: #4e443c; | ||
| $button-bg-color: rgba(223, 221, 213, 0.33); | ||
| $button-bg-hover-color: rgba(250, 250, 250, 0.9); | ||
| $mark-color: #ff0; | ||
| $base-border-color: #d8d7cf; | ||
| $callout-color: #e9e8e0; | ||
| $highlight-bg-color: #eee0b5; | ||
| $black-3: #333333; | ||
| $main-bg: #fcfcfa; | ||
| $bg-color: #f0efe7 url($baseurl + "images/bg/body.jpg"); | ||
| $sidebar-bg-color: #efefe7; | ||
| $no-changes-bg-color: #f5f5f3; | ||
| $dropdown-active-bg-color: #fff; | ||
| $versions-footer-bg-color: #eae9e0; | ||
|
|
||
| @if $mode == dark { | ||
| $orange: #d7834f; | ||
| $blue: #007a7e; | ||
| $font-color: #b3b1b1; | ||
| $aside-font-color: darken($font-color, 10%); | ||
| $light-font-color: #bdbbb0; | ||
| $link-color: #5facaf; | ||
| $nav-link-color: #979594; | ||
| $fixed-width-font-color: #afa7a0; | ||
| $button-bg-hover-color: rgba(223, 221, 213, 0.6); | ||
| $mark-color: #aeae74; | ||
| $base-border-color: #b3b2a7; | ||
| $callout-color: #555555; | ||
| $highlight-bg-color: #7d724f; | ||
| $black-3: #cccccc; | ||
| $main-bg: #333333; | ||
| $bg-color: #2a2a2aff; | ||
| $sidebar-bg-color: #3d3d3a; | ||
| $no-changes-bg-color: #515150; | ||
| $dropdown-active-bg-color: #515150; | ||
| $versions-footer-bg-color: #1f1f1e; | ||
|
|
||
| :root#{$theme} { | ||
| div#masthead { | ||
| background: transparent; | ||
| } | ||
| div#masthead::before { | ||
| content: ""; | ||
| width: 100%; | ||
| height: 295px; | ||
| @include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat); | ||
| position: absolute; | ||
| filter: brightness(.4) contrast(1.6); | ||
| z-index: -1; | ||
| } | ||
| img { | ||
| filter: brightness(.6) contrast(1.2); | ||
| } | ||
| // let the logo shine slightly brighter | ||
| img[alt="Git"] { | ||
| filter: brightness(0.9) contrast(1.5); | ||
| } | ||
|
|
||
| a.subtle-button { | ||
| background-image: linear-gradient(#555555, #777777); | ||
| border-top: solid 1px #333333; | ||
| border-right: solid 1px #333333; | ||
| border-bottom: solid 1px #333333; | ||
| border-left: solid 1px #333333; | ||
| @include box-shadow(none); | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: dashed 1px underline; | ||
| } | ||
|
|
||
| #front-nav img { | ||
| filter: none; | ||
| } | ||
|
|
||
| div.monitor { | ||
| filter: brightness(.85); | ||
| } | ||
|
|
||
| .monitor a { | ||
| color: #dbd7d7; | ||
| } | ||
|
|
||
| hr.sidebar { | ||
| filter: brightness(0.5); | ||
| } | ||
|
|
||
| #documentation #main div.verseblock pre.content { | ||
| color: var(--light-font-color); | ||
| background-color: #5e5951; | ||
| } | ||
|
|
||
| form#search { | ||
| @include box-shadow(none); | ||
| } | ||
|
|
||
| input.pagefind-ui__search-input { | ||
| background: var(--main-bg); | ||
| } | ||
|
|
||
| #reference-version { | ||
| background-color: rgba(111, 110, 105, 0.33); | ||
| } | ||
|
|
||
| #l10n-versions-dropdown footer a { | ||
| color: #6969dd; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| :root#{$theme} { | ||
| --orange: #{$orange}; | ||
| --orange-darker-5: #{darken($orange, 5%)}; | ||
| --blue: #{$blue}; | ||
| --font-color: #{$font-color}; | ||
| --aside-font-color: #{$aside-font-color}; | ||
| --light-font-color: #{$light-font-color}; | ||
| --light-font-color-darker-10: #{darken($light-font-color, 10%)}; | ||
| --light-font-color-darker-25: #{darken($light-font-color, 25%)}; | ||
| --light-font-color-darker-35: #{darken($light-font-color, 35%)}; | ||
| --light-font-color-darker-55: #{darken($light-font-color, 55%)}; | ||
| --light-font-color-lighter-20: #{lighten($light-font-color, 20%)}; | ||
| --link-color: #{$link-color}; | ||
| --nav-link-color: #{$nav-link-color}; | ||
| --link-hover-color: #{lighten($link-color, 10%)}; | ||
| --fixed-width-font-color: #{$fixed-width-font-color}; | ||
| --button-bg-color: #{$button-bg-color}; | ||
| --button-bg-hover-color: #{$button-bg-hover-color}; | ||
| --mark-color: #{$mark-color}; | ||
| --base-border-color: #{$base-border-color}; | ||
| --base-border-color-darker-8: #{darken($base-border-color, 8%)}; | ||
| --base-border-color-lighter-10: #{lighten($base-border-color, 10%)}; | ||
| --callout-color: #{$callout-color}; | ||
| --highlight-bg-color: #{$highlight-bg-color}; | ||
|
|
||
| --black-3: #{$black-3}; | ||
| --main-bg: #{$main-bg}; | ||
| --sidebar-bg-color: #{$sidebar-bg-color}; | ||
| --bg-color: #{$bg-color}; | ||
| --no-changes-bg-color: #{$no-changes-bg-color}; | ||
| --dropdown-active-bg-color: #{$dropdown-active-bg-color}; | ||
| --versions-footer-bg-color: #{$versions-footer-bg-color}; | ||
| } | ||
| } | ||
|
|
||
| @include mode | ||
| @include mode($mode: dark, $theme: '[data-theme="dark"]') | ||
|
|
||
| @media screen and (prefers-color-scheme: dark) { | ||
| @include mode($mode: dark) | ||
| @include mode($mode: light, $theme: '[data-theme="light"]') | ||
| } | ||
|
|
||
| #dark-mode-button { | ||
| display: none; | ||
| z-index: 10; | ||
| position: fixed; | ||
| right: 20px; | ||
| bottom: 2rem; | ||
| border-radius: 50px; | ||
| border: 2px solid transparent; | ||
| font-size: x-large; | ||
| padding: 10px 5px 10px 5px; | ||
| background-color: var(--button-bg-color); | ||
| &:hover { | ||
| background-color: var(--button-bg-hover-color); | ||
| } | ||
| text-decoration: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.