You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2026/04/15 23:53:39 UTC
(airflow-site) branch improve-dark-mode-polish created (now dc48c475e7)
This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a change to branch improve-dark-mode-polish
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
at dc48c475e7 Polish dark mode: deeper palette, compact navbar, remove stale banner offsets
This branch includes the following new commits:
new dc48c475e7 Polish dark mode: deeper palette, compact navbar, remove stale banner offsets
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(airflow-site) 01/01: Polish dark mode: deeper palette, compact navbar, remove stale banner offsets
Posted by ka...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch improve-dark-mode-polish
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
commit dc48c475e7e7d518beabe3ee1400dbebb2d5ebce
Author: Kaxil Naik <ka...@gmail.com>
AuthorDate: Thu Apr 16 00:53:27 2026 +0100
Polish dark mode: deeper palette, compact navbar, remove stale banner offsets
- Override Bootstrap dark mode root variables with a deeper navy-black
palette (#0f1117) and cyan accent color (#38bdf8) to match the
registry site's visual language
- Disable $enable-gradients (removes invisible white overlay on buttons/navbar)
- Replace hardcoded dark mode hex values across navbar, highlights,
markdown-content, roadmap, and search with CSS variables
- Reduce navbar vertical padding from 30px to 14px for a modern compact look
- Remove all TEMP Airflow Summit banner padding accommodations and update
dependent offsets (base-layout, header, roadmap sidebars, 404, community)
- Move globaltoc.html inline color styles to SCSS system for dark mode compat
- Add dark mode treatment to search form
- Fix hero canvas background to match new body bg color
- Add global SVG fill fix for hardcoded #51504f icons
---
landing-pages/site/assets/scss/_base-layout.scss | 3 +-
landing-pages/site/assets/scss/_colors.scss | 24 +++++++++++++
.../site/assets/scss/_community-page.scss | 4 +--
landing-pages/site/assets/scss/_four-oh-four.scss | 2 +-
landing-pages/site/assets/scss/_header.scss | 4 +--
landing-pages/site/assets/scss/_highlights.scss | 6 ++--
landing-pages/site/assets/scss/_home-page.scss | 3 +-
.../site/assets/scss/_markdown-content.scss | 6 ++--
landing-pages/site/assets/scss/_navbar.scss | 36 ++++++++-----------
landing-pages/site/assets/scss/_roadmap.scss | 40 +++++++++++++---------
landing-pages/site/assets/scss/_search.scss | 19 ++++++++++
landing-pages/site/assets/scss/_variables.scss | 2 +-
landing-pages/src/js/headerAnimation.js | 2 +-
sphinx_airflow_theme/.theme_files_hash | 2 +-
sphinx_airflow_theme/LATEST_VERSION.txt | 2 +-
.../sphinx_airflow_theme/__init__.py | 2 +-
.../sphinx_airflow_theme/globaltoc.html | 37 ++------------------
17 files changed, 100 insertions(+), 94 deletions(-)
diff --git a/landing-pages/site/assets/scss/_base-layout.scss b/landing-pages/site/assets/scss/_base-layout.scss
index ea0c1c4b6a..1d326fbc0e 100644
--- a/landing-pages/site/assets/scss/_base-layout.scss
+++ b/landing-pages/site/assets/scss/_base-layout.scss
@@ -20,8 +20,7 @@
@import "fonts";
.base-layout {
- // padding: 123px 0 40px;
- padding: 163px 0 40px; // TEMP - accommodate Airflow Summit banner (123 + 40)
+ padding: 91px 0 40px;
&--scrollButton {
position: sticky;
diff --git a/landing-pages/site/assets/scss/_colors.scss b/landing-pages/site/assets/scss/_colors.scss
index 948b34cc78..3d2b08dad7 100644
--- a/landing-pages/site/assets/scss/_colors.scss
+++ b/landing-pages/site/assets/scss/_colors.scss
@@ -37,3 +37,27 @@ $colors: (
.-bg-orange {
background-color: #FFA630; // Using $secondary color value
}
+
+// Dark mode overrides — deeper backgrounds and cyan accent to match registry feel
+[data-bs-theme="dark"] {
+ --bs-body-bg: #0f1117;
+ --bs-body-color: rgba(255, 255, 255, 0.87);
+ --bs-emphasis-color: rgba(255, 255, 255, 0.95);
+ --bs-secondary-color: rgba(255, 255, 255, 0.65);
+ --bs-link-color: #38bdf8;
+ --bs-link-hover-color: #7dd3fc;
+ --bs-secondary-bg: #1a1f2e;
+ --bs-tertiary-bg: #242937;
+ --bs-border-color: rgba(255, 255, 255, 0.1);
+ --bs-code-color: #f0abfc;
+
+ // Code blocks (GitHub Dark)
+ --af-code-bg: #0d1117;
+ --af-code-border: rgba(255, 255, 255, 0.08);
+
+ // Fix hardcoded SVG fills that become invisible on dark backgrounds
+ svg path[fill="#51504f"],
+ svg rect[fill="#51504f"] {
+ fill: rgba(255, 255, 255, 0.85);
+ }
+}
diff --git a/landing-pages/site/assets/scss/_community-page.scss b/landing-pages/site/assets/scss/_community-page.scss
index 5a15778211..3402469f36 100644
--- a/landing-pages/site/assets/scss/_community-page.scss
+++ b/landing-pages/site/assets/scss/_community-page.scss
@@ -94,8 +94,8 @@
overflow-y: auto;
height: 100px;
padding-left: 30px;
- max-height: -webkit-calc(100vh - 163px);
- max-height: calc(100vh - 163px);
+ max-height: -webkit-calc(100vh - 91px);
+ max-height: calc(100vh - 91px);
font-size: 14px;
line-height: 1.43;
}
diff --git a/landing-pages/site/assets/scss/_four-oh-four.scss b/landing-pages/site/assets/scss/_four-oh-four.scss
index 512a51880f..207099bf36 100644
--- a/landing-pages/site/assets/scss/_four-oh-four.scss
+++ b/landing-pages/site/assets/scss/_four-oh-four.scss
@@ -18,7 +18,7 @@
*/
.four-oh-four {
- height: calc(100vh - 123px);
+ height: calc(100vh - 91px);
position: relative;
&__text-container {
diff --git a/landing-pages/site/assets/scss/_header.scss b/landing-pages/site/assets/scss/_header.scss
index 7e0b7a37ac..5cb022bbb9 100644
--- a/landing-pages/site/assets/scss/_header.scss
+++ b/landing-pages/site/assets/scss/_header.scss
@@ -20,8 +20,8 @@
#header {
position: relative;
- margin: 123px -20px 0;
- min-height: calc(100vh - 123px);
+ margin: 91px -20px 0;
+ min-height: calc(100vh - 91px);
// background-color is handled by the canvas animation which draws white/dark background
transition: background-color 0.3s ease;
}
diff --git a/landing-pages/site/assets/scss/_highlights.scss b/landing-pages/site/assets/scss/_highlights.scss
index 1407969144..f8186e63da 100644
--- a/landing-pages/site/assets/scss/_highlights.scss
+++ b/landing-pages/site/assets/scss/_highlights.scss
@@ -130,7 +130,7 @@ pre {
[data-bs-theme="dark"] {
// Dark theme for RST/Sphinx docs only
.highlight {
- background-color: #0d1117;
+ background-color: var(--af-code-bg);
.hl {
background-color: #6e7681;
@@ -143,7 +143,7 @@ pre {
}
pre {
- background-color: #0d1117;
- border-color: rgba(255, 255, 255, 0.1);
+ background-color: var(--af-code-bg);
+ border-color: var(--af-code-border);
}
}
diff --git a/landing-pages/site/assets/scss/_home-page.scss b/landing-pages/site/assets/scss/_home-page.scss
index 778016183a..5e4fb94b23 100644
--- a/landing-pages/site/assets/scss/_home-page.scss
+++ b/landing-pages/site/assets/scss/_home-page.scss
@@ -20,8 +20,7 @@
.home-page-layout {
&.base-layout {
- // padding-top: 70px;
- padding-top: 110px; // TEMP - accommodate Airflow Summit banner (70 + 40)
+ padding-top: 70px;
@media (max-width: $mobile) {
padding-top: 80px;
diff --git a/landing-pages/site/assets/scss/_markdown-content.scss b/landing-pages/site/assets/scss/_markdown-content.scss
index d273c62222..48ac96550e 100644
--- a/landing-pages/site/assets/scss/_markdown-content.scss
+++ b/landing-pages/site/assets/scss/_markdown-content.scss
@@ -100,11 +100,11 @@
}
.chroma, .highlight {
- background-color: #0d1117 !important;
+ background-color: var(--af-code-bg) !important;
}
pre {
- background-color: #0d1117 !important;
- border-color: rgba(255, 255, 255, 0.1);
+ background-color: var(--af-code-bg) !important;
+ border-color: var(--af-code-border);
}
}
diff --git a/landing-pages/site/assets/scss/_navbar.scss b/landing-pages/site/assets/scss/_navbar.scss
index 0d0fcc3fbb..ca669e3c87 100644
--- a/landing-pages/site/assets/scss/_navbar.scss
+++ b/landing-pages/site/assets/scss/_navbar.scss
@@ -26,7 +26,7 @@
background-color: white;
border-bottom: solid 1px map-get($colors, very-light-pink);
z-index: 32;
- padding: 30px 60px;
+ padding: 14px 60px;
transition: background-color 0.3s ease, border-color 0.3s ease;
&__menu-container {
@@ -181,7 +181,6 @@
&__drawer {
position: fixed;
top: 77px;
- // top: 117px; // TEMP - accommodate Airflow Summit banner (77 + 40)
left: 0;
width: 100%;
height: calc(100% - 77px);
@@ -218,27 +217,20 @@
// Dark mode styles
[data-bs-theme="dark"] {
.navbar {
- background-color: #1a1a1a;
- border-bottom-color: #333;
+ background-color: var(--bs-body-bg);
+ border-bottom-color: var(--bs-border-color);
&__text-link {
- color: rgba(255, 255, 255, 0.85);
+ color: var(--bs-body-color);
&:hover, &.active {
- color: rgba(255, 255, 255, 1);
- }
- }
-
- // Make logo text (Apache Airflow) white in dark mode
- &__icon-container {
- svg path[fill="#51504f"] {
- fill: rgba(255, 255, 255, 0.95);
+ color: var(--bs-emphasis-color);
}
}
// Also handle mobile drawer background
&__drawer {
- background-color: #1a1a1a;
+ background-color: var(--bs-body-bg);
}
// Theme toggle button visibility in dark mode
@@ -246,10 +238,10 @@
.btn,
.btn-link,
.nav-link {
- color: rgba(255, 255, 255, 0.85) !important;
+ color: var(--bs-body-color) !important;
&:hover, &:focus {
- color: rgba(255, 255, 255, 1) !important;
+ color: var(--bs-emphasis-color) !important;
}
svg {
@@ -263,20 +255,20 @@
}
.dropdown-menu {
- background-color: #1a1a1a;
- border-color: #333;
+ background-color: var(--bs-secondary-bg);
+ border-color: var(--bs-border-color);
.dropdown-item:not(.active) {
- color: rgba(255, 255, 255, 0.85);
+ color: var(--bs-body-color);
&:hover, &:focus {
- background-color: rgba(255, 255, 255, 0.1);
- color: #fff;
+ background-color: var(--bs-tertiary-bg);
+ color: var(--bs-emphasis-color);
}
}
.dropdown-item.active {
- background-color: map-get($colors, cerulean-blue);
+ background-color: var(--bs-link-color);
color: #fff;
}
}
diff --git a/landing-pages/site/assets/scss/_roadmap.scss b/landing-pages/site/assets/scss/_roadmap.scss
index 3b5b4bf99b..98bf488af5 100644
--- a/landing-pages/site/assets/scss/_roadmap.scss
+++ b/landing-pages/site/assets/scss/_roadmap.scss
@@ -48,9 +48,9 @@
.td-sidebar {
position: sticky;
- top: 163px;
+ top: 91px;
height: fit-content;
- max-height: calc(100vh - 163px);
+ max-height: calc(100vh - 91px);
max-width: 270px;
min-width: 270px;
width: 100%;
@@ -68,7 +68,7 @@
&::-webkit-scrollbar-thumb {
border-radius: 8px;
- border: 2px solid white;
+ border: 2px solid var(--bs-body-bg, white);
background-color: rgba(0, 0, 0, .5);
}
@@ -112,7 +112,7 @@
font-style: normal;
line-height: 1.63;
letter-spacing: normal;
- color: #707070;
+ color: var(--bs-secondary-color, #707070);
}
ul {
@@ -132,18 +132,18 @@
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
- color: #51504f;
+ color: var(--bs-emphasis-color, #51504f);
padding-bottom: 13px;
text-transform: uppercase;
margin-bottom: 0;
}
.current {
- color: #017cee;
+ color: var(--bs-link-color, #017cee);
font-weight: 500;
& > a:not([href="#"]) {
- color: #017cee;
+ color: var(--bs-link-color, #017cee);
}
}
@@ -182,7 +182,7 @@
top: 6px;
left: -12px;
font-size: 8px;
- color: #51504f;
+ color: var(--bs-secondary-color, #51504f);
}
& > ul {
@@ -202,12 +202,12 @@
.wy-nav-side-toc {
position: sticky;
- top: 163px;
+ top: 91px;
overflow-x: hidden;
overflow-y: auto;
width: 280px;
height: fit-content;
- max-height: calc(100vh - 163px);
+ max-height: calc(100vh - 91px);
font-size: 14px;
line-height: 1.43;
@@ -217,7 +217,7 @@
&::-webkit-scrollbar-thumb {
border-radius: 8px;
- border: 2px solid white;
+ border: 2px solid var(--bs-body-bg, white);
background-color: rgba(0, 0, 0, .5);
}
@@ -242,11 +242,11 @@
a {
display: inline-block;
padding: .4045em 0;
- color: #707070;
+ color: var(--bs-secondary-color, #707070);
}
li a {
- border-left: solid 2px #cbcbcb;
+ border-left: solid 2px var(--bs-border-color, #cbcbcb);
padding-left: calc(1.25em + 1px);
}
@@ -255,8 +255,8 @@
}
li.current > a {
- border-left: solid 4px #017cee;
- color: #017cee;
+ border-left: solid 4px var(--bs-link-color, #017cee);
+ color: var(--bs-link-color, #017cee);
}
li li > a {
@@ -290,6 +290,12 @@
}
// Dark mode styles for roadmap page
-[data-bs-theme="dark"] .roadmap .td-sidebar {
- background-color: #2d2d2d !important;
+[data-bs-theme="dark"] .roadmap {
+ .td-sidebar {
+ background-color: var(--bs-secondary-bg) !important;
+ }
+
+ .wy-nav-side-toc ::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.3);
+ }
}
diff --git a/landing-pages/site/assets/scss/_search.scss b/landing-pages/site/assets/scss/_search.scss
index a1a205069e..03c3d94a7b 100644
--- a/landing-pages/site/assets/scss/_search.scss
+++ b/landing-pages/site/assets/scss/_search.scss
@@ -55,3 +55,22 @@
margin-top: 30px;
}
}
+
+[data-bs-theme="dark"] {
+ .search-form {
+ border-color: var(--bs-border-color);
+ background-color: var(--bs-secondary-bg);
+
+ &__input {
+ color: var(--bs-body-color);
+
+ &::placeholder {
+ color: var(--bs-secondary-color);
+ }
+ }
+
+ &__button svg {
+ fill: var(--bs-body-color);
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/_variables.scss b/landing-pages/site/assets/scss/_variables.scss
index 93e12503ca..1b022e699c 100644
--- a/landing-pages/site/assets/scss/_variables.scss
+++ b/landing-pages/site/assets/scss/_variables.scss
@@ -20,7 +20,7 @@
@fa-font-path : "../webfonts";
// Bootstrap flags. For more, see https://getbootstrap.com/docs/4.0/getting-started/theming/
-$enable-gradients: true;
+$enable-gradients: false;
$enable-rounded: true;
$enable-shadows: true;
diff --git a/landing-pages/src/js/headerAnimation.js b/landing-pages/src/js/headerAnimation.js
index 9b77f3a49d..6d3c15e2dd 100644
--- a/landing-pages/src/js/headerAnimation.js
+++ b/landing-pages/src/js/headerAnimation.js
@@ -239,7 +239,7 @@ export function initHeaderAnimation() {
// Dark mode support: dynamically set canvas background based on theme
const isDarkMode = document.documentElement.getAttribute("data-bs-theme") === "dark";
if (isDarkMode) {
- sketch.background(26, 26, 26); // #1a1a1a to match dark navbar background
+ sketch.background(15, 17, 23); // #0f1117 to match dark body background
} else {
sketch.background(255, 255, 255);
}
diff --git a/sphinx_airflow_theme/.theme_files_hash b/sphinx_airflow_theme/.theme_files_hash
index 6308dca5ca..8859b075f9 100644
--- a/sphinx_airflow_theme/.theme_files_hash
+++ b/sphinx_airflow_theme/.theme_files_hash
@@ -1 +1 @@
-5e57ef9919138de44d33318637bfcd13f6972dfd0bf1665fa8dc175b29257f5e
+1086787f171cfa7569806c9dc130755931e0c52f16e036253ec4ac1deedace38
diff --git a/sphinx_airflow_theme/LATEST_VERSION.txt b/sphinx_airflow_theme/LATEST_VERSION.txt
index c2c0004f0e..449d7e73a9 100644
--- a/sphinx_airflow_theme/LATEST_VERSION.txt
+++ b/sphinx_airflow_theme/LATEST_VERSION.txt
@@ -1 +1 @@
-0.3.5
+0.3.6
diff --git a/sphinx_airflow_theme/sphinx_airflow_theme/__init__.py b/sphinx_airflow_theme/sphinx_airflow_theme/__init__.py
index 1dbd5365e4..d8f848df74 100644
--- a/sphinx_airflow_theme/sphinx_airflow_theme/__init__.py
+++ b/sphinx_airflow_theme/sphinx_airflow_theme/__init__.py
@@ -18,7 +18,7 @@
from os import path
from sphinx.application import Sphinx
-__version__ = '0.3.5'
+__version__ = '0.3.6'
__version_full__ = __version__
diff --git a/sphinx_airflow_theme/sphinx_airflow_theme/globaltoc.html b/sphinx_airflow_theme/sphinx_airflow_theme/globaltoc.html
index c5d5951628..d4426f62d9 100644
--- a/sphinx_airflow_theme/sphinx_airflow_theme/globaltoc.html
+++ b/sphinx_airflow_theme/sphinx_airflow_theme/globaltoc.html
@@ -22,28 +22,12 @@
{{ toctree(includehidden=theme_sidebar_includehidden, collapse=theme_sidebar_collapse) }}
</div>
+<!-- Toctree layout styles — colors are handled by the SCSS system (_roadmap.scss)
+ to support dark mode. Only layout/structure rules remain here. -->
<style type="text/css">
- .toctree {
- }
.toctree li {
list-style: none;
}
- .toctree .caption {
- font-family: Roboto;
- font-size: 18px;
- font-weight: bold;
- font-stretch: normal;
- font-style: normal;
- line-height: 1.33;
- letter-spacing: normal;
- color: #51504f;
- padding-bottom: 13px;
- text-transform: uppercase;
- margin-bottom: 0;
- }
- .toctree .current > a:not([href="#"]) {
- color: #017cee;
- }
.toctree > ul {
padding-left: 0;
}
@@ -55,13 +39,11 @@
.toctree li.current > ul {
display: block;
}
-
.toctree a .toctree-expand {
display: inline-block;
position: relative;
height: 1em;
}
-
.toctree a .toctree-expand:before {
position: absolute;
top: 6px;
@@ -72,19 +54,4 @@
.toctree .current > a > .toctree-expand:before {
content: '▼';
}
-
- .toctree .current {
- color: #017cee;
- }
- .toctree li {
- font-family: Roboto;
- font-size: 16px;
- font-weight: normal;
- font-stretch: normal;
- font-style: normal;
- line-height: 1.63;
- letter-spacing: normal;
- color: #707070;
- }
-
</style>