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 2025/12/17 20:16:23 UTC
(airflow-site) 01/01: Improve dark mode UI/UX contrast and design
This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch improve-dark-mode-ui
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
commit bcf06094206e619bca1e716ced11b2a59b16a0d2
Author: Kaxil Naik <ka...@gmail.com>
AuthorDate: Wed Dec 17 20:16:08 2025 +0000
Improve dark mode UI/UX contrast and design
- 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 | 8 ++++
landing-pages/site/assets/scss/_blog-page.scss | 6 ++-
landing-pages/site/assets/scss/_buttons.scss | 28 ++++++++++++++
.../site/assets/scss/_community-page.scss | 19 ++++++++--
landing-pages/site/assets/scss/_feature.scss | 11 ++++++
landing-pages/site/assets/scss/_list-boxes.scss | 32 ++++++++++++++++
.../site/assets/scss/_markdown-content.scss | 43 +++++++++++++++++++++-
.../site/assets/scss/_text-with-icon.scss | 13 +++++++
8 files changed, 155 insertions(+), 5 deletions(-)
diff --git a/landing-pages/site/assets/scss/_base-layout.scss b/landing-pages/site/assets/scss/_base-layout.scss
index 953e79c4b0..6691dda025 100644
--- a/landing-pages/site/assets/scss/_base-layout.scss
+++ b/landing-pages/site/assets/scss/_base-layout.scss
@@ -95,6 +95,10 @@
}
}
+[data-bs-theme="dark"] .page-header {
+ color: var(--bs-emphasis-color) !important;
+}
+
.section-header {
@extend .page-header;
margin-top: 80px;
@@ -114,6 +118,10 @@
}
}
+[data-bs-theme="dark"] .page-subtitle {
+ color: var(--bs-secondary-color) !important;
+}
+
.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..2269f3a1e1 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);
@@ -195,4 +195,8 @@
.new-entry--link {
color: var(--bs-link-color);
}
+
+ .blog-pager h5 {
+ color: var(--bs-emphasis-color) !important;
+ }
}
diff --git a/landing-pages/site/assets/scss/_buttons.scss b/landing-pages/site/assets/scss/_buttons.scss
index 0b08c1e283..c84285682b 100644
--- a/landing-pages/site/assets/scss/_buttons.scss
+++ b/landing-pages/site/assets/scss/_buttons.scss
@@ -37,6 +37,11 @@ button {
&:hover {
border-color: map_get($colors, bright-sky-blue);
background-color: map_get($colors, bright-sky-blue);
+
+ [data-bs-theme="dark"] & {
+ background-color: var(--bs-link-hover-color);
+ border-color: var(--bs-link-hover-color);
+ }
}
}
@@ -61,10 +66,19 @@ button {
&.btn-hollow {
background-color: map_get($colors, white);
+ [data-bs-theme="dark"] & {
+ background-color: transparent;
+ }
+
&.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,16 +87,30 @@ 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);
+ }
}
}
&.btn-brown {
border-color: map_get($colors, very-light-pink);
+ [data-bs-theme="dark"] & {
+ border-color: rgba(255, 255, 255, 0.2);
+ }
+
&:hover {
background-color: map_get($colors, greyish-brown);
border-color: map_get($colors, greyish-brown);
+ [data-bs-theme="dark"] & {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.3);
+ }
+
span {
color: map_get($colors, white);
}
diff --git a/landing-pages/site/assets/scss/_community-page.scss b/landing-pages/site/assets/scss/_community-page.scss
index 81af6199ca..9cacde8e8d 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) !important;
+ }
+
+ .community--accordion-container .dev-list {
+ color: var(--bs-body-color) !important;
+ }
+}
diff --git a/landing-pages/site/assets/scss/_feature.scss b/landing-pages/site/assets/scss/_feature.scss
index 1948c0fe3e..498b723f2c 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) !important;
+ }
+ &--text {
+ color: var(--bs-body-color) !important;
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss b/landing-pages/site/assets/scss/_list-boxes.scss
index 4ba892808e..632f064d74 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) !important;
+ }
+ &--description, &--date {
+ color: var(--bs-secondary-color) !important;
+ }
+ }
+ &__committer--nick {
+ color: var(--bs-emphasis-color) !important;
+ }
+ &__meetup--members {
+ color: var(--bs-secondary-color) !important;
+ }
+ &__integration--name {
+ color: var(--bs-emphasis-color) !important;
+ }
+ &__case-study--quote,
+ &__use-cases--usecasedescription,
+ &__use-cases--testimonial--quote {
+ color: var(--bs-body-color) !important;
+ }
+ }
+}
+
@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..d0b985bce0 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) !important;
+ }
+
+ p, span, li {
+ color: var(--bs-body-color) !important;
+ }
+
+ 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) !important;
+
+ span {
+ color: #E6EDF3 !important;
+ }
+ }
+}
diff --git a/landing-pages/site/assets/scss/_text-with-icon.scss b/landing-pages/site/assets/scss/_text-with-icon.scss
index 8536402147..3a76d490e0 100644
--- a/landing-pages/site/assets/scss/_text-with-icon.scss
+++ b/landing-pages/site/assets/scss/_text-with-icon.scss
@@ -50,6 +50,19 @@
}
}
+[data-bs-theme="dark"] {
+ .text-with-icon-item {
+ &--header {
+ color: #ffffff !important; // Fallback to white
+ color: var(--bs-emphasis-color) !important;
+ }
+ &--text {
+ color: #dee2e6 !important; // Fallback to light gray
+ color: var(--bs-body-color) !important;
+ }
+ }
+}
+
@media (min-width: $fullhd) {
.text-with-icon-list {
max-width: unset;