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 <[email protected]> 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;
