diff --git a/_includes/head.html b/_includes/head.html
index 1f8dc28d4..18690fef2 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,5 +1,7 @@
-
+ {% assign sum = 'styles/*.{,s}css' | checksum %}
+
+
diff --git a/_plugins/checksum.rb b/_plugins/checksum.rb
new file mode 100644
index 000000000..fdd0c815a
--- /dev/null
+++ b/_plugins/checksum.rb
@@ -0,0 +1,46 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements. See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership. The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License. You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+
+require 'digest'
+
+module GuacChecksumFilter
+
+ #
+ # Returns an arbitrary, unique checksum for the files matching the given
+ # glob pattern, calculated from each file's contents. The resulting checksum
+ # is guaranteed to be safe for inclusion within URLs.
+ #
+ # == Parameters:
+ # input::
+ # The glob pattern matching the files to use to generate the checksum.
+ #
+ # == Returns:
+ # An arbitrary, unique checksum generated from the contents of each matching
+ # file.
+ #
+ def checksum(input)
+ digest = Dir.glob(input).sort().reduce(Digest::SHA2) { |digest, filename| digest.file filename }
+ digest.hexdigest
+ end
+
+end
+
+# Register checksum filter with Liquid
+Liquid::Template.register_filter(GuacChecksumFilter)
+
diff --git a/images/backgrounds/bowl-clip-bottom-dark.svg b/images/backgrounds/bowl-clip-bottom-dark.svg
new file mode 100644
index 000000000..1ccca62e5
--- /dev/null
+++ b/images/backgrounds/bowl-clip-bottom-dark.svg
@@ -0,0 +1 @@
+
diff --git a/images/backgrounds/bowl-clip-bottom.svg b/images/backgrounds/bowl-clip-bottom-light.svg
similarity index 100%
rename from images/backgrounds/bowl-clip-bottom.svg
rename to images/backgrounds/bowl-clip-bottom-light.svg
diff --git a/images/backgrounds/bowl-clip-top-dark.svg b/images/backgrounds/bowl-clip-top-dark.svg
new file mode 100644
index 000000000..f9c9ece27
--- /dev/null
+++ b/images/backgrounds/bowl-clip-top-dark.svg
@@ -0,0 +1 @@
+
diff --git a/images/backgrounds/bowl-clip-top.svg b/images/backgrounds/bowl-clip-top-light.svg
similarity index 100%
rename from images/backgrounds/bowl-clip-top.svg
rename to images/backgrounds/bowl-clip-top-light.svg
diff --git a/images/home/feature-access-anywhere-dark.svg b/images/home/feature-access-anywhere-dark.svg
new file mode 100644
index 000000000..39d5d0dcc
--- /dev/null
+++ b/images/home/feature-access-anywhere-dark.svg
@@ -0,0 +1 @@
+
diff --git a/images/home/feature-access-anywhere-light.svg b/images/home/feature-access-anywhere-light.svg
new file mode 100644
index 000000000..a34eece8b
--- /dev/null
+++ b/images/home/feature-access-anywhere-light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/home/feature-access-anywhere.svg b/images/home/feature-access-anywhere.svg
deleted file mode 100644
index 97271942a..000000000
--- a/images/home/feature-access-anywhere.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/images/home/feature-cloud-desktop-dark.svg b/images/home/feature-cloud-desktop-dark.svg
new file mode 100644
index 000000000..98b572db8
--- /dev/null
+++ b/images/home/feature-cloud-desktop-dark.svg
@@ -0,0 +1 @@
+
diff --git a/images/home/feature-cloud-desktop-light.svg b/images/home/feature-cloud-desktop-light.svg
new file mode 100644
index 000000000..91b657863
--- /dev/null
+++ b/images/home/feature-cloud-desktop-light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/home/feature-cloud-desktop.svg b/images/home/feature-cloud-desktop.svg
deleted file mode 100644
index 090c24d6b..000000000
--- a/images/home/feature-cloud-desktop.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/images/home/feature-open-source-dark.svg b/images/home/feature-open-source-dark.svg
new file mode 100644
index 000000000..5019af94d
--- /dev/null
+++ b/images/home/feature-open-source-dark.svg
@@ -0,0 +1 @@
+
diff --git a/images/home/feature-open-source.svg b/images/home/feature-open-source-light.svg
similarity index 55%
rename from images/home/feature-open-source.svg
rename to images/home/feature-open-source-light.svg
index 85c38c527..4abc572ca 100644
--- a/images/home/feature-open-source.svg
+++ b/images/home/feature-open-source-light.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/home/feature-supported-dark.svg b/images/home/feature-supported-dark.svg
new file mode 100644
index 000000000..dbdc546a0
--- /dev/null
+++ b/images/home/feature-supported-dark.svg
@@ -0,0 +1 @@
+
diff --git a/images/home/feature-supported-light.svg b/images/home/feature-supported-light.svg
new file mode 100644
index 000000000..38f4d7bc6
--- /dev/null
+++ b/images/home/feature-supported-light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/home/feature-supported.svg b/images/home/feature-supported.svg
deleted file mode 100644
index c632b8acb..000000000
--- a/images/home/feature-supported.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/images/home/feature-well-documented-dark.svg b/images/home/feature-well-documented-dark.svg
new file mode 100644
index 000000000..0316c5203
--- /dev/null
+++ b/images/home/feature-well-documented-dark.svg
@@ -0,0 +1 @@
+
diff --git a/images/home/feature-well-documented-light.svg b/images/home/feature-well-documented-light.svg
new file mode 100644
index 000000000..d1557f43c
--- /dev/null
+++ b/images/home/feature-well-documented-light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/home/feature-well-documented.svg b/images/home/feature-well-documented.svg
deleted file mode 100644
index 391ab0887..000000000
--- a/images/home/feature-well-documented.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/images/releases/current-release-star-dark.svg b/images/releases/current-release-star-dark.svg
new file mode 100644
index 000000000..e20ea0439
--- /dev/null
+++ b/images/releases/current-release-star-dark.svg
@@ -0,0 +1 @@
+
diff --git a/images/releases/current-release-star.svg b/images/releases/current-release-star-light.svg
similarity index 100%
rename from images/releases/current-release-star.svg
rename to images/releases/current-release-star-light.svg
diff --git a/styles/_base.scss b/styles/_base.scss
index c0697db4d..73679aac3 100644
--- a/styles/_base.scss
+++ b/styles/_base.scss
@@ -18,6 +18,7 @@
*/
@use 'colors';
+@use 'globals';
* {
box-sizing: border-box;
@@ -105,11 +106,11 @@ table td {
}
table tr:nth-child(odd) td {
- background: #f9f9f9;
+ background: globals.lightdark(#f9f9f9, #1f1f1f);
}
table tr:nth-child(even) td {
- background: #f0f0f0;
+ background: globals.lightdark(#f0f0f0, #252525);
}
table td > * {
diff --git a/styles/_colors.scss b/styles/_colors.scss
index 4ee3feb67..1cea93243 100644
--- a/styles/_colors.scss
+++ b/styles/_colors.scss
@@ -17,19 +17,28 @@
* under the License.
*/
+@use 'globals';
+
/*
* Colors for general typography.
*/
-$text-color: black;
-$background-color: white;
-$link-text-color: #12551f;
+$light-text-color: white;
+$dark-text-color: black;
+
+$light-link-color: #99e9a9;
+$dark-link-color: #12551f;
+
+$text-color: globals.lightdark($dark-text-color, $light-text-color);
+$background-color: globals.lightdark(white, black);
+$link-text-color: globals.lightdark($dark-link-color, $light-link-color);
/*
* Header section (common to all pages).
*/
$header-background-color: #102510;
+$header-text-color: white;
/*
* Footer section (common to all pages).
@@ -44,6 +53,6 @@ $footer-link-text-color: $footer-text-color;
* similar header).
*/
-$note-heading-background-color: #87dc8d;
-$note-background-color: #e1ffe3;
+$note-heading-background-color: globals.lightdark(#87dc8d, #304d32);
+$note-background-color: globals.lightdark(#e1ffe3, #292f29);
diff --git a/styles/_expandable-figure.scss b/styles/_expandable-figure.scss
index e88055707..628819748 100644
--- a/styles/_expandable-figure.scss
+++ b/styles/_expandable-figure.scss
@@ -38,7 +38,7 @@
.expandable-figure-content {
margin-left: 0.2em;
padding-left: 0.5em;
- border-left: 2px dotted black;
+ border-left: 2px dotted colors.$text-color;
}
.expandable-figure-content {
diff --git a/styles/_footer.scss b/styles/_footer.scss
index 0bf5b8501..c555becd7 100644
--- a/styles/_footer.scss
+++ b/styles/_footer.scss
@@ -26,7 +26,6 @@
div#footer {
font-size: 0.9em;
- border-top: 1px solid silver;
margin-top: 3em;
padding: 1em;
background: colors.$footer-background-color;
diff --git a/styles/_globals.scss b/styles/_globals.scss
new file mode 100644
index 000000000..f1ac6bd09
--- /dev/null
+++ b/styles/_globals.scss
@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* Light/dark mode. See: _main-common.css */
+$mode: 'light' !default;
+
+@function lightdark($light, $dark) {
+ @return if($mode == 'light', $light, $dark);
+}
+
diff --git a/styles/_header.scss b/styles/_header.scss
index 5e7a2df25..b235db87b 100644
--- a/styles/_header.scss
+++ b/styles/_header.scss
@@ -20,7 +20,7 @@
@use 'colors';
div#header {
- color: white;
+ color: colors.$header-text-color;
background: colors.$header-background-color;
display: table;
width: 100%;
diff --git a/styles/_headings.scss b/styles/_headings.scss
index 94b80585a..f2fc0f4df 100644
--- a/styles/_headings.scss
+++ b/styles/_headings.scss
@@ -17,6 +17,9 @@
* under the License.
*/
+@use 'colors';
+@use 'globals';
+
h1 {
margin-top: 0.25in;
margin-bottom: 0.25in;
@@ -58,11 +61,11 @@ h1 {
h2 {
font-weight: 300;
font-size: 2em;
- border-left: 3px solid black;
+ border-left: 3px solid colors.$text-color;
padding: 0.5em;
margin: 2em 0;
margin-bottom: 1em;
- background: #f9f9f9;
+ background: globals.lightdark(#f9f9f9, #222);
}
h3 {
diff --git a/styles/_home.scss b/styles/_home.scss
index 38e6d0fe9..89e3dff5e 100644
--- a/styles/_home.scss
+++ b/styles/_home.scss
@@ -17,6 +17,8 @@
* under the License.
*/
+@use 'globals';
+
ul.features {
list-style: none;
}
@@ -46,23 +48,23 @@ ul.features li::before {
}
ul.features li.apache::before {
- background-image: url('/images/home/feature-open-source.svg');
+ background-image: url('/images/home/feature-open-source-#{globals.$mode}.svg');
}
ul.features li.html5::before {
- background-image: url('/images/home/feature-access-anywhere.svg');
+ background-image: url('/images/home/feature-access-anywhere-#{globals.$mode}.svg');
}
ul.features li.cloud-desktop::before {
- background-image: url('/images/home/feature-cloud-desktop.svg');
+ background-image: url('/images/home/feature-cloud-desktop-#{globals.$mode}.svg');
}
ul.features li.documented-api::before {
- background-image: url('/images/home/feature-well-documented.svg');
+ background-image: url('/images/home/feature-well-documented-#{globals.$mode}.svg');
}
ul.features li.commercially-supported::before {
- background-image: url('/images/home/feature-supported.svg');
+ background-image: url('/images/home/feature-supported-#{globals.$mode}.svg');
}
ul.features li h2 {
@@ -107,7 +109,7 @@ ul.features li h2 {
content: ' ';
background: transparent;
- background-image: url('/images/backgrounds/bowl-clip-bottom.svg');
+ background-image: url('/images/backgrounds/bowl-clip-bottom-#{globals.$mode}.svg');
background-repeat: no-repeat;
background-size: 200%;
background-position: bottom;
@@ -151,11 +153,10 @@ body.home .fullwidth-content:before {
display: block;
content: ' ';
-
- background: #e3f6ff;
+ background: globals.lightdark(#e3f6ff, #141928);
background-image:
- url('/images/backgrounds/bowl-clip-top.svg'),
- url('/images/backgrounds/bowl-clip-bottom.svg');
+ url('/images/backgrounds/bowl-clip-top-#{globals.$mode}.svg'),
+ url('/images/backgrounds/bowl-clip-bottom-#{globals.$mode}.svg');
background-repeat: no-repeat;
background-size: 200%;
background-position: center top -5em, bottom;
diff --git a/styles/_mailing-list-list.scss b/styles/_mailing-list-list.scss
index 93f910df7..7af8ab69c 100644
--- a/styles/_mailing-list-list.scss
+++ b/styles/_mailing-list-list.scss
@@ -17,12 +17,14 @@
* under the License.
*/
+@use 'colors';
+
.mailing-list-title {
margin-bottom: 0;
}
p.mailing-list-archive a[href] {
- border: 1px solid #12551f;
+ border: 1px solid colors.$link-text-color;
text-decoration: none;
border-radius: 3px;
padding: 0.25em 0.5em;
diff --git a/styles/main.scss b/styles/_main-common.scss
similarity index 89%
rename from styles/main.scss
rename to styles/_main-common.scss
index bd607514c..e0e928732 100644
--- a/styles/main.scss
+++ b/styles/_main-common.scss
@@ -1,10 +1,4 @@
----
-# YAML front matter is required for top-level processing of SCSS files by
-# Jekyll, even if empty. The same is not required for SCSS files that are
-# manually imported with "@use".
----
-
-/*!
+/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
@@ -23,6 +17,15 @@
* under the License.
*/
+/*
+ * Light/dark mode. Possible values are "light" and "dark".
+ */
+$mode: 'light' !default;
+
+@use '_globals.scss' with (
+ $mode: $mode
+);
+
/*
* Fonts shared across website.
*/
diff --git a/styles/_release-annotations.scss b/styles/_release-annotations.scss
index f2bf7218f..5eb668b75 100644
--- a/styles/_release-annotations.scss
+++ b/styles/_release-annotations.scss
@@ -17,10 +17,13 @@
* under the License.
*/
+@use 'colors';
+
#release-notes li.bug:before {
content: 'Bug';
text-transform: uppercase;
background: #ffa5a5;
+ color: colors.$dark-text-color;
padding: 0.25em 0.5em;
margin-right: 0.25em;
border-radius: 3px;
diff --git a/styles/_release-downloads.scss b/styles/_release-downloads.scss
index ab12a9a30..f86fa1bcf 100644
--- a/styles/_release-downloads.scss
+++ b/styles/_release-downloads.scss
@@ -17,6 +17,9 @@
* under the License.
*/
+@use 'colors';
+@use 'globals';
+
.release-downloads .filename {
font-family: 'Inconsolata', monospace;
}
@@ -25,8 +28,12 @@
display: inline-block;
font-size: 0.75em;
padding: 0.25em 0.5em;
- border: 1px solid black;
+ border: 1px solid colors.$text-color;
border-radius: 3px;
- background: #d1e9d9;
+ background: globals.lightdark(#d1e9d9, #3b423d);
+}
+
+.release-downloads tr:nth-child(even) {
+ background: globals.lightdark(#f9f9f9, #161616);
}
diff --git a/styles/_release-links.scss b/styles/_release-links.scss
index 30b1bf826..1c168e7bf 100644
--- a/styles/_release-links.scss
+++ b/styles/_release-links.scss
@@ -17,13 +17,16 @@
* under the License.
*/
+@use 'colors';
+@use 'globals';
+
div#links {
float: right;
- background: #FFFFFA;
+ background: globals.lightdark(#FFFFFA, #282828);
margin: 0 2em;
width: auto;
padding: 1em;
- border-left: 3px solid black;
+ border-left: 3px solid colors.$text-color;
}
div#links h2 {
diff --git a/styles/_release-list.scss b/styles/_release-list.scss
index 0efe2fd22..5cbc0be88 100644
--- a/styles/_release-list.scss
+++ b/styles/_release-list.scss
@@ -17,6 +17,10 @@
* under the License.
*/
+@use 'sass:color';
+@use 'colors';
+@use 'globals';
+
ul.releases {
display: table;
margin: 0;
@@ -37,12 +41,12 @@ ul.releases li > a[href] {
ul.releases li > a[href] .release-date,
ul.releases li > a[href] .release-summary {
font-weight: normal;
- color: black;
+ color: colors.$text-color;
padding-left: 0.75em;
}
ul.releases li > a[href]:hover {
- box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+ box-shadow: 1px 1px 5px color.change(colors.$text-color, $alpha: 0.5);
z-index: 1;
}
@@ -64,7 +68,7 @@ ul.releases li .release-summary {
ul.releases li > a[href]:hover .release-tag,
ul.releases li > a[href]:hover .release-summary {
- border-color: black;
+ border-color: colors.$text-color;
}
ul.releases li .release-date {
@@ -78,7 +82,7 @@ ul.releases li .release-tag {
font-size: 1.5em;
text-align: right;
white-space: nowrap;
- background: #eaeaea;
+ background: globals.lightdark(#eaeaea, #282828);
position: relative;
border-right: none;
}
@@ -90,7 +94,7 @@ ul.releases li .release-tag .release-version {
ul.releases li .release-tag:after {
display: block;
content: ' ';
- background: black;
+ background: colors.$text-color;
width: 11px;
height: 11px;
border-radius: 11px;
@@ -103,7 +107,7 @@ ul.releases li .release-tag:after {
ul.releases li .release-tag:before {
display: block;
content: ' ';
- background: black;
+ background: colors.$text-color;
width: 3px;
position: absolute;
top: -1px;
@@ -113,7 +117,7 @@ ul.releases li .release-tag:before {
ul.releases li .release-section {
display: table-cell;
- border-right: 3px dotted black;
+ border-right: 3px dotted colors.$text-color;
height: 3em;
vertical-align: middle;
text-align: center;
@@ -128,8 +132,8 @@ ul.releases li .release-section-description {
}
ul.releases li.current .release-tag {
- background: #dfffdf;
- background-image: url('/images/releases/current-release-star.svg');
+ background: globals.lightdark(#dfffdf, #1d401d);
+ background-image: url('/images/releases/current-release-star-#{globals.$mode}.svg');
background-position: 16px center;
background-repeat: no-repeat;
background-size: 32px;
diff --git a/styles/main-dark.scss b/styles/main-dark.scss
new file mode 100644
index 000000000..dd9ad63b8
--- /dev/null
+++ b/styles/main-dark.scss
@@ -0,0 +1,27 @@
+---
+# YAML front matter is required for top-level processing of SCSS files by
+# Jekyll, even if empty. The same is not required for SCSS files that are
+# manually imported with "@use".
+---
+
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@use '_main-common.scss' with ($mode: 'dark');
+
diff --git a/styles/main-light.scss b/styles/main-light.scss
new file mode 100644
index 000000000..7afe0e5fe
--- /dev/null
+++ b/styles/main-light.scss
@@ -0,0 +1,27 @@
+---
+# YAML front matter is required for top-level processing of SCSS files by
+# Jekyll, even if empty. The same is not required for SCSS files that are
+# manually imported with "@use".
+---
+
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@use '_main-common.scss' with ($mode: 'light');
+