This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/main by this push:
new 82cc9b16e5 Improve dark mode UI/UX contrast and design (#1333)
82cc9b16e5 is described below
commit 82cc9b16e5d63c18183738e6a812ed6712dc5e2b
Author: Kaxil Naik <[email protected]>
AuthorDate: Wed Dec 17 21:16:43 2025 +0000
Improve dark mode UI/UX contrast and design (#1333)
- Fixed low contrast on Homepage Principles and Features sections.
- Improved Blog list and post page header visibility.
- Fixed code block background and syntax highlighting in dark mode
(github-dark).
- Improved card design and text contrast on Meetups and Community pages.
- Leveraged Bootstrap 5.3+ color mode variables for consistency.
- Fixed linting errors (descending specificity and import placement).
---
landing-pages/site/assets/scss/_base-layout.scss | 11 +++++
landing-pages/site/assets/scss/_blog-page.scss | 6 ++-
landing-pages/site/assets/scss/_buttons.scss | 54 ++++++++++++++++------
.../site/assets/scss/_community-page.scss | 19 ++++++--
landing-pages/site/assets/scss/_feature.scss | 11 +++++
landing-pages/site/assets/scss/_highlights.scss | 24 ++++++++++
landing-pages/site/assets/scss/_list-boxes.scss | 32 +++++++++++++
.../site/assets/scss/_markdown-content.scss | 43 ++++++++++++++++-
.../site/assets/scss/_text-with-icon.scss | 11 +++++
9 files changed, 193 insertions(+), 18 deletions(-)
diff --git a/landing-pages/site/assets/scss/_base-layout.scss
b/landing-pages/site/assets/scss/_base-layout.scss
index 953e79c4b0..77472b42fc 100644
--- a/landing-pages/site/assets/scss/_base-layout.scss
+++ b/landing-pages/site/assets/scss/_base-layout.scss
@@ -114,6 +114,17 @@
}
}
+[data-bs-theme="dark"] {
+ .page-header,
+ .section-header {
+ color: var(--bs-emphasis-color);
+ }
+
+ .page-subtitle {
+ color: var(--bs-secondary-color);
+ }
+}
+
.container {
margin-top: 44px;
max-width: 1200px;
diff --git a/landing-pages/site/assets/scss/_blog-page.scss
b/landing-pages/site/assets/scss/_blog-page.scss
index 53296f0e27..8756f72c23 100644
--- a/landing-pages/site/assets/scss/_blog-page.scss
+++ b/landing-pages/site/assets/scss/_blog-page.scss
@@ -184,7 +184,7 @@
.tag {
color: var(--bs-link-color);
- background-color: var(--bs-link-color-rgb, 104, 210, 254, 0.15);
+ background-color: rgba(var(--bs-link-color-rgb), 0.15);
&.active, &:hover {
background-color: var(--bs-link-color);
@@ -196,3 +196,7 @@
color: var(--bs-link-color);
}
}
+
+[data-bs-theme="dark"] .blog-pager h5 {
+ color: var(--bs-emphasis-color);
+}
diff --git a/landing-pages/site/assets/scss/_buttons.scss
b/landing-pages/site/assets/scss/_buttons.scss
index 0b08c1e283..0b734d850d 100644
--- a/landing-pages/site/assets/scss/_buttons.scss
+++ b/landing-pages/site/assets/scss/_buttons.scss
@@ -61,10 +61,34 @@ button {
&.btn-hollow {
background-color: map_get($colors, white);
+ &.btn-brown {
+ border-color: map_get($colors, very-light-pink);
+
+ &:hover {
+ background-color: map_get($colors, greyish-brown);
+ border-color: map_get($colors, greyish-brown);
+
+ span {
+ color: map_get($colors, white);
+ }
+
+ svg {
+ path {
+ fill: map_get($colors, white);
+ }
+ }
+ }
+ }
+
&.btn-blue {
color: map_get($colors, cerulean-blue);
border-color: map_get($colors, cerulean-blue);
+ [data-bs-theme="dark"] & {
+ color: var(--bs-link-color);
+ border-color: var(--bs-link-color);
+ }
+
&:disabled {
color: map_get($colors, very-light-pink);
border-color: map_get($colors, very-light-pink);
@@ -73,29 +97,33 @@ button {
&:hover:enabled {
color: map_get($colors, white);
background-color: map_get($colors, cerulean-blue);
+
+ [data-bs-theme="dark"] & {
+ background-color: var(--bs-link-color);
+ color: var(--bs-body-bg);
+ }
}
}
+ }
+
+ [data-bs-theme="dark"] &.btn-hollow {
+ background-color: transparent;
&.btn-brown {
- border-color: map_get($colors, very-light-pink);
+ border-color: rgba(255, 255, 255, 0.2);
&:hover {
- background-color: map_get($colors, greyish-brown);
- border-color: map_get($colors, greyish-brown);
-
- span {
- color: map_get($colors, white);
- }
-
- svg {
- path {
- fill: map_get($colors, white);
- }
- }
+ background-color: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.3);
}
}
}
+ [data-bs-theme="dark"] &.btn-filled.btn-blue:hover {
+ background-color: var(--bs-link-hover-color);
+ border-color: var(--bs-link-hover-color);
+ }
+
&.with-box-shadow {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
}
diff --git a/landing-pages/site/assets/scss/_community-page.scss
b/landing-pages/site/assets/scss/_community-page.scss
index 81af6199ca..f27eb24096 100644
--- a/landing-pages/site/assets/scss/_community-page.scss
+++ b/landing-pages/site/assets/scss/_community-page.scss
@@ -228,6 +228,19 @@
justify-content: flex-end;
}
- .roadmap .wy-nav-side-toc {
- top: 263px !important;
- }
+.roadmap .wy-nav-side-toc {
+ top: 263px !important;
+}
+
+[data-bs-theme="dark"] {
+ .community--header-join,
+ .community--header-persona,
+ .community--committers-header,
+ .community--resources-header {
+ color: var(--bs-emphasis-color);
+ }
+
+ .community--accordion-container .dev-list {
+ color: var(--bs-body-color);
+ }
+}
diff --git a/landing-pages/site/assets/scss/_feature.scss
b/landing-pages/site/assets/scss/_feature.scss
index 1948c0fe3e..abe8812927 100644
--- a/landing-pages/site/assets/scss/_feature.scss
+++ b/landing-pages/site/assets/scss/_feature.scss
@@ -106,3 +106,14 @@
}
}
}
+
+[data-bs-theme="dark"] {
+ .feature-item {
+ &--header {
+ color: var(--bs-emphasis-color);
+ }
+ &--text {
+ color: var(--bs-body-color);
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/_highlights.scss
b/landing-pages/site/assets/scss/_highlights.scss
index c651ba6ebf..f631b46308 100644
--- a/landing-pages/site/assets/scss/_highlights.scss
+++ b/landing-pages/site/assets/scss/_highlights.scss
@@ -17,6 +17,7 @@
* under the License.
*/
@import "colors";
+@import "pygments/dark";
.chroma, .highlight {
background-color: #ffffff;
@@ -94,3 +95,26 @@ pre {
@extend .monotext--brownish-grey;
}
}
+
+[data-bs-theme="dark"] {
+ .chroma, .highlight {
+ background-color: #0d1117;
+
+ .hl {
+ background-color: #6e7681;
+ }
+
+ .lnt, .ln {
+ color: #6e7681;
+ }
+ }
+
+ pre {
+ background-color: #0d1117;
+ border-color: rgba(255, 255, 255, 0.1);
+
+ span {
+ color: #E6EDF3;
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss
b/landing-pages/site/assets/scss/_list-boxes.scss
index 4ba892808e..5040422c46 100644
--- a/landing-pages/site/assets/scss/_list-boxes.scss
+++ b/landing-pages/site/assets/scss/_list-boxes.scss
@@ -67,6 +67,11 @@ $card-margin: 20px;
height: 100%;
}
+[data-bs-theme="dark"] .card {
+ background: rgba(255, 255, 255, 0.03);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
.box-event {
display: flex;
flex-direction: column;
@@ -283,6 +288,33 @@ $card-margin: 20px;
}
}
+[data-bs-theme="dark"] {
+ .box-event {
+ &__blogpost {
+ &--header {
+ color: var(--bs-emphasis-color);
+ }
+ &--description, &--date {
+ color: var(--bs-secondary-color);
+ }
+ }
+ &__committer--nick {
+ color: var(--bs-emphasis-color);
+ }
+ &__meetup--members {
+ color: var(--bs-secondary-color);
+ }
+ &__integration--name {
+ color: var(--bs-emphasis-color);
+ }
+ &__case-study--quote,
+ &__use-cases--usecasedescription,
+ &__use-cases--testimonial--quote {
+ color: var(--bs-body-color);
+ }
+ }
+}
+
@media (max-width: $mobile) {
.box-event {
&__blogpost {
diff --git a/landing-pages/site/assets/scss/_markdown-content.scss
b/landing-pages/site/assets/scss/_markdown-content.scss
index 81952438a5..1e0d3b0b02 100644
--- a/landing-pages/site/assets/scss/_markdown-content.scss
+++ b/landing-pages/site/assets/scss/_markdown-content.scss
@@ -17,6 +17,8 @@
* under the License.
*/
+@import "pygments/dark";
+
.markdown-content {
h1, h2, h3, h4, h5 {
@extend .subtitle__large--greyish-brown;
@@ -43,7 +45,7 @@
width: 100%;
}
- th {
+ th {
background: #ccc;
}
@@ -64,3 +66,42 @@
color: #707070;
}
}
+
+[data-bs-theme="dark"] .markdown-content {
+ h1, h2, h3, h4, h5 {
+ color: var(--bs-emphasis-color);
+ }
+
+ p, span, li {
+ color: var(--bs-body-color);
+ }
+
+ th {
+ background: var(--bs-tertiary-bg);
+ }
+
+ th, td {
+ border-color: var(--bs-border-color);
+ }
+
+ tr:nth-child(even) {
+ background: rgba(255, 255, 255, 0.02);
+ }
+
+ tr:hover {
+ background: rgba(255, 255, 255, 0.05);
+ }
+
+ .chroma, .highlight {
+ background-color: #0d1117 !important;
+ }
+
+ pre {
+ background-color: #0d1117 !important;
+ border-color: rgba(255, 255, 255, 0.1);
+
+ span {
+ color: #E6EDF3;
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/_text-with-icon.scss
b/landing-pages/site/assets/scss/_text-with-icon.scss
index 8536402147..669510207c 100644
--- a/landing-pages/site/assets/scss/_text-with-icon.scss
+++ b/landing-pages/site/assets/scss/_text-with-icon.scss
@@ -50,6 +50,17 @@
}
}
+[data-bs-theme="dark"] {
+ .text-with-icon-item {
+ &--header {
+ color: var(--bs-emphasis-color, #ffffff);
+ }
+ &--text {
+ color: var(--bs-body-color, #dee2e6);
+ }
+ }
+}
+
@media (min-width: $fullhd) {
.text-with-icon-list {
max-width: unset;
