diff --git a/assets/js/application.js b/assets/js/application.js
index 5611b46962..ceb944775b 100644
--- a/assets/js/application.js
+++ b/assets/js/application.js
@@ -31,6 +31,7 @@ const baseURLPrefix = (() => {
$(document).ready(function() {
BrowserFallbacks.init();
+ DarkMode.init();
Search.init();
Dropdowns.init();
Forms.init();
@@ -222,7 +223,12 @@ var Search = {
$("#show-results-label").text("No matching pages found.");
return;
}
- $("#show-results-label").text("Show all results...");
+
+ const language = document.querySelector("html")?.getAttribute("lang");
+ $("#show-results-label")
+ .text("Show all results...")
+ .attr('href', `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`);
+
const loadButton = $("#load-more-results");
loadButton.text(`Loading ${
results.results.length < 2
@@ -299,11 +305,6 @@ var Search = {
selectResultOption: function() {
var link = $('#search-results a')[Search.selectedIndex];
var url = $(link).attr('href');
- if(!url) {
- const term = $('#search-text').val();
- const language = document.querySelector("html")?.getAttribute("lang");
- url = `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`;
- }
window.location.href = url;
selectedIndex = 0;
},
@@ -551,6 +552,38 @@ var Downloads = {
},
}
+var DarkMode = {
+ init: function() {
+ const button = $('#dark-mode-button');
+ if (!button.length) return;
+
+ // Check for dark mode preference at the OS level
+ const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+ // Get the user's theme preference from local storage, if it's available
+ const currentTheme = localStorage.getItem("theme");
+
+ if ((prefersDarkScheme && currentTheme !== "light")
+ || (!prefersDarkScheme && currentTheme === "dark")) {
+ button.attr("src", `${baseURLPrefix}images/light-mode.svg`);
+ }
+ button.css("display", "block");
+
+ button.click(function(e) {
+ e.preventDefault();
+ let theme
+ if (prefersDarkScheme) {
+ theme = document.documentElement.dataset.theme === "light" ? "dark" : "light"
+ } else {
+ theme = document.documentElement.dataset.theme === "dark" ? "light" : "dark"
+ }
+ document.documentElement.dataset.theme = theme
+ localStorage.setItem("theme", theme);
+ button.attr("src", `${baseURLPrefix}images/${theme === "dark" ? "light" : "dark"}-mode.svg`);
+ });
+ },
+}
+
// Scroll to Top
$('#scrollToTop').removeClass('no-js');
$(window).scroll(function() {
diff --git a/assets/sass/application.scss b/assets/sass/application.scss
index 9509993b44..4023637a23 100644
--- a/assets/sass/application.scss
+++ b/assets/sass/application.scss
@@ -27,6 +27,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
@import 'book2';
@import 'lists';
@import 'about';
+@import 'dark-mode';
code {
display: inline;
@@ -34,10 +35,10 @@ code {
}
pre {
- background-color: #fff;
- border: solid 1px #efeee6;
+ background-color: var(--main-bg);
+ border: solid 1px var(--pre-border);
border-radius: 3px;
- color: $orange;
+ color: var(--orange);
display: block;
font-family: $fixed-width-font-family;
font-variant-ligatures: none;
@@ -50,3 +51,13 @@ pre {
.d-flex{
display: flex;
}
+
+#dark-mode-button {
+ grid-area: dark;
+ display: none;
+ width: 28px;
+ background-color: transparent;
+ text-decoration: none;
+ align-self: center;
+ margin: 5px;
+}
diff --git a/assets/sass/book.scss b/assets/sass/book.scss
index 2fad1c671f..8f9f926c6a 100644
--- a/assets/sass/book.scss
+++ b/assets/sass/book.scss
@@ -1,6 +1,5 @@
@import "variables";
@import "mixins";
-@import "layout";
.ebooks img {
padding: 5px;
@@ -13,7 +12,7 @@
padding-bottom: 20px !important;
background-color: transparent !important;
overflow: hidden;
- border: solid 1px lighten($base-border-color, 10%);
+ border: solid 1px var(--base-border-color-lighter-10);
}
#book-intro {
@@ -36,7 +35,7 @@
.license {
font-size: 11px;
line-height: 1.3;
- color: $light-font-color;
+ color: var(--light-font-color);
}
a#open-book {
@@ -52,7 +51,7 @@
display: none;
padding-left: 22px;
font-size: 12px;
- color: $light-font-color;
+ color: var(--light-font-color);
text-align: center;
text-indent: 40px;
@@ -74,7 +73,7 @@ ol.book-toc {
}
h2 {
- color: $font-color;
+ color: var(--font-color);
}
a {
@@ -140,7 +139,7 @@ ol.book-toc {
&.active {
font-weight: bold;
- color: $orange;
+ color: var(--orange);
}
}
}
diff --git a/assets/sass/dark-mode.css b/assets/sass/dark-mode.css
new file mode 100644
index 0000000000..a4fb1985e2
--- /dev/null
+++ b/assets/sass/dark-mode.css
@@ -0,0 +1,193 @@
+@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: #dfddd554;
+ $button-bg-hover-color: #fafafae5;
+ $button-color: #{$link-color};
+ $mark-bg-color: #ff0;
+ $mark-color: #000;
+ $base-border-color: #d8d7cf;
+ $callout-color: #e9e8e0;
+ $highlight-bg-color: #eee0b5;
+ $pre-border: #efeee6;
+ $black-3: #333333;
+ $main-bg: #fcfcfa;
+ $main-border: #e2e0d8;
+ $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;
+ $search-border: #ceccc5;
+ $search-focus-border: #007175;
+
+ @if $mode == dark {
+ $orange: #d7834f;
+ $blue: #007a7e;
+ $font-color: #b3b1b1;
+ $aside-font-color: darken($font-color, 10%);
+ $light-font-color: #bdbbb0;
+ $link-color: #d7834f;
+ $nav-link-color: #979594;
+ $fixed-width-font-color: #afa7a0;
+ $button-bg-hover-color: #dfddd599;
+ $button-color: #{$button-bg-hover-color};
+ $mark-bg-color: #898882;
+ $mark-color: #d2d2d2;
+ $base-border-color: #b3b2a7;
+ $callout-color: #555555;
+ $highlight-bg-color: #47412d;
+ $pre-border: #494945;
+ $black-3: #cccccc;
+ $main-bg: #333333;
+ $main-border: #5e5e5a;
+ $bg-color: #2a2a2aff;
+ $sidebar-bg-color: #3d3d3a;
+ $no-changes-bg-color: #515150;
+ $dropdown-active-bg-color: #515150;
+ $versions-footer-bg-color: #1f1f1e;
+ $search-border: #5e5e5a;
+ $search-focus-border: #ceccc5;
+
+ :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);
+ }
+
+ // the images in the About section would be too dark
+ body#about {
+ img:not(.no-filter) {
+ filter: brightness(0.9) contrast(0.6) invert(1);
+ }
+
+ ol#about-nav li a {
+ filter: brightness(0.8);
+ }
+ }
+
+ img[alt="Git"] {
+ filter: unset;
+ content: url(./images/logo.dark-mode.svg);
+ }
+
+ 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);
+ }
+
+ #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);
+ }
+
+ #search-results table td.matches :is(a:hover, a.highlight) {
+ text-shadow:unset;
+ }
+
+ #reference-version {
+ background-color: #6f6e6954;
+ }
+
+ #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};
+ --button-color: #{$button-color};
+ --mark-bg-color: #{$mark-bg-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};
+ --pre-border: #{$pre-border};
+
+ --black-3: #{$black-3};
+ --main-bg: #{$main-bg};
+ --main-border: #{$main-border};
+ --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};
+ --search-border: #{$search-border};
+ --search-focus-border: #{$search-focus-border};
+ }
+}
+
+@include mode
+@include mode($mode: dark, $theme: '[data-theme="dark"]')
+
+@media screen and (prefers-color-scheme: dark) {
+ @include mode($mode: dark, $theme: ':not([data-theme="light"])')
+ @include mode($mode: light)
+}
diff --git a/assets/sass/downloads.scss b/assets/sass/downloads.scss
index 11dd4e2236..14ddc6784e 100644
--- a/assets/sass/downloads.scss
+++ b/assets/sass/downloads.scss
@@ -1,6 +1,5 @@
@import "variables";
@import "mixins";
-@import "layout";
#logo-license {
@extend .callout;
@@ -10,7 +9,7 @@
p {
font-size: 12px;
line-height: 1.4;
- color: $light-font-color;
+ color: var(--light-font-color);
}
p + p {
@@ -56,7 +55,7 @@
a {
display: block;
- color: $font-color;
+ color: var(--font-color);
text-align: center;
background-repeat: no-repeat;
background-position: 0 0;
@@ -75,7 +74,7 @@
h3 {
font-size: 18px;
font-weight: bold;
- color: $orange;
+ color: var(--orange);
}
p {
@@ -90,7 +89,7 @@
}
h3 {
- color: darken($orange, 5%);
+ color: var(--orange-darker-5);
}
}
}
@@ -100,7 +99,7 @@
top: 8px;
left: 12px;
display: none;
- color: $orange;
+ color: var(--orange);
}
.downloading .hide {
diff --git a/assets/sass/errors.scss b/assets/sass/errors.scss
index eb3d6226c0..9ba433b097 100644
--- a/assets/sass/errors.scss
+++ b/assets/sass/errors.scss
@@ -5,8 +5,8 @@ body {
font-size: $base-font-size;
line-height: $base-line-height;
font-family: $base-font-family;
- color: $font-color;
- background: #f0efe7 url($baseurl + "images/bg/body.jpg");
+ color: var(--font-color);
+ background: var(--bg-color);
}
// windows chrome makes a mess of Adelle web font
@@ -43,9 +43,9 @@ nav ul {
li {
a {
display: block;
- color: $orange;
+ color: var(--orange);
&:hover {
- color: darken($orange, 5%);
+ color: var(--orange-darker-5);
}
}
}
diff --git a/assets/sass/forms.scss b/assets/sass/forms.scss
index 847ac5766c..427ace6af8 100644
--- a/assets/sass/forms.scss
+++ b/assets/sass/forms.scss
@@ -1,6 +1,5 @@
@import "variables";
@import "mixins";
-@import "layout";
\::-webkit-input-placeholder {
color: #9a9994 !important;
@@ -15,7 +14,7 @@ input.inactive {
}
input.active {
- color: $font-color !important;
+ color: var(--font-color) !important;
}
input, textarea {
@@ -32,50 +31,42 @@ input, textarea {
}
form#search {
- position: absolute;
- top: 10px;
- right: 0;
z-index: 1000;
- width: 262px;
+ width: 100%;
padding-left: 32px;
+ margin: 9px;
@include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
- background-color: $main-bg !important;
- border: solid 1px #ceccc5;
+ background-color: var(--main-bg) !important;
+ border: solid 1px var(--search-border);
@include border-radius(20px);
@include box-shadow(inset 0 1px 4px #ddd);
input {
- @include border-radius(20px);
- width: 100%;
+ width: calc(100% - 10px);
height: 20px;
margin-top: 4px;
margin-bottom: 2px;
line-height: 1em;
- color: $font-color;
+ color: var(--font-color);
background-color: transparent;
border: 0;
}
&.focus {
- border-color: #007175;
- background-color: #fff;
+ border-color: var(--search-focus-border);
+ background-color: var(--main-bg);
}
}
// Breakpoint ----------------
@media (max-width: $default) {
form#search{
- @include center-transformX;
- margin-top: 7px;
- top: unset;
- width: 92%;
}
}
// Mobile
@media (max-width: $mobile-m) {
form#search{
- width: 84%;
#search-text {
padding: 0.3rem 0.1rem;
}
diff --git a/assets/sass/front-page.scss b/assets/sass/front-page.scss
index f35f397d5d..a7e7725231 100644
--- a/assets/sass/front-page.scss
+++ b/assets/sass/front-page.scss
@@ -1,6 +1,5 @@
@import "variables";
@import "mixins";
-@import "layout";
#front-content {
@include clearfix;
@@ -10,7 +9,7 @@
float: left;
width: 618px;
margin-bottom: 24px;
- border-right: solid 1px $base-border-color;
+ border-right: solid 1px var(--base-border-color);
}
}
@@ -43,7 +42,7 @@
display: block;
height: 86px;
padding-left: 90px;
- color: $font-color;
+ color: var(--font-color);
background-repeat: no-repeat;
background-position: 0 0;
transition-duration: 0.3s;
@@ -61,7 +60,7 @@
h3 {
font-size: 18px;
font-weight: bold;
- color: $orange;
+ color: var(--orange);
}
p {
@@ -76,7 +75,7 @@
}
h3 {
- color: darken($orange, 5%);
+ color: var(--orange-darker-5);
}
}
}
@@ -85,7 +84,7 @@
float: left;
width: 590px;
padding-top: 20px;
- border-top: solid 1px $base-border-color;
+ border-top: solid 1px var(--base-border-color);
img {
float: left;
@@ -133,12 +132,12 @@ $monitor-height: 271px;
height: $monitor-height - 45;
padding-top: 45px;
padding-left: 40px;
- color: #fff;
+ color: var(--main-bg);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
h4 {
font-weight: normal;
- color: #fff;
+ color: var(--main-bg);
font-size: 16px;
}
@@ -167,7 +166,7 @@ $monitor-height: 271px;
padding: 5px 0;
margin-top: 10px;
font-size: 16px;
- color: #fff;
+ color: var(--main-bg);
text-align: center;
background-image: linear-gradient(#1c868c, #186368);
border-top: solid 1px #085e64;
@@ -203,7 +202,7 @@ $monitor-height: 271px;
#companies-projects {
padding-top: 20px;
clear: both;
- border-top: solid 1px $base-border-color;
+ border-top: solid 1px var(--base-border-color);
ul {
@extend .unstyled !optional;
@@ -395,7 +394,7 @@ a.icon {
}
}
#front-downloads {
- border-bottom: 1px solid $base-border-color;
+ border-bottom: 1px solid var(--base-border-color);
margin-bottom: 2rem;
padding-bottom: 1rem;
.monitor, table {
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index b32c661e16..31c5705d07 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -7,8 +7,8 @@ body {
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
- color: $font-color;
- background: #f0efe7 url($baseurl + "images/bg/body.jpg");
+ color: var(--font-color);
+ background: var(--bg-color);
}
// windows chrome makes a mess of Adelle web font
@@ -40,8 +40,8 @@ aside {
#main {
padding: 22px;
margin-bottom: 35px;
- background-color: $main-bg;
- border: solid 1px #e2e0d8;
+ background-color: var(--main-bg);
+ border: solid 1px var(--main-border);
@include border-radius(5px);
.two-column {
@@ -59,7 +59,7 @@ aside {
}
.callout {
- background-color: $callout-color;
+ background-color: var(--callout-color);
@include border-radius(3px);
padding: 8px 14px 4px;
margin-bottom: 1.4em;
@@ -77,7 +77,6 @@ aside {
#masthead {
height: 295px;
- margin-top: -20px;
margin-bottom: 2em;
@include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat);
@@ -110,19 +109,23 @@ aside {
// Header
header {
- position: relative;
- padding-bottom: 26px;
- margin-top: 14px;
+ padding: 1rem 0;
+
+ display: grid;
+ grid-template-areas: "logo tagline search dark";
+ grid-template-columns: auto 1fr auto auto;
+ align-items: center;
+
+ #logo {
+ grid-area: logo;
+ display: flex;
+ }
#tagline {
- position: absolute;
- top: 11px;
- left: 120px;
- display: block;
- margin-top: 1px;
- font-size: 24px;
- line-height: 24px;
- color: $light-font-color;
+ grid-area: tagline;
+ margin-left: 0.8em;
+ font-size: clamp(0.8rem, 2vw, 1.3rem);
+ color: var(--light-font-color);
em {
letter-spacing: 1px;
@@ -142,10 +145,10 @@ aside nav ul {
margin-bottom: 0.5em;
a {
- color: #413932;
+ color: var(--nav-link-color);
&.active, &:hover {
- color: $orange;
+ color: var(--orange);
}
}
@@ -208,7 +211,7 @@ p.center {
p {
font-size: 12px;
line-height: 1.4;
- color: $light-font-color;
+ color: var(--light-font-color);
}
p + p {
@@ -222,12 +225,12 @@ p.center {
}
.callout.downloading {
- background: $callout-color url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
+ background: var(--callout-color) url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
padding: 20px 30px 20px 100px !important;
h3 {
font-size: 18px;
- color: $orange;
+ color: var(--orange);
}
p {
@@ -240,7 +243,7 @@ p.center {
margin-bottom: 0 !important;
font-size: 12px;
line-height: 1.4;
- color: $light-font-color;
+ color: var(--light-font-color);
}
}
@@ -298,10 +301,10 @@ a.dropdown-trigger {
&.active {
position: relative;
z-index: 200;
- background-color: #fff !important;
+ background-color: var(--dropdown-active-bg-color) !important;
@include border-top-left-radius(3px);
@include border-top-right-radius(3px);
- border: solid 1px darken($base-border-color, 8%);
+ border: solid 1px var(--base-border-color-darker-8);
border-bottom: 0;
}
}
@@ -310,8 +313,8 @@ a.dropdown-trigger {
position: absolute;
z-index: 199;
display: none;
- background-color: #fff;
- border: solid 1px darken($base-border-color, 8%);
+ background-color: var(--main-bg);
+ border: solid 1px var(--base-border-color-darker-8);
@include border-radius(3px);
@include box-shadow(0 1px 2px #ccc);
@@ -329,24 +332,31 @@ footer {
padding: 20px 0 40px;
margin-top: 35px;
clear: both;
- @include clearfix;
font-size: 12px;
line-height: $base-line-height * 0.7;
- color: $light-font-color;
- border-top: solid 1px $base-border-color;
+ color: var(--light-font-color);
+ border-top: solid 1px var(--base-border-color);
+
+ &:before {
+ content: "</>";
+ color: var(--light-font-color);
+ float: left;
+ font-family: monospace;
+ font-size: 24px;
+ letter-spacing: -4px;
+ padding: 5px;
+ }
a {
- color: darken($light-font-color, 35%);
+ color: var(--light-font-color-darker-35);
&:hover {
- color: darken($light-font-color, 55%);
+ color: var(--light-font-color-darker-55);
}
}
.site-source {
float: left;
- padding-left: 46px;
- @include background-image-2x($baseurl + "images/icons/code", 38px, 23px, 0 2px);
}
.sfc-member {
@@ -385,7 +395,7 @@ table.benchmarks {
@include border-radius(50px);
display: none;
position: fixed;
- background-color: rgba(223, 221, 213, 0.33);
+ background-color: var(--button-bg-color);
right: 20px;
bottom: 6.25rem;
padding: 0.8rem;
@@ -393,7 +403,7 @@ table.benchmarks {
transition: background-color 0.2s;
width: 20px;
&:hover{
- background-color: rgba(250, 250, 250, 0.9);
+ background-color: var(--button-bg-hover-color);
@include box-shadow(2px);
&::before {
@include center-transformX;
@@ -402,7 +412,7 @@ table.benchmarks {
color: var(--color-neutral-emphasis-plus);
content: "";
border: 6px solid transparent;
- border-color:$black-3 transparent transparent;
+ border-color:var(--black-3) transparent transparent;
top: -0.55rem;
position: absolute;
}
@@ -415,8 +425,8 @@ table.benchmarks {
word-wrap: break-word;
white-space: pre;
padding: .5em .75em;
- color:$callout-color;
- background-color:$black-3;
+ color:var(--callout-color);
+ background-color:var(--black-3);
font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
}
@@ -432,13 +442,8 @@ table.benchmarks {
.responsive-table { overflow-x: auto; }
.center img { height: 100%; }
header{
- padding-bottom: 2.5rem;
- a, span {
- padding-left: 1rem;
- margin-bottom: 10px ;
- }
+ padding: 1rem;
}
- #home { .inner { > header { padding-bottom: 2rem; } } }
#content { width: 100%; }
.inner { width: 100%; }
#content-wrapper { padding: 0.8rem; }
@@ -447,7 +452,6 @@ table.benchmarks {
height: unset;
.inner {
display: flex;
- margin-top: 1.8rem;
div:first-of-type {
padding:1rem;
}
@@ -472,14 +476,12 @@ table.benchmarks {
// Mobile
@media (max-width: $mobile-m) {
header {
- padding-bottom: 3rem;
+ grid-template-areas: "logo tagline dark"
+ "search search search";
#tagline {
- font-size: 0.8rem;
- top: 0;
- padding-right: 1rem;
+ font-size: clamp(0.8rem, 3vw, 1.3rem);
}
}
- #home { .inner { > header { padding-bottom: 2.5rem; } } }
#masthead {
.inner { flex-direction: column-reverse; }
.illustration-wrapper {
diff --git a/assets/sass/lists.scss b/assets/sass/lists.scss
index 0276070a88..5a028bc59e 100644
--- a/assets/sass/lists.scss
+++ b/assets/sass/lists.scss
@@ -1,6 +1,5 @@
@import "variables";
@import "mixins";
-@import "layout";
.content-list {
@extend .unstyled !optional;
@@ -28,7 +27,7 @@ ul.gui-thumbnails {
display: block;
padding: 3px;
margin-bottom: 5px;
- border: solid 1px $base-border-color;
+ border: solid 1px var(--base-border-color);
}
}
}
@@ -97,13 +96,13 @@ ol#about-nav {
font-size: 13px;
line-height: 20px;
text-align: center;
- color: $font-color;
+ color: var(--light-font-color-darker-35);
opacity: 0.9;
@include background-image-2x($baseurl + "images/icons/nav-circles", 90px, 180px);
&.current {
@include background-image-2x($baseurl + "images/icons/nav-circles", 90px, 180px, 0 -90px);
- color: #fff;
+ color: var(--main-bg);
opacity: 1;
}
@@ -145,14 +144,14 @@ ul.stackoverflow {
span {
display: block;
- color: $light-font-color;
+ color: var(--light-font-color);
strong {
- color: darken($light-font-color, 10%);
+ color: var(--light-font-color-darker-10);
}
em {
- color: lighten($light-font-color, 20%);
+ color: var(--light-font-color-lighter-20);
}
}
}
diff --git a/assets/sass/man-pages.scss b/assets/sass/man-pages.scss
index 6c7431333f..b3999b92a8 100644
--- a/assets/sass/man-pages.scss
+++ b/assets/sass/man-pages.scss
@@ -1,6 +1,5 @@
@import "variables";
@import "mixins";
-@import "layout";
#documentation #main {
p {
@@ -9,7 +8,7 @@
font-variant-ligatures: none;
font-style: normal;
font-weight: bold;
- color: $fixed-width-font-color;
+ color: var(--fixed-width-font-color);
}
tt {
@@ -48,7 +47,7 @@
font-family: $fixed-width-font-family !important;
line-height: $fixed-width-line-height;
font-variant-ligatures: none;
- color: $fixed-width-font-color;
+ color: var(--fixed-width-font-color);
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: pre;
white-space: pre-wrap; /* css-3 */
@@ -72,11 +71,11 @@
.quoteblock {
padding-left: 1em;
margin-left: 1em;
- border-left: 5px solid $base-border-color;
+ border-left: 5px solid var(--base-border-color);
.content {
.paragraph p {
- color: $light-font-color;
+ color: var(--light-font-color);
}
}
}
@@ -90,17 +89,17 @@
.title {
font-weight: bold;
- color: $orange;
+ color: var(--orange);
}
&:first-child {
- border-right: solid 2px $base-border-color;
+ border-right: solid 2px var(--base-border-color);
}
}
}
}
#footer {
- color: $light-font-color;
+ color: var(--light-font-color);
}
}
diff --git a/assets/sass/mixins.scss b/assets/sass/mixins.scss
index b3f470c03b..9c07d9e3f7 100644
--- a/assets/sass/mixins.scss
+++ b/assets/sass/mixins.scss
@@ -82,7 +82,7 @@
}
@mixin responsive-sidebar-ui {
- background-color: #efefe7;
+ background-color: var(--sidebar-bg-color);
z-index: 305;
left: 0;
box-shadow: 6px 2px 8px 0px rgba(28,28,28,0.10%);
diff --git a/assets/sass/normalize.scss b/assets/sass/normalize.scss
index 57fc51f2d0..bdf80995f5 100644
--- a/assets/sass/normalize.scss
+++ b/assets/sass/normalize.scss
@@ -141,8 +141,8 @@ h1 {
*/
mark {
- background: #ff0;
- color: #000;
+ background: var(--mark-bg-color);
+ color: var(--mark-color);
}
/**
diff --git a/assets/sass/reference.scss b/assets/sass/reference.scss
index b5ce0ad60b..4873a402c8 100644
--- a/assets/sass/reference.scss
+++ b/assets/sass/reference.scss
@@ -1,6 +1,5 @@
@import "variables";
@import "mixins";
-@import "layout";
.topics h3, .topics ul li {
padding-left: 23px;
@@ -131,8 +130,8 @@ h3.plumbing {
margin-top: 0;
font-size: 11px;
font-weight: normal;
- color: $font-color;
- background-color: #eae9e0;
+ color: var(--font-color);
+ background-color: var(--versions-footer-bg-color);
@include border-bottom-left-radius(3px);
@include border-bottom-right-radius(3px);
@@ -141,7 +140,7 @@ h3.plumbing {
// for <p> at the beginning of "typography.scss".
all: unset;
display: block;
- color: $light-font-color;
+ color: var(--light-font-color);
}
}
}
@@ -257,7 +256,7 @@ ol.reference-previous-versions {
font-size: 11px;
font-style: normal;
font-weight: normal;
- color: $light-font-color;
+ color: var(--light-font-color);
}
&.more {
@@ -276,7 +275,7 @@ ol.reference-previous-versions {
font-size: 11px;
font-weight: normal;
line-height: 1.2;
- color: $light-font-color;
+ color: var(--light-font-color);
text-align: center;
span {
@@ -286,7 +285,7 @@ ol.reference-previous-versions {
@include border-bottom-left-radius(10px);
font-size: 10px;
font-style: italic;
- background-color: #f5f5f3;
+ background-color: var(--no-changes-bg-color);
}
}
}
@@ -313,7 +312,7 @@ ol.reference-previous-versions {
.callout.ref-manual {
@include background-image-2x($baseurl + "images/icons/book", 54px, 72px, 24px 20px);
padding: 20px 30px 20px 100px !important;
- background-color: $callout-color;
+ background-color: var(--callout-color);
iframe {
max-width: 100%;
}
@@ -352,7 +351,7 @@ p.quickref {
#video-container {
padding: 10px 10px 2px;
margin-bottom: 20px;
- background-color: $callout-color;
+ background-color: var(--callout-color);
}
code.command {
diff --git a/assets/sass/search.scss b/assets/sass/search.scss
index a30023991e..ad3c808c23 100644
--- a/assets/sass/search.scss
+++ b/assets/sass/search.scss
@@ -1,21 +1,34 @@
@import "variables";
@import "mixins";
-@import "layout";
+
+#search-container {
+ grid-area: search;
+ display: flex;
+ position: relative;
+ width: 300px;
+ padding-left: 60px;
+
+ * {
+ box-sizing: border-box;
+ }
+}
#search-results {
position: absolute;
- top: 2px;
- right: -8px;
+ left: 0;
z-index: 900;
display: none;
- width: 384px;
background: #398a94 url($baseurl + "images/bg/search-header.jpg") 0 1px repeat-x;
@include border-radius(3px);
@include box-shadow(0 0 7px rgba(0, 0, 0, 0.25));
- border-bottom: solid 1px $base-border-color;
+ border-bottom: solid 1px var(--base-border-color);
+
+ width: calc(100% - 1px);
+ height: 100%;
header {
- height: 44px;
+ width: 100%;
+ height: 100%;
padding: 0;
margin: 0;
text-indent: -9999px;
@@ -27,7 +40,7 @@
table {
width: 100%;
line-height: 1;
- background-color: #fff;
+ background-color: var(--main-bg);
@include border-bottom-right-radius(3px);
@include border-bottom-left-radius(3px);
@@ -37,9 +50,9 @@
td.category {
width: 67px;
- padding: 10px 12px 0 0;
+ padding-top: 10px;
font-size: 11px;
- color: $blue;
+ color: var(--blue);
text-align: right;
vertical-align: top;
background-color: #f5fbfb;
@@ -56,18 +69,18 @@
padding: 5px 12px;
margin-bottom: 0;
font-weight: bold;
- color: $font-color;
+ color: var(--font-color);
transition-duration: 0s;
&:hover,
&.highlight {
- color: #fff;
+ color: var(--main-bg);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
background: #55bec4;
background-image: linear-gradient(#55bec4, #54b2b7);
span {
- color: #fff;
+ color: var(--main-bg);
}
}
}
@@ -116,10 +129,10 @@ ol.full-search-results {
display: block;
margin-bottom: 0.4em;
font-size: 12px;
- color: $light-font-color;
+ color: var(--light-font-color);
&:hover {
- color: darken($light-font-color, 25%);
+ color: var(--light-font-color-darker-25);
}
}
}
@@ -131,28 +144,29 @@ ol.full-search-results {
// Breakpoint ---
@media (max-width: $default) {
+ #search-container {
+ padding-left: 0;
+ }
#search-results{
- @include center-transformX;
- top: unset;
- width: 98%;
+ width: 100%;
}
}
// Mobile
@media (max-width: $mobile-m) {
- #search-results{
- margin-top: 4px;
+ #search-container {
+ width: inherit;
}
}
// Search results page
#search-div {
- border: solid 1px $base-border-color;
- background: $main-bg;
+ border: solid 1px var(--base-border-color);
+ background: var(--main-bg);
padding: 22px;
@include border-radius(5px);
ol {
- background-color: $callout-color;
+ background-color: var(--callout-color);
@include border-radius(3px);
padding: 8px 14px 4px;
margin: 0 0 1.4em;
@@ -168,16 +182,16 @@ ol.full-search-results {
.pagefind-ui__result-tags {
list-style: none;
- color: $light-font-color;
+ color: var(--light-font-color);
margin-bottom: 1.4em;
margin-left: 0;
}
}
button {
- border-color: $link-color;
- color: $link-color;
- background: $callout-color;
+ border-color: var(--button-color);
+ color: var(--button-color);
+ background: var(--callout-color);
font-weight: bold;
@include border-radius(3px);
outline: none;
diff --git a/assets/sass/sidebar.scss b/assets/sass/sidebar.scss
index c0946f71f6..f9420fe6a3 100644
--- a/assets/sass/sidebar.scss
+++ b/assets/sass/sidebar.scss
@@ -1,6 +1,5 @@
@import "variables";
@import "mixins";
-@import "layout";
hr.sidebar {
width: 218px;
@@ -20,7 +19,7 @@ aside.sidebar {
.callout {
padding: 20px;
- color: lighten($font-color, 20%);
+ color: var(--aside-font-color);
background-color: #ebe9e1;
background-color: rgba(223, 221, 213, 0.33);
@include border-radius(3px);
@@ -44,7 +43,7 @@ aside.sidebar.active {
@include background-image-2x($baseurl + "images/icons/sidebar", 24px, 24px, left center);
@include border-top-right-radius(5px);
@include border-bottom-right-radius(5px);
- background-color: $black-3 !important;
+ background-color: var(--black-3) !important;
display: block;
position: fixed;
padding: 2rem 0rem;
diff --git a/assets/sass/typography.scss b/assets/sass/typography.scss
index 5e8a840906..f9f7634276 100644
--- a/assets/sass/typography.scss
+++ b/assets/sass/typography.scss
@@ -11,12 +11,12 @@ p {
small {
font-size: $base-font-size - 2;
- color: $light-font-color;
+ color: var(--light-font-color);
}
}
a {
- color: $link-color;
+ color: var(--link-color);
text-decoration: none;
transition-duration: 0.3s;
transition-property: color;
@@ -33,12 +33,12 @@ h5,
h6 {
margin: 0;
font-weight: normal;
- color: $font-color;
+ color: var(--font-color);
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
font-weight: normal;
- color: $light-font-color;
+ color: var(--light-font-color);
}
}
@@ -57,7 +57,7 @@ h2 {
font-size: 18px;
font-weight: bold;
line-height: $base-line-height * 2;
- color: $orange;
+ color: var(--orange);
small {
font-size: 18px;
@@ -95,7 +95,7 @@ h4 {
aside h4 {
margin-bottom: 1em;
- color: $light-font-color;
+ color: var(--light-font-color);
line-height: 1.4;
}
@@ -105,7 +105,7 @@ h5 {
h6 {
font-size: 11px;
- color: $light-font-color;
+ color: var(--light-font-color);
text-transform: uppercase;
}
@@ -188,7 +188,7 @@ dd {
hr {
margin: $base-line-height 0;
border: 0;
- border-top: 1px solid $base-border-color;
+ border-top: 1px solid var(--base-border-color);
}
// Emphasis
@@ -201,7 +201,7 @@ em {
}
.muted {
- color: $light-font-color;
+ color: var(--light-font-color);
}
// Abbreviations and acronyms
@@ -219,7 +219,7 @@ abbr.initialism {
blockquote {
padding: 0 0 0 15px;
margin: 0 0 $base-line-height;
- border-left: 5px solid $base-border-color;
+ border-left: 5px solid var(--base-border-color);
p {
margin-bottom: 0;
@@ -228,7 +228,7 @@ blockquote {
small {
display: block;
line-height: $base-line-height;
- color: $light-font-color;
+ color: var(--light-font-color);
&:before {
content: '\2014 \00A0';
@@ -240,7 +240,7 @@ blockquote {
float: right;
padding-right: 15px;
padding-left: 0;
- border-right: 5px solid $base-border-color;
+ border-right: 5px solid var(--base-border-color);
border-left: 0;
p,
@@ -259,9 +259,9 @@ code {
font-family: $fixed-width-font-family;
line-height: $fixed-width-line-height;
font-variant-ligatures: none;
- color: $orange;
- background-color: #fff;
- border: solid 1px #efeee6;
+ color: var(--orange);
+ background-color: var(--main-bg);
+ border: solid 1px var(--pre-border);
}
// Quotes
@@ -292,7 +292,7 @@ table {
th,
td {
padding: 2px 0;
- border-bottom: solid 1px lighten($base-border-color, 10%);
+ border-bottom: solid 1px var(--base-border-color-lighter-10);
}
}
@@ -303,13 +303,13 @@ table {
td.compare {
font-weight: bold;
- color: $orange;
+ color: var(--orange);
}
}
// Misc
.light {
- color: $light-font-color;
+ color: var(--light-font-color);
}
small {
@@ -336,7 +336,7 @@ a.subtle-button {
transition-property: background-image;
&:hover {
- color: $link-color;
+ color: var(--link-color);
background-image: linear-gradient(#edede3, #e6e5db);
}
}
@@ -359,7 +359,7 @@ div.more {
}
.highlight {
- background-color: #eee0b5;
+ background-color: var(--highlight-bg-color);
padding: 2px;
}
diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss
index b8d27afd10..0c1d3201dc 100644
--- a/assets/sass/variables.scss
+++ b/assets/sass/variables.scss
@@ -1,7 +1,3 @@
-// Palette
-$orange: #f14e32;
-$blue: #009099;
-
// breakpoints
$mobile-xs: 480px;
$mobile-s: 576px;
@@ -10,26 +6,10 @@ $tablet: 768px;
$default: 940px;
$page-width: $default;
-$font-color: #4e443c;
-$light-font-color: #9a9994;
-
-$link-color: #0388a6;
-$link-hover-color: lighten($link-color, 10%);
-$link-focus-color: false;
-$link-active-color: false;
-$link-visited-color: false;
-
$base-font-family-fallback: Roboto Slab, DejaVu Serif, Georgia, Times New Roman, sans-serif;
$base-font-family: Adelle, $base-font-family-fallback;
$base-font-size: 14px;
$base-line-height: 22px;
$fixed-width-font-family: Courier, monospace;
-$fixed-width-font-color: #4e443c;
$fixed-width-line-height: 18px;
-
-$base-border-color: #d8d7cf;
-$callout-color: #e9e8e0;
-
-$black-3 : #333333;
-$main-bg: #fcfcfa;
diff --git a/content/about/data-assurance.html b/content/about/data-assurance.html
index d61ac38325..06b9daff6f 100644
--- a/content/about/data-assurance.html
+++ b/content/about/data-assurance.html
@@ -17,7 +17,7 @@ <h2>Data Assurance</h2>
checksum when checked back out. It's impossible to get anything out of Git
other than the <strong>exact bits you put in</strong>.
</p>
- <img height="522" src="{{< relurl "images/assurance@2x.png" >}}" width="628">
+ <img class="no-filter" height="522" src="{{< relurl "images/assurance@2x.png" >}}" width="628">
<p>
It is also impossible to change any file, date, commit message, or any other
data in a Git repository without changing the IDs of everything after it.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1ddbd1fbe1..fd5d1870ad 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -42,8 +42,20 @@ <h1>Redirecting…</h1>
{{ warnf "No section found in %s" (.Page.Path | jsonify) }}
{{ end }}
{{ .Scratch.Set "section" $section }}
-
<head>
+ <script type="text/javascript">
+ // Check for stored user dark/light mode preference, if any
+ const currentTheme = localStorage.getItem("theme")
+ if (currentTheme) {
+ // Check dark mode preference at the OS level
+ const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+ if ((prefersDarkScheme && currentTheme === "light")
+ || (!prefersDarkScheme && currentTheme === "dark")) {
+ document.documentElement.dataset.theme = currentTheme
+ }
+ }
+ </script>
+
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -54,8 +66,6 @@ <h1>Redirecting…</h1>
{{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass | resources.Minify }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
- <script src="{{ relURL "js/modernizr.js" }}"></script>
- <script src="{{ relURL "js/modernize.js" }}"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="{{ relURL "js/selectivizr-min.js" }}"></script>
<![endif]-->
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 25b3f88191..e7166af029 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -15,6 +15,8 @@
<script src="{{ relURL "js/jquery-ui-1.8.18.custom.min.js" }}"></script>
<script src="{{ relURL "js/jquery.defaultvalue.js" }}"></script>
<script src="{{ relURL "js/session.min.js" }}"></script>
+<script src="{{ relURL "js/modernizr.js" }}"></script>
+<script src="{{ relURL "js/modernize.js" }}"></script>
{{ if eq (.Scratch.Get "section") "search" }}<script src="{{ relURL "pagefind/pagefind-ui.js" }}"></script>{{ end }}
{{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify }}
<script src="{{ $js.RelPermalink }}"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index eae2f28016..5367484ce0 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,24 +1,25 @@
<header>
-
- <a href="{{ relURL "" }}"><img src="{{ relURL "images/logo@2x.png" }}" width="110" height="46" alt="Git" /></a>
+ <a id="logo" href="{{ relURL "" }}"><img src="{{ relURL "images/logo@2x.png" }}" width="110" height="46" alt="Git" class="no-filter" /></a>
<span id="tagline"></span>
<script type="text/javascript">
- const taglines = [
- "fast-version-control",
- "everything-is-local",
- "distributed-even-if-your-workflow-isnt",
- "local-branching-on-the-cheap",
- "distributed-is-the-new-centralized"
- ];
- var tagline = taglines[Math.floor(Math.random() * taglines.length)];
- document.getElementById('tagline').innerHTML = '--' + tagline;
+ const taglines = [
+ "fast-version-control",
+ "everything-is-local",
+ "distributed-even-if-your-workflow-isnt",
+ "local-branching-on-the-cheap",
+ "distributed-is-the-new-centralized"
+ ];
+ var tagline = taglines[Math.floor(Math.random() * taglines.length)];
+ document.getElementById('tagline').innerHTML = '--' + tagline;
</script>
{{ if ne (.Scratch.Get "section") "search" }}
- <form id="search" action="{{ relURL "search/results" }}">
- <input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
- </form>
- <div id="search-results"></div>
+ <div id="search-container">
+ <form id="search" action="{{ relURL "search/results" }}">
+ <input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
+ </form>
+ <div id="search-results"></div>
+ </div>
{{ end }}
-
+ <img src="{{ relURL "images/dark-mode.svg" }}" id="dark-mode-button" />
</header>
diff --git a/script/serve-public.js b/script/serve-public.js
index ea8fddac3e..362a11a85f 100755
--- a/script/serve-public.js
+++ b/script/serve-public.js
@@ -12,6 +12,7 @@ const mimeTypes = {
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"png": "image/png",
+ "svg": "image/svg+xml",
"ico": "image/x-icon",
"js": "text/javascript",
"css": "text/css",
diff --git a/static/images/company-project-logos/eclipse.png b/static/images/company-project-logos/eclipse.png
index b205cda116..61340064ed 100644
Binary files a/static/images/company-project-logos/eclipse.png and b/static/images/company-project-logos/eclipse.png differ
diff --git a/static/images/company-project-logos/eclipse@2x.png b/static/images/company-project-logos/eclipse@2x.png
index e45ab3fd37..0312ad82cb 100644
Binary files a/static/images/company-project-logos/eclipse@2x.png and b/static/images/company-project-logos/eclipse@2x.png differ
diff --git a/static/images/company-project-logos/gnome.png b/static/images/company-project-logos/gnome.png
index d630ead46d..4e7252a450 100644
Binary files a/static/images/company-project-logos/gnome.png and b/static/images/company-project-logos/gnome.png differ
diff --git a/static/images/company-project-logos/gnome@2x.png b/static/images/company-project-logos/gnome@2x.png
index 28151c90e9..4785440bc9 100644
Binary files a/static/images/company-project-logos/gnome@2x.png and b/static/images/company-project-logos/gnome@2x.png differ
diff --git a/static/images/company-project-logos/linked-in.png b/static/images/company-project-logos/linked-in.png
index 8991559bfe..edf6c9d497 100644
Binary files a/static/images/company-project-logos/linked-in.png and b/static/images/company-project-logos/linked-in.png differ
diff --git a/static/images/company-project-logos/linked-in@2x.png b/static/images/company-project-logos/linked-in@2x.png
index acc67a99de..caf1b34d55 100644
Binary files a/static/images/company-project-logos/linked-in@2x.png and b/static/images/company-project-logos/linked-in@2x.png differ
diff --git a/static/images/company-project-logos/linux.png b/static/images/company-project-logos/linux.png
index 65d7ca8d11..97756ce0b8 100644
Binary files a/static/images/company-project-logos/linux.png and b/static/images/company-project-logos/linux.png differ
diff --git a/static/images/company-project-logos/linux@2x.png b/static/images/company-project-logos/linux@2x.png
index 26ff83726e..860af0e5a6 100644
Binary files a/static/images/company-project-logos/linux@2x.png and b/static/images/company-project-logos/linux@2x.png differ
diff --git a/static/images/company-project-logos/microsoft.png b/static/images/company-project-logos/microsoft.png
index 1d719bd769..aab3a29f68 100644
Binary files a/static/images/company-project-logos/microsoft.png and b/static/images/company-project-logos/microsoft.png differ
diff --git a/static/images/company-project-logos/microsoft@2x.png b/static/images/company-project-logos/microsoft@2x.png
index 31c0c347ed..1ef8958ba0 100644
Binary files a/static/images/company-project-logos/microsoft@2x.png and b/static/images/company-project-logos/microsoft@2x.png differ
diff --git a/static/images/company-project-logos/perl.png b/static/images/company-project-logos/perl.png
index e8d2b41dea..b11d4a2bef 100644
Binary files a/static/images/company-project-logos/perl.png and b/static/images/company-project-logos/perl.png differ
diff --git a/static/images/company-project-logos/perl@2x.png b/static/images/company-project-logos/perl@2x.png
index 21a939d650..8b5a7415da 100644
Binary files a/static/images/company-project-logos/perl@2x.png and b/static/images/company-project-logos/perl@2x.png differ
diff --git a/static/images/company-project-logos/postgresql.png b/static/images/company-project-logos/postgresql.png
index 049462d26f..0b4a82227e 100644
Binary files a/static/images/company-project-logos/postgresql.png and b/static/images/company-project-logos/postgresql.png differ
diff --git a/static/images/company-project-logos/postgresql@2x.png b/static/images/company-project-logos/postgresql@2x.png
index d0c933c636..d28565abae 100644
Binary files a/static/images/company-project-logos/postgresql@2x.png and b/static/images/company-project-logos/postgresql@2x.png differ
diff --git a/static/images/company-project-logos/qt.png b/static/images/company-project-logos/qt.png
index 25e490793d..1cc32b31dc 100644
Binary files a/static/images/company-project-logos/qt.png and b/static/images/company-project-logos/qt.png differ
diff --git a/static/images/company-project-logos/qt@2x.png b/static/images/company-project-logos/qt@2x.png
index 7eb553af85..21b9f0642e 100644
Binary files a/static/images/company-project-logos/qt@2x.png and b/static/images/company-project-logos/qt@2x.png differ
diff --git a/static/images/company-project-logos/rails.png b/static/images/company-project-logos/rails.png
index 2cbaec6951..e16fe82ee7 100644
Binary files a/static/images/company-project-logos/rails.png and b/static/images/company-project-logos/rails.png differ
diff --git a/static/images/company-project-logos/rails@2x.png b/static/images/company-project-logos/rails@2x.png
index e532b40a0d..8157ec0f49 100644
Binary files a/static/images/company-project-logos/rails@2x.png and b/static/images/company-project-logos/rails@2x.png differ
diff --git a/static/images/company-project-logos/x.png b/static/images/company-project-logos/x.png
index 6c54fbd04c..165668733e 100644
Binary files a/static/images/company-project-logos/x.png and b/static/images/company-project-logos/x.png differ
diff --git a/static/images/company-project-logos/x@2x.png b/static/images/company-project-logos/x@2x.png
index b056ca4a80..6d9cd452e5 100644
Binary files a/static/images/company-project-logos/x@2x.png and b/static/images/company-project-logos/x@2x.png differ
diff --git a/static/images/dark-mode.svg b/static/images/dark-mode.svg
new file mode 100755
index 0000000000..14d3c21439
--- /dev/null
+++ b/static/images/dark-mode.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="50px"
+ height="50px"
+ viewBox="0 0 50 50"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+ <path
+ style="fill:#5a5a5a;stroke-width:0.5;stroke-color:#b3b1b1;"
+ d="M 25 0 A 25 25 0 0 0 0 25 A 25 25 0 0 0 25 50 A 25 25 0 0 0 50 25 A 25 25 0 0 0 25 0 z" />
+ <path
+ style="fill:#edebe0;stroke-width:0"
+ d="M 34 9 C 37 9 47 22 38 34 C 27 48 8 37 14 36 C 20 36 25 31 28 28 C 31 25 34 19 33 11 C 33 10 33 9 34 9 z" />
+ </g>
+</svg>
diff --git a/static/images/icons/code.png b/static/images/icons/code.png
deleted file mode 100644
index ce35043ab5..0000000000
Binary files a/static/images/icons/code.png and /dev/null differ
diff --git a/static/images/icons/code@2x.png b/static/images/icons/code@2x.png
deleted file mode 100644
index 982738f88c..0000000000
Binary files a/static/images/icons/code@2x.png and /dev/null differ
diff --git a/static/images/light-mode.svg b/static/images/light-mode.svg
new file mode 100755
index 0000000000..7f0d0aaa39
--- /dev/null
+++ b/static/images/light-mode.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="50px"
+ height="50px"
+ viewBox="0 0 50 50"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <g>
+ <path
+ style="fill:#8a8a8a;stroke-width:0"
+ d="M 25 0 A 25 25 0 0 0 0 25 A 25 25 0 0 0 25 50 A 25 25 0 0 0 50 25 A 25 25 0 0 0 25 0 z" />
+ <ellipse
+ style="fill:none;stroke:#bdbbb0;stroke-width:4"
+ cx="25"
+ cy="25"
+ rx="10"
+ ry="10" />
+ <path
+ style="fill:none;stroke:#bdbbb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
+ d="m 25,5 L 25,10" />
+ <path
+ style="fill:none;stroke:#bdbbb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
+ d="m 25,45 L 25,40" />
+ <path
+ style="fill:none;stroke:#bdbbb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
+ d="M 45,25 H 40" />
+ <path
+ style="fill:none;stroke:#bdbbb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
+ d="M 5,25 H 10" />
+ <path
+ style="fill:none;stroke:#bdbbb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
+ d="M 39,11 35.5,14.5" />
+ <path
+ style="fill:none;stroke:#bdbbb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
+ d="M 11,39 14.5,35.5" />
+ <path
+ style="fill:none;stroke:#bdbbb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
+ d="M 39,39 35.5,35.5" />
+ <path
+ style="fill:none;stroke:#bdbbb0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
+ d="M 11,11 14.5,14.5" />
+ </g>
+</svg>
diff --git a/static/images/logo.dark-mode.svg b/static/images/logo.dark-mode.svg
new file mode 100755
index 0000000000..6f733c4965
--- /dev/null
+++ b/static/images/logo.dark-mode.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272.96 114.01">
+ <path fill="#777777" d="m163.59,38.806c-5.985,0-10.442,2.9389-10.442,10.012,0,5.3291,2.9375,9.0284,10.12,9.0284,6.0875,0,10.222-3.5869,10.222-9.2485,0-6.416-3.7-9.7915-9.9-9.7915zm-11.97,49.94c-1.4162,1.7382-2.8275,3.585-2.8275,5.7646,0,4.3482,5.545,5.6568,13.162,5.6568,6.31,0,14.905-0.44188,14.905-6.3085,0-3.4869-4.135-3.7028-9.36-4.0304l-15.88-1.0825zm32.201-49.611c1.955,2.5029,4.025,5.9848,4.025,10.989,0,12.075-9.465,19.146-23.169,19.146-3.485,0-6.64-0.43412-8.5962-0.97712l-3.5912,5.7648,10.66,0.65125c18.822,1.1992,29.915,1.7442,29.915,16.208,0,12.514-10.985,19.581-29.915,19.581-19.69,0-27.196-5.0049-27.196-13.598,0-4.8975,2.1762-7.5025,5.9838-11.098-3.5912-1.518-4.7862-4.2362-4.7862-7.1748,0-2.395,1.195-4.5702,3.1562-6.6386,1.9575-2.065,4.1325-4.1348,6.7438-6.5274-5.33-2.6104-9.3562-8.2676-9.3562-16.319,0-12.509,8.2688-21.1,24.91-21.1,4.6788,0,7.5088,0.43062,10.011,1.0874h21.215v9.2446l-10.01,0.76175"/>
+ <path fill="#777777" d="m212.98,19.366c-6.2025,0-9.7912-3.5932-9.7912-9.7964,0-6.1954,3.5888-9.5704,9.7912-9.5704,6.31,0,9.9,3.375,9.9,9.5704,0,6.2031-3.59,9.7964-9.9,9.7964zm-14.036,65.376,0-8.5899,5.55-0.75925c1.5238-0.22075,1.74-0.5445,1.74-2.1802v-31.983c0-1.1942-0.325-1.959-1.4162-2.2828l-5.8738-2.0688,1.1962-8.8086h22.521v45.144c0,1.7438,0.105,1.9595,1.7412,2.1802l5.5488,0.75925v8.5899h-31.008"/>
+ <path fill="#777777" d="m272.97,80.526c-4.68,2.2818-11.532,4.3491-17.736,4.3491-12.945,0-17.839-5.2168-17.839-17.515v-28.5c0-0.65138,0-1.0884-0.87375-1.0884h-7.6138v-9.6816c9.5762-1.0908,13.381-5.8784,14.578-17.736h10.336v15.453c0,0.75875,0,1.0874,0.87125,1.0874h15.338v10.877h-16.209v25.999c0,6.4194,1.525,8.9194,7.3962,8.9194,3.05,0,6.2012-0.75925,8.8125-1.7392l2.94,9.5761"/>
+ <path fill="#f05133" d="M111.78,51.977,62.035,2.2381c-2.8622-2.8648-7.5082-2.8648-10.374,0l-10.329,10.33,13.102,13.102c3.0459-1.0284,6.5371-0.33888,8.9639,2.0884,2.4394,2.4424,3.124,5.9634,2.0698,9.0195l12.628,12.628c3.0551-1.0528,6.58-0.37262,9.0195,2.0712,3.4106,3.4096,3.4106,8.9345,0,12.345-3.4111,3.4116-8.936,3.4116-12.349,0-2.5645-2.5665-3.1988-6.3345-1.8999-9.4942l-11.777-11.777-0.001,30.991c0.8315,0.41162,1.6162,0.961,2.3091,1.6509,3.4096,3.4092,3.4096,8.9331,0,12.348-3.4106,3.4091-8.938,3.4091-12.345,0-3.4101-3.4146-3.4101-8.9385,0-12.348,0.84275-0.84125,1.8179-1.478,2.8584-1.9048v-31.279c-1.041-0.425-2.015-1.057-2.859-1.905-2.583-2.581-3.2051-6.372-1.8804-9.5439l-12.916-12.918-34.106,34.105c-2.8657,2.867-2.8657,7.513,0,10.378l49.742,49.739c2.8638,2.8648,7.5082,2.8648,10.376,0l49.512-49.504c2.8648-2.8662,2.8648-7.5136,0-10.379"/>
+</svg>
diff --git a/tests/git-scm.spec.js b/tests/git-scm.spec.js
index ea8a1003ed..40323bdfc5 100644
--- a/tests/git-scm.spec.js
+++ b/tests/git-scm.spec.js
@@ -115,7 +115,8 @@ test('search', async ({ page }) => {
// Expect the first search result to be "git-commit"
const searchResults = page.locator('#search-results')
await expect(searchResults.getByRole("link")).not.toHaveCount(0)
- await expect(searchResults.getByRole("link").nth(0)).toHaveText('git-commit')
+ await expect(searchResults.getByRole("link").nth(0)).toHaveText('Show all results...')
+ await expect(searchResults.getByRole("link").nth(1)).toHaveText('git-commit')
// Expect the search page to show up
await searchBox.press('Enter')
@@ -137,7 +138,8 @@ test('search', async ({ page }) => {
await page.goto(`${url}docs/git-commit/fr`)
await searchBox.fill('add')
await searchBox.press('Shift')
- await expect(searchResults.getByRole("link").nth(0)).toHaveAttribute('href', /\/docs\/git-add\/fr(\.html)?$/)
+ await expect(searchResults.getByRole("link").nth(0)).toHaveAttribute('href', /\/search\/results\?search=add&language=fr$/)
+ await expect(searchResults.getByRole("link").nth(1)).toHaveAttribute('href', /\/docs\/git-add\/fr(\.html)?$/)
// pressing the Enter key should navigate to the full search results page
await searchBox.press('Enter')
@@ -288,3 +290,32 @@ test('small-and-fast', async ({ page }) => {
const lastGraph = page.locator('.bar-chart').last();
await expect(lastGraph).toBeInViewport();
});
+
+test('dark mode', async({ page }) => {
+ await page.setViewportSize(devices['iPhone X'].viewport);
+
+ await page.goto(`${url}`);
+ await page.evaluate(() => {
+ document.querySelector('#tagline').innerHTML = '--dark-mode-for-dark-times';
+ });
+ const darkModeButton = page.locator('#dark-mode-button');
+
+ const o = { maxDiffPixels: 30 };
+ await expect(page).toHaveScreenshot({ name: 'light-mode.png', ...o });
+ await darkModeButton.click();
+ await expect(page).toHaveScreenshot({ name: 'dark-mode.png', ...o });
+
+ // Now, try again, but this time with system's preference being dark mode
+
+ await page.emulateMedia({ colorScheme: 'dark' });
+ await page.evaluate(() => window.localStorage.clear());
+ await page.evaluate(() => window.sessionStorage.clear());
+ await page.reload();
+ await page.evaluate(() => {
+ document.querySelector('#tagline').innerHTML = '--dark-mode-for-dark-times';
+ });
+
+ await expect(page).toHaveScreenshot({ name: 'dark-mode.png', ...o });
+ await darkModeButton.click();
+ await expect(page).toHaveScreenshot({ name: 'light-mode.png', ...o });
+})
diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-chrome-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-chrome-linux.png
new file mode 100644
index 0000000000..4f456650a8
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/dark-mode-chrome-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-chromium-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-chromium-linux.png
new file mode 100644
index 0000000000..4f456650a8
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/dark-mode-chromium-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-firefox-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-firefox-linux.png
new file mode 100644
index 0000000000..283452d11e
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/dark-mode-firefox-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-iPhone-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-iPhone-linux.png
new file mode 100644
index 0000000000..ba9527159d
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/dark-mode-iPhone-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/dark-mode-webkit-linux.png b/tests/git-scm.spec.js-snapshots/dark-mode-webkit-linux.png
new file mode 100644
index 0000000000..c4cfc05ec8
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/dark-mode-webkit-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/light-mode-chrome-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-chrome-linux.png
new file mode 100644
index 0000000000..a303623cdc
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/light-mode-chrome-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/light-mode-chromium-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-chromium-linux.png
new file mode 100644
index 0000000000..a303623cdc
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/light-mode-chromium-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/light-mode-firefox-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-firefox-linux.png
new file mode 100644
index 0000000000..247b38de7f
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/light-mode-firefox-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/light-mode-iPhone-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-iPhone-linux.png
new file mode 100644
index 0000000000..97477322d3
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/light-mode-iPhone-linux.png differ
diff --git a/tests/git-scm.spec.js-snapshots/light-mode-webkit-linux.png b/tests/git-scm.spec.js-snapshots/light-mode-webkit-linux.png
new file mode 100644
index 0000000000..74f3b34ef9
Binary files /dev/null and b/tests/git-scm.spec.js-snapshots/light-mode-webkit-linux.png differ