Add theme config - #58411

Merged
bbovenzi merged 8 commits into
apache:mainfrom
Zinkue:add-theme-config
Dec 11, 2025
Merged

Add theme config#58411
bbovenzi merged 8 commits into
apache:mainfrom
Zinkue:add-theme-config

Conversation

@Zinkue

@ZinkueZinkue commented Nov 17, 2025

Copy link
Copy Markdown
Contributor

closes: #53443
related: #56854

Enables the personalization of Chakra's UI theme via theme configuration property
Currently only the brand color palette can be customized.
Modifying the brand color palette you also modify the navbar/sidebar.

Provided a how-to-guide for customizing UI theme.

Screenshots

Input
green from theme.ts

AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.982 0.018 155.826)" }, "100": { "value": "oklch(0.962 0.044 156.743)" }, "200": { "value": "oklch(0.925 0.084 155.995)" }, "300": { "value": "oklch(0.75 0.18 153.0)" }, "400": { "value": "oklch(0.625 0.209 150.0)" }, "500": { "value": "oklch(0.528 0.219 149.579)" }, "600": { "value": "oklch(0.47 0.20 149.0)" }, "700": { "value": "oklch(0.40 0.16 149.5)" }, "800": { "value": "oklch(0.448 0.119 151.328)" }, "900": { "value": "oklch(0.393 0.095 152.535)" }, "950": { "value": "oklch(0.266 0.065 152.934)" } } } }}'

Output
green

Input
yellow from theme.ts

AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.987 0.026 102.212)" }, "100": { "value": "oklch(0.973 0.071 103.193)" }, "200": { "value": "oklch(0.945 0.129 101.54)" }, "300": { "value": "oklch(0.905 0.182 98.111)" }, "400": { "value": "oklch(0.852 0.199 91.936)" }, "500": { "value": "oklch(0.795 0.184 86.047)" }, "600": { "value": "oklch(0.681 0.162 75.834)" }, "700": { "value": "oklch(0.554 0.135 66.442)" }, "800": { "value": "oklch(0.476 0.114 61.907)" }, "900": { "value": "oklch(0.421 0.095 57.708)" }, "950": { "value": "oklch(0.286 0.066 53.813)" }, }, } }}'

Output
yellow

Input
red from theme.ts

AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.971 0.013 17.38)" }, "100": { "value": "oklch(0.936 0.032 17.717)" }, "200": { "value": "oklch(0.885 0.062 18.334)" }, "300": { "value": "oklch(0.808 0.114 19.571)" }, "400": { "value": "oklch(0.704 0.191 22.216)" }, "500": { "value": "oklch(0.637 0.237 25.331)" }, "600": { "value": "oklch(0.577 0.245 27.325)" }, "700": { "value": "oklch(0.505 0.213 27.518)" }, "800": { "value": "oklch(0.444 0.177 26.899)" }, "900": { "value": "oklch(0.396 0.141 25.723)" }, "950": { "value": "oklch(0.258 0.092 26.042)" } } } }}'

Output
red

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborgboring-cyborgBot added area:API Airflow's REST/HTTP API area:ConfigTemplates area:UI Related to UI/UX. For Frontend Developers. kind:documentation labels Nov 17, 2025
@Zinkue

Zinkue commented Nov 17, 2025

Copy link
Copy Markdown
ContributorAuthor

About the palette generator for us to make a suggestion.

I found this ones:

Played a little bit with them and both looks fine to me

@Zinkue
Zinkue marked this pull request as ready for review November 17, 2025 22:41
@Zinkue
Zinkueforce-pushed the add-theme-config branch 2 times, most recently from 0946506 to 0c48e71CompareNovember 23, 2025 11:34
@Zinkue

Zinkue commented Nov 23, 2025

Copy link
Copy Markdown
ContributorAuthor

Link to previous discussion/PR: #56854

@Zinkue
Zinkueforce-pushed the add-theme-config branch 2 times, most recently from 44c7a5b to 53d23c2CompareDecember 3, 2025 20:54
@bbovenzibbovenzi added this to the Airflow 3.2.0 milestone Dec 4, 2025
bbovenzi
bbovenzi reviewed Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx Outdated
bbovenzi
bbovenzi reviewed Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx
bbovenzi
bbovenzi reviewed Dec 4, 2025
View reviewed changes

@bbovenzibbovenzi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro

bbovenzi
bbovenzi approved these changes Dec 11, 2025
View reviewed changes

@bbovenzibbovenzi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!

@bbovenzi
bbovenzi merged commit 09350e3 into apache:mainDec 11, 2025
125 checks passed
@Zinkue
Zinkue deleted the add-theme-config branch December 12, 2025 21:03
@marcosmartinezfco

marcosmartinezfco commented Dec 15, 2025

Copy link
Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?

@pierrejeambrun

pierrejeambrun commented Dec 15, 2025

Copy link
Copy Markdown
Member

Amazing feature, is this expected to be released in version 3.2 or earlier?

This is a feature and will be in next minor release (3.2.0), we follow semver.

@marcosmartinezfco

marcosmartinezfco commented Dec 15, 2025

Copy link
Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?

This is a feature and will be in next minor release (3.2.0), we follow semver.

Sweet, thanks so much.

jhgoebbert pushed a commit to jhgoebbert/airflow_Owen-CH-Leung that referenced this pull request Feb 8, 2026
@Zinkue@jhgoebbert
Add theme config (apache#58411)
20c9a4f
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Subham-KRLX pushed a commit to Subham-KRLX/airflow that referenced this pull request Mar 4, 2026
@Zinkue@Subham-KRLX
Add theme config (apache#58411)
54557c0
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@ephraimbuddyephraimbuddyAwaiting requested review from ephraimbuddyephraimbuddy is a code owner
@rawwarrawwarAwaiting requested review from rawwarrawwar is a code owner
@jason810496jason810496Awaiting requested review from jason810496jason810496 is a code owner
@bugraoz93bugraoz93Awaiting requested review from bugraoz93bugraoz93 is a code owner

Assignees

No one assigned

Labels

area:APIAirflow's REST/HTTP APIarea:ConfigTemplatesarea:UIRelated to UI/UX. For Frontend Developers.kind:documentation

Projects

None yet

Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x

4 participants

@Zinkue@marcosmartinezfco@pierrejeambrun@bbovenzi
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Add theme config - #58411
Merged
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Dec 11, 2025
Merged
Add theme config#58411
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Conversation
@Zinkue
@ZinkueZinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

Contributor
closes: #53443

related: #56854
Enables the personalization of Chakra's UI theme via theme configuration property

Currently only the brand color palette can be customized.

Modifying the brand color palette you also modify the navbar/sidebar.
Provided a how-to-guide for customizing UI theme.
Screenshots
Input
green from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.982 0.018 155.826)" }, "100": { "value": "oklch(0.962 0.044 156.743)" }, "200": { "value": "oklch(0.925 0.084 155.995)" }, "300": { "value": "oklch(0.75 0.18 153.0)" }, "400": { "value": "oklch(0.625 0.209 150.0)" }, "500": { "value": "oklch(0.528 0.219 149.579)" }, "600": { "value": "oklch(0.47 0.20 149.0)" }, "700": { "value": "oklch(0.40 0.16 149.5)" }, "800": { "value": "oklch(0.448 0.119 151.328)" }, "900": { "value": "oklch(0.393 0.095 152.535)" }, "950": { "value": "oklch(0.266 0.065 152.934)" } } } }}'
Output
green
Input
yellow from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.987 0.026 102.212)" }, "100": { "value": "oklch(0.973 0.071 103.193)" }, "200": { "value": "oklch(0.945 0.129 101.54)" }, "300": { "value": "oklch(0.905 0.182 98.111)" }, "400": { "value": "oklch(0.852 0.199 91.936)" }, "500": { "value": "oklch(0.795 0.184 86.047)" }, "600": { "value": "oklch(0.681 0.162 75.834)" }, "700": { "value": "oklch(0.554 0.135 66.442)" }, "800": { "value": "oklch(0.476 0.114 61.907)" }, "900": { "value": "oklch(0.421 0.095 57.708)" }, "950": { "value": "oklch(0.286 0.066 53.813)" }, }, } }}'
Output
yellow
Input
red from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.971 0.013 17.38)" }, "100": { "value": "oklch(0.936 0.032 17.717)" }, "200": { "value": "oklch(0.885 0.062 18.334)" }, "300": { "value": "oklch(0.808 0.114 19.571)" }, "400": { "value": "oklch(0.704 0.191 22.216)" }, "500": { "value": "oklch(0.637 0.237 25.331)" }, "600": { "value": "oklch(0.577 0.245 27.325)" }, "700": { "value": "oklch(0.505 0.213 27.518)" }, "800": { "value": "oklch(0.444 0.177 26.899)" }, "900": { "value": "oklch(0.396 0.141 25.723)" }, "950": { "value": "oklch(0.258 0.092 26.042)" } } } }}'
Output
red
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:API
Airflow's REST/HTTP API
area:ConfigTemplates

area:UI
Related to UI/UX. For Frontend Developers.
kind:documentation

labels
Nov 17, 2025
@Zinkue
Zinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

ContributorAuthor
About the palette generator for us to make a suggestion.
I found this ones:
Played a little bit with them and both looks fine to me
@Zinkue
Zinkue
marked this pull request as ready for review
November 17, 2025 22:41
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
0946506 to
0c48e71CompareNovember 23, 2025 11:34
@Zinkue
Zinkue
commented
Nov 23, 2025

Copy link


Copy Markdown

ContributorAuthor
Link to previous discussion/PR: #56854
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
44c7a5b to
53d23c2CompareDecember 3, 2025 20:54
@bbovenzibbovenzi
added this to the Airflow 3.2.0 milestone
Dec 4, 2025
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro
bbovenzi
bbovenzi
approved these changes
Dec 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
@bbovenzi
bbovenzi
merged commit 09350e3
into
apache:mainDec 11, 2025

125 checks passed

@Zinkue
Zinkue
deleted the

add-theme-config

branch
December 12, 2025 21:03
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
@pierrejeambrun
pierrejeambrun
commented
Dec 15, 2025

Copy link


Copy Markdown

Member
Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
Sweet, thanks so much.
jhgoebbert pushed a commit
to jhgoebbert/airflow_Owen-CH-Leung
that referenced
this pull request
Feb 8, 2026
@Zinkue@jhgoebbert
Add theme config (apache#58411)
20c9a4f
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Subham-KRLX pushed a commit
to Subham-KRLX/airflow
that referenced
this pull request
Mar 4, 2026
@Zinkue@Subham-KRLX
Add theme config (apache#58411)
54557c0
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@ephraimbuddyephraimbuddyAwaiting requested review from ephraimbuddyephraimbuddy is a code owner
@rawwarrawwarAwaiting requested review from rawwarrawwar is a code owner
@jason810496jason810496Awaiting requested review from jason810496jason810496 is a code owner
@bugraoz93bugraoz93Awaiting requested review from bugraoz93bugraoz93 is a code owner

Assignees


No one assigned


Labels

area:APIAirflow's REST/HTTP APIarea:ConfigTemplatesarea:UIRelated to UI/UX. For Frontend Developers.kind:documentation

Projects


None yet


Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x


4 participants

@Zinkue@marcosmartinezfco@pierrejeambrun@bbovenzi

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add theme config - #58411
Merged
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Dec 11, 2025
Merged
Add theme config#58411
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Conversation
@Zinkue
@ZinkueZinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

Contributor
closes: #53443

related: #56854
Enables the personalization of Chakra's UI theme via theme configuration property

Currently only the brand color palette can be customized.

Modifying the brand color palette you also modify the navbar/sidebar.
Provided a how-to-guide for customizing UI theme.
Screenshots
Input
green from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.982 0.018 155.826)" }, "100": { "value": "oklch(0.962 0.044 156.743)" }, "200": { "value": "oklch(0.925 0.084 155.995)" }, "300": { "value": "oklch(0.75 0.18 153.0)" }, "400": { "value": "oklch(0.625 0.209 150.0)" }, "500": { "value": "oklch(0.528 0.219 149.579)" }, "600": { "value": "oklch(0.47 0.20 149.0)" }, "700": { "value": "oklch(0.40 0.16 149.5)" }, "800": { "value": "oklch(0.448 0.119 151.328)" }, "900": { "value": "oklch(0.393 0.095 152.535)" }, "950": { "value": "oklch(0.266 0.065 152.934)" } } } }}'
Output
green
Input
yellow from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.987 0.026 102.212)" }, "100": { "value": "oklch(0.973 0.071 103.193)" }, "200": { "value": "oklch(0.945 0.129 101.54)" }, "300": { "value": "oklch(0.905 0.182 98.111)" }, "400": { "value": "oklch(0.852 0.199 91.936)" }, "500": { "value": "oklch(0.795 0.184 86.047)" }, "600": { "value": "oklch(0.681 0.162 75.834)" }, "700": { "value": "oklch(0.554 0.135 66.442)" }, "800": { "value": "oklch(0.476 0.114 61.907)" }, "900": { "value": "oklch(0.421 0.095 57.708)" }, "950": { "value": "oklch(0.286 0.066 53.813)" }, }, } }}'
Output
yellow
Input
red from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.971 0.013 17.38)" }, "100": { "value": "oklch(0.936 0.032 17.717)" }, "200": { "value": "oklch(0.885 0.062 18.334)" }, "300": { "value": "oklch(0.808 0.114 19.571)" }, "400": { "value": "oklch(0.704 0.191 22.216)" }, "500": { "value": "oklch(0.637 0.237 25.331)" }, "600": { "value": "oklch(0.577 0.245 27.325)" }, "700": { "value": "oklch(0.505 0.213 27.518)" }, "800": { "value": "oklch(0.444 0.177 26.899)" }, "900": { "value": "oklch(0.396 0.141 25.723)" }, "950": { "value": "oklch(0.258 0.092 26.042)" } } } }}'
Output
red
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:API
Airflow's REST/HTTP API
area:ConfigTemplates

area:UI
Related to UI/UX. For Frontend Developers.
kind:documentation

labels
Nov 17, 2025
@Zinkue
Zinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

ContributorAuthor
About the palette generator for us to make a suggestion.
I found this ones:
Played a little bit with them and both looks fine to me
@Zinkue
Zinkue
marked this pull request as ready for review
November 17, 2025 22:41
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
0946506 to
0c48e71CompareNovember 23, 2025 11:34
@Zinkue
Zinkue
commented
Nov 23, 2025

Copy link


Copy Markdown

ContributorAuthor
Link to previous discussion/PR: #56854
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
44c7a5b to
53d23c2CompareDecember 3, 2025 20:54
@bbovenzibbovenzi
added this to the Airflow 3.2.0 milestone
Dec 4, 2025
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro
bbovenzi
bbovenzi
approved these changes
Dec 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
@bbovenzi
bbovenzi
merged commit 09350e3
into
apache:mainDec 11, 2025

125 checks passed

@Zinkue
Zinkue
deleted the

add-theme-config

branch
December 12, 2025 21:03
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
@pierrejeambrun
pierrejeambrun
commented
Dec 15, 2025

Copy link


Copy Markdown

Member
Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
Sweet, thanks so much.
jhgoebbert pushed a commit
to jhgoebbert/airflow_Owen-CH-Leung
that referenced
this pull request
Feb 8, 2026
@Zinkue@jhgoebbert
Add theme config (apache#58411)
20c9a4f
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Subham-KRLX pushed a commit
to Subham-KRLX/airflow
that referenced
this pull request
Mar 4, 2026
@Zinkue@Subham-KRLX
Add theme config (apache#58411)
54557c0
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@ephraimbuddyephraimbuddyAwaiting requested review from ephraimbuddyephraimbuddy is a code owner
@rawwarrawwarAwaiting requested review from rawwarrawwar is a code owner
@jason810496jason810496Awaiting requested review from jason810496jason810496 is a code owner
@bugraoz93bugraoz93Awaiting requested review from bugraoz93bugraoz93 is a code owner

Assignees


No one assigned


Labels

area:APIAirflow's REST/HTTP APIarea:ConfigTemplatesarea:UIRelated to UI/UX. For Frontend Developers.kind:documentation

Projects


None yet


Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x


4 participants

@Zinkue@marcosmartinezfco@pierrejeambrun@bbovenzi

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add theme config - #58411
Merged
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Dec 11, 2025
Merged
Add theme config#58411
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Conversation
@Zinkue
@ZinkueZinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

Contributor
closes: #53443

related: #56854
Enables the personalization of Chakra's UI theme via theme configuration property

Currently only the brand color palette can be customized.

Modifying the brand color palette you also modify the navbar/sidebar.
Provided a how-to-guide for customizing UI theme.
Screenshots
Input
green from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.982 0.018 155.826)" }, "100": { "value": "oklch(0.962 0.044 156.743)" }, "200": { "value": "oklch(0.925 0.084 155.995)" }, "300": { "value": "oklch(0.75 0.18 153.0)" }, "400": { "value": "oklch(0.625 0.209 150.0)" }, "500": { "value": "oklch(0.528 0.219 149.579)" }, "600": { "value": "oklch(0.47 0.20 149.0)" }, "700": { "value": "oklch(0.40 0.16 149.5)" }, "800": { "value": "oklch(0.448 0.119 151.328)" }, "900": { "value": "oklch(0.393 0.095 152.535)" }, "950": { "value": "oklch(0.266 0.065 152.934)" } } } }}'
Output
green
Input
yellow from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.987 0.026 102.212)" }, "100": { "value": "oklch(0.973 0.071 103.193)" }, "200": { "value": "oklch(0.945 0.129 101.54)" }, "300": { "value": "oklch(0.905 0.182 98.111)" }, "400": { "value": "oklch(0.852 0.199 91.936)" }, "500": { "value": "oklch(0.795 0.184 86.047)" }, "600": { "value": "oklch(0.681 0.162 75.834)" }, "700": { "value": "oklch(0.554 0.135 66.442)" }, "800": { "value": "oklch(0.476 0.114 61.907)" }, "900": { "value": "oklch(0.421 0.095 57.708)" }, "950": { "value": "oklch(0.286 0.066 53.813)" }, }, } }}'
Output
yellow
Input
red from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.971 0.013 17.38)" }, "100": { "value": "oklch(0.936 0.032 17.717)" }, "200": { "value": "oklch(0.885 0.062 18.334)" }, "300": { "value": "oklch(0.808 0.114 19.571)" }, "400": { "value": "oklch(0.704 0.191 22.216)" }, "500": { "value": "oklch(0.637 0.237 25.331)" }, "600": { "value": "oklch(0.577 0.245 27.325)" }, "700": { "value": "oklch(0.505 0.213 27.518)" }, "800": { "value": "oklch(0.444 0.177 26.899)" }, "900": { "value": "oklch(0.396 0.141 25.723)" }, "950": { "value": "oklch(0.258 0.092 26.042)" } } } }}'
Output
red
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:API
Airflow's REST/HTTP API
area:ConfigTemplates

area:UI
Related to UI/UX. For Frontend Developers.
kind:documentation

labels
Nov 17, 2025
@Zinkue
Zinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

ContributorAuthor
About the palette generator for us to make a suggestion.
I found this ones:
Played a little bit with them and both looks fine to me
@Zinkue
Zinkue
marked this pull request as ready for review
November 17, 2025 22:41
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
0946506 to
0c48e71CompareNovember 23, 2025 11:34
@Zinkue
Zinkue
commented
Nov 23, 2025

Copy link


Copy Markdown

ContributorAuthor
Link to previous discussion/PR: #56854
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
44c7a5b to
53d23c2CompareDecember 3, 2025 20:54
@bbovenzibbovenzi
added this to the Airflow 3.2.0 milestone
Dec 4, 2025
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro
bbovenzi
bbovenzi
approved these changes
Dec 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
@bbovenzi
bbovenzi
merged commit 09350e3
into
apache:mainDec 11, 2025

125 checks passed

@Zinkue
Zinkue
deleted the

add-theme-config

branch
December 12, 2025 21:03
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
@pierrejeambrun
pierrejeambrun
commented
Dec 15, 2025

Copy link


Copy Markdown

Member
Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
Sweet, thanks so much.
jhgoebbert pushed a commit
to jhgoebbert/airflow_Owen-CH-Leung
that referenced
this pull request
Feb 8, 2026
@Zinkue@jhgoebbert
Add theme config (apache#58411)
20c9a4f
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Subham-KRLX pushed a commit
to Subham-KRLX/airflow
that referenced
this pull request
Mar 4, 2026
@Zinkue@Subham-KRLX
Add theme config (apache#58411)
54557c0
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@ephraimbuddyephraimbuddyAwaiting requested review from ephraimbuddyephraimbuddy is a code owner
@rawwarrawwarAwaiting requested review from rawwarrawwar is a code owner
@jason810496jason810496Awaiting requested review from jason810496jason810496 is a code owner
@bugraoz93bugraoz93Awaiting requested review from bugraoz93bugraoz93 is a code owner

Assignees


No one assigned


Labels

area:APIAirflow's REST/HTTP APIarea:ConfigTemplatesarea:UIRelated to UI/UX. For Frontend Developers.kind:documentation

Projects


None yet


Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x


4 participants

@Zinkue@marcosmartinezfco@pierrejeambrun@bbovenzi

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Add theme config - #58411
Merged
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Dec 11, 2025
Merged
Add theme config#58411
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Conversation
@Zinkue
@ZinkueZinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

Contributor
closes: #53443

related: #56854
Enables the personalization of Chakra's UI theme via theme configuration property

Currently only the brand color palette can be customized.

Modifying the brand color palette you also modify the navbar/sidebar.
Provided a how-to-guide for customizing UI theme.
Screenshots
Input
green from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.982 0.018 155.826)" }, "100": { "value": "oklch(0.962 0.044 156.743)" }, "200": { "value": "oklch(0.925 0.084 155.995)" }, "300": { "value": "oklch(0.75 0.18 153.0)" }, "400": { "value": "oklch(0.625 0.209 150.0)" }, "500": { "value": "oklch(0.528 0.219 149.579)" }, "600": { "value": "oklch(0.47 0.20 149.0)" }, "700": { "value": "oklch(0.40 0.16 149.5)" }, "800": { "value": "oklch(0.448 0.119 151.328)" }, "900": { "value": "oklch(0.393 0.095 152.535)" }, "950": { "value": "oklch(0.266 0.065 152.934)" } } } }}'
Output
green
Input
yellow from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.987 0.026 102.212)" }, "100": { "value": "oklch(0.973 0.071 103.193)" }, "200": { "value": "oklch(0.945 0.129 101.54)" }, "300": { "value": "oklch(0.905 0.182 98.111)" }, "400": { "value": "oklch(0.852 0.199 91.936)" }, "500": { "value": "oklch(0.795 0.184 86.047)" }, "600": { "value": "oklch(0.681 0.162 75.834)" }, "700": { "value": "oklch(0.554 0.135 66.442)" }, "800": { "value": "oklch(0.476 0.114 61.907)" }, "900": { "value": "oklch(0.421 0.095 57.708)" }, "950": { "value": "oklch(0.286 0.066 53.813)" }, }, } }}'
Output
yellow
Input
red from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.971 0.013 17.38)" }, "100": { "value": "oklch(0.936 0.032 17.717)" }, "200": { "value": "oklch(0.885 0.062 18.334)" }, "300": { "value": "oklch(0.808 0.114 19.571)" }, "400": { "value": "oklch(0.704 0.191 22.216)" }, "500": { "value": "oklch(0.637 0.237 25.331)" }, "600": { "value": "oklch(0.577 0.245 27.325)" }, "700": { "value": "oklch(0.505 0.213 27.518)" }, "800": { "value": "oklch(0.444 0.177 26.899)" }, "900": { "value": "oklch(0.396 0.141 25.723)" }, "950": { "value": "oklch(0.258 0.092 26.042)" } } } }}'
Output
red
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:API
Airflow's REST/HTTP API
area:ConfigTemplates

area:UI
Related to UI/UX. For Frontend Developers.
kind:documentation

labels
Nov 17, 2025
@Zinkue
Zinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

ContributorAuthor
About the palette generator for us to make a suggestion.
I found this ones:
Played a little bit with them and both looks fine to me
@Zinkue
Zinkue
marked this pull request as ready for review
November 17, 2025 22:41
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
0946506 to
0c48e71CompareNovember 23, 2025 11:34
@Zinkue
Zinkue
commented
Nov 23, 2025

Copy link


Copy Markdown

ContributorAuthor
Link to previous discussion/PR: #56854
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
44c7a5b to
53d23c2CompareDecember 3, 2025 20:54
@bbovenzibbovenzi
added this to the Airflow 3.2.0 milestone
Dec 4, 2025
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro
bbovenzi
bbovenzi
approved these changes
Dec 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
@bbovenzi
bbovenzi
merged commit 09350e3
into
apache:mainDec 11, 2025

125 checks passed

@Zinkue
Zinkue
deleted the

add-theme-config

branch
December 12, 2025 21:03
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
@pierrejeambrun
pierrejeambrun
commented
Dec 15, 2025

Copy link


Copy Markdown

Member
Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
Sweet, thanks so much.
jhgoebbert pushed a commit
to jhgoebbert/airflow_Owen-CH-Leung
that referenced
this pull request
Feb 8, 2026
@Zinkue@jhgoebbert
Add theme config (apache#58411)
20c9a4f
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Subham-KRLX pushed a commit
to Subham-KRLX/airflow
that referenced
this pull request
Mar 4, 2026
@Zinkue@Subham-KRLX
Add theme config (apache#58411)
54557c0
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@ephraimbuddyephraimbuddyAwaiting requested review from ephraimbuddyephraimbuddy is a code owner
@rawwarrawwarAwaiting requested review from rawwarrawwar is a code owner
@jason810496jason810496Awaiting requested review from jason810496jason810496 is a code owner
@bugraoz93bugraoz93Awaiting requested review from bugraoz93bugraoz93 is a code owner

Assignees


No one assigned


Labels

area:APIAirflow's REST/HTTP APIarea:ConfigTemplatesarea:UIRelated to UI/UX. For Frontend Developers.kind:documentation

Projects


None yet


Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x


4 participants

@Zinkue@marcosmartinezfco@pierrejeambrun@bbovenzi

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add theme config - #58411
Merged
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Dec 11, 2025
Merged
Add theme config#58411
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Conversation
@Zinkue
@ZinkueZinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

Contributor
closes: #53443

related: #56854
Enables the personalization of Chakra's UI theme via theme configuration property

Currently only the brand color palette can be customized.

Modifying the brand color palette you also modify the navbar/sidebar.
Provided a how-to-guide for customizing UI theme.
Screenshots
Input
green from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.982 0.018 155.826)" }, "100": { "value": "oklch(0.962 0.044 156.743)" }, "200": { "value": "oklch(0.925 0.084 155.995)" }, "300": { "value": "oklch(0.75 0.18 153.0)" }, "400": { "value": "oklch(0.625 0.209 150.0)" }, "500": { "value": "oklch(0.528 0.219 149.579)" }, "600": { "value": "oklch(0.47 0.20 149.0)" }, "700": { "value": "oklch(0.40 0.16 149.5)" }, "800": { "value": "oklch(0.448 0.119 151.328)" }, "900": { "value": "oklch(0.393 0.095 152.535)" }, "950": { "value": "oklch(0.266 0.065 152.934)" } } } }}'
Output
green
Input
yellow from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.987 0.026 102.212)" }, "100": { "value": "oklch(0.973 0.071 103.193)" }, "200": { "value": "oklch(0.945 0.129 101.54)" }, "300": { "value": "oklch(0.905 0.182 98.111)" }, "400": { "value": "oklch(0.852 0.199 91.936)" }, "500": { "value": "oklch(0.795 0.184 86.047)" }, "600": { "value": "oklch(0.681 0.162 75.834)" }, "700": { "value": "oklch(0.554 0.135 66.442)" }, "800": { "value": "oklch(0.476 0.114 61.907)" }, "900": { "value": "oklch(0.421 0.095 57.708)" }, "950": { "value": "oklch(0.286 0.066 53.813)" }, }, } }}'
Output
yellow
Input
red from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.971 0.013 17.38)" }, "100": { "value": "oklch(0.936 0.032 17.717)" }, "200": { "value": "oklch(0.885 0.062 18.334)" }, "300": { "value": "oklch(0.808 0.114 19.571)" }, "400": { "value": "oklch(0.704 0.191 22.216)" }, "500": { "value": "oklch(0.637 0.237 25.331)" }, "600": { "value": "oklch(0.577 0.245 27.325)" }, "700": { "value": "oklch(0.505 0.213 27.518)" }, "800": { "value": "oklch(0.444 0.177 26.899)" }, "900": { "value": "oklch(0.396 0.141 25.723)" }, "950": { "value": "oklch(0.258 0.092 26.042)" } } } }}'
Output
red
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:API
Airflow's REST/HTTP API
area:ConfigTemplates

area:UI
Related to UI/UX. For Frontend Developers.
kind:documentation

labels
Nov 17, 2025
@Zinkue
Zinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

ContributorAuthor
About the palette generator for us to make a suggestion.
I found this ones:
Played a little bit with them and both looks fine to me
@Zinkue
Zinkue
marked this pull request as ready for review
November 17, 2025 22:41
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
0946506 to
0c48e71CompareNovember 23, 2025 11:34
@Zinkue
Zinkue
commented
Nov 23, 2025

Copy link


Copy Markdown

ContributorAuthor
Link to previous discussion/PR: #56854
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
44c7a5b to
53d23c2CompareDecember 3, 2025 20:54
@bbovenzibbovenzi
added this to the Airflow 3.2.0 milestone
Dec 4, 2025
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro
bbovenzi
bbovenzi
approved these changes
Dec 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
@bbovenzi
bbovenzi
merged commit 09350e3
into
apache:mainDec 11, 2025

125 checks passed

@Zinkue
Zinkue
deleted the

add-theme-config

branch
December 12, 2025 21:03
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
@pierrejeambrun
pierrejeambrun
commented
Dec 15, 2025

Copy link


Copy Markdown

Member
Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
Sweet, thanks so much.
jhgoebbert pushed a commit
to jhgoebbert/airflow_Owen-CH-Leung
that referenced
this pull request
Feb 8, 2026
@Zinkue@jhgoebbert
Add theme config (apache#58411)
20c9a4f
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Subham-KRLX pushed a commit
to Subham-KRLX/airflow
that referenced
this pull request
Mar 4, 2026
@Zinkue@Subham-KRLX
Add theme config (apache#58411)
54557c0
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@ephraimbuddyephraimbuddyAwaiting requested review from ephraimbuddyephraimbuddy is a code owner
@rawwarrawwarAwaiting requested review from rawwarrawwar is a code owner
@jason810496jason810496Awaiting requested review from jason810496jason810496 is a code owner
@bugraoz93bugraoz93Awaiting requested review from bugraoz93bugraoz93 is a code owner

Assignees


No one assigned


Labels

area:APIAirflow's REST/HTTP APIarea:ConfigTemplatesarea:UIRelated to UI/UX. For Frontend Developers.kind:documentation

Projects


None yet


Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x


4 participants

@Zinkue@marcosmartinezfco@pierrejeambrun@bbovenzi

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add theme config - #58411
Merged
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Dec 11, 2025
Merged
Add theme config#58411
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Conversation
@Zinkue
@ZinkueZinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

Contributor
closes: #53443

related: #56854
Enables the personalization of Chakra's UI theme via theme configuration property

Currently only the brand color palette can be customized.

Modifying the brand color palette you also modify the navbar/sidebar.
Provided a how-to-guide for customizing UI theme.
Screenshots
Input
green from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.982 0.018 155.826)" }, "100": { "value": "oklch(0.962 0.044 156.743)" }, "200": { "value": "oklch(0.925 0.084 155.995)" }, "300": { "value": "oklch(0.75 0.18 153.0)" }, "400": { "value": "oklch(0.625 0.209 150.0)" }, "500": { "value": "oklch(0.528 0.219 149.579)" }, "600": { "value": "oklch(0.47 0.20 149.0)" }, "700": { "value": "oklch(0.40 0.16 149.5)" }, "800": { "value": "oklch(0.448 0.119 151.328)" }, "900": { "value": "oklch(0.393 0.095 152.535)" }, "950": { "value": "oklch(0.266 0.065 152.934)" } } } }}'
Output
green
Input
yellow from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.987 0.026 102.212)" }, "100": { "value": "oklch(0.973 0.071 103.193)" }, "200": { "value": "oklch(0.945 0.129 101.54)" }, "300": { "value": "oklch(0.905 0.182 98.111)" }, "400": { "value": "oklch(0.852 0.199 91.936)" }, "500": { "value": "oklch(0.795 0.184 86.047)" }, "600": { "value": "oklch(0.681 0.162 75.834)" }, "700": { "value": "oklch(0.554 0.135 66.442)" }, "800": { "value": "oklch(0.476 0.114 61.907)" }, "900": { "value": "oklch(0.421 0.095 57.708)" }, "950": { "value": "oklch(0.286 0.066 53.813)" }, }, } }}'
Output
yellow
Input
red from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.971 0.013 17.38)" }, "100": { "value": "oklch(0.936 0.032 17.717)" }, "200": { "value": "oklch(0.885 0.062 18.334)" }, "300": { "value": "oklch(0.808 0.114 19.571)" }, "400": { "value": "oklch(0.704 0.191 22.216)" }, "500": { "value": "oklch(0.637 0.237 25.331)" }, "600": { "value": "oklch(0.577 0.245 27.325)" }, "700": { "value": "oklch(0.505 0.213 27.518)" }, "800": { "value": "oklch(0.444 0.177 26.899)" }, "900": { "value": "oklch(0.396 0.141 25.723)" }, "950": { "value": "oklch(0.258 0.092 26.042)" } } } }}'
Output
red
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:API
Airflow's REST/HTTP API
area:ConfigTemplates

area:UI
Related to UI/UX. For Frontend Developers.
kind:documentation

labels
Nov 17, 2025
@Zinkue
Zinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

ContributorAuthor
About the palette generator for us to make a suggestion.
I found this ones:
Played a little bit with them and both looks fine to me
@Zinkue
Zinkue
marked this pull request as ready for review
November 17, 2025 22:41
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
0946506 to
0c48e71CompareNovember 23, 2025 11:34
@Zinkue
Zinkue
commented
Nov 23, 2025

Copy link


Copy Markdown

ContributorAuthor
Link to previous discussion/PR: #56854
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
44c7a5b to
53d23c2CompareDecember 3, 2025 20:54
@bbovenzibbovenzi
added this to the Airflow 3.2.0 milestone
Dec 4, 2025
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro
bbovenzi
bbovenzi
approved these changes
Dec 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
@bbovenzi
bbovenzi
merged commit 09350e3
into
apache:mainDec 11, 2025

125 checks passed

@Zinkue
Zinkue
deleted the

add-theme-config

branch
December 12, 2025 21:03
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
@pierrejeambrun
pierrejeambrun
commented
Dec 15, 2025

Copy link


Copy Markdown

Member
Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
Sweet, thanks so much.
jhgoebbert pushed a commit
to jhgoebbert/airflow_Owen-CH-Leung
that referenced
this pull request
Feb 8, 2026
@Zinkue@jhgoebbert
Add theme config (apache#58411)
20c9a4f
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Subham-KRLX pushed a commit
to Subham-KRLX/airflow
that referenced
this pull request
Mar 4, 2026
@Zinkue@Subham-KRLX
Add theme config (apache#58411)
54557c0
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@ephraimbuddyephraimbuddyAwaiting requested review from ephraimbuddyephraimbuddy is a code owner
@rawwarrawwarAwaiting requested review from rawwarrawwar is a code owner
@jason810496jason810496Awaiting requested review from jason810496jason810496 is a code owner
@bugraoz93bugraoz93Awaiting requested review from bugraoz93bugraoz93 is a code owner

Assignees


No one assigned


Labels

area:APIAirflow's REST/HTTP APIarea:ConfigTemplatesarea:UIRelated to UI/UX. For Frontend Developers.kind:documentation

Projects


None yet


Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x


4 participants

@Zinkue@marcosmartinezfco@pierrejeambrun@bbovenzi

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Add theme config - #58411
Merged
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Dec 11, 2025
Merged
Add theme config#58411
bbovenzi merged 8 commits into
apache:mainfrom 
Zinkue:add-theme-config
Conversation
@Zinkue
@ZinkueZinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

Contributor
closes: #53443

related: #56854
Enables the personalization of Chakra's UI theme via theme configuration property

Currently only the brand color palette can be customized.

Modifying the brand color palette you also modify the navbar/sidebar.
Provided a how-to-guide for customizing UI theme.
Screenshots
Input
green from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.982 0.018 155.826)" }, "100": { "value": "oklch(0.962 0.044 156.743)" }, "200": { "value": "oklch(0.925 0.084 155.995)" }, "300": { "value": "oklch(0.75 0.18 153.0)" }, "400": { "value": "oklch(0.625 0.209 150.0)" }, "500": { "value": "oklch(0.528 0.219 149.579)" }, "600": { "value": "oklch(0.47 0.20 149.0)" }, "700": { "value": "oklch(0.40 0.16 149.5)" }, "800": { "value": "oklch(0.448 0.119 151.328)" }, "900": { "value": "oklch(0.393 0.095 152.535)" }, "950": { "value": "oklch(0.266 0.065 152.934)" } } } }}'
Output
green
Input
yellow from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.987 0.026 102.212)" }, "100": { "value": "oklch(0.973 0.071 103.193)" }, "200": { "value": "oklch(0.945 0.129 101.54)" }, "300": { "value": "oklch(0.905 0.182 98.111)" }, "400": { "value": "oklch(0.852 0.199 91.936)" }, "500": { "value": "oklch(0.795 0.184 86.047)" }, "600": { "value": "oklch(0.681 0.162 75.834)" }, "700": { "value": "oklch(0.554 0.135 66.442)" }, "800": { "value": "oklch(0.476 0.114 61.907)" }, "900": { "value": "oklch(0.421 0.095 57.708)" }, "950": { "value": "oklch(0.286 0.066 53.813)" }, }, } }}'
Output
yellow
Input
red from theme.ts
AIRFLOW__API__THEME='{ "tokens": { "colors": { "brand": { "50": { "value": "oklch(0.971 0.013 17.38)" }, "100": { "value": "oklch(0.936 0.032 17.717)" }, "200": { "value": "oklch(0.885 0.062 18.334)" }, "300": { "value": "oklch(0.808 0.114 19.571)" }, "400": { "value": "oklch(0.704 0.191 22.216)" }, "500": { "value": "oklch(0.637 0.237 25.331)" }, "600": { "value": "oklch(0.577 0.245 27.325)" }, "700": { "value": "oklch(0.505 0.213 27.518)" }, "800": { "value": "oklch(0.444 0.177 26.899)" }, "900": { "value": "oklch(0.396 0.141 25.723)" }, "950": { "value": "oklch(0.258 0.092 26.042)" } } } }}'
Output
red
^ Add meaningful description above

Read the Pull Request Guidelines for more information.

In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.

In case of a new dependency, check compliance with the ASF 3rd Party License Policy.

In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.
@boring-cyborgboring-cyborgBot
added

area:API
Airflow's REST/HTTP API
area:ConfigTemplates

area:UI
Related to UI/UX. For Frontend Developers.
kind:documentation

labels
Nov 17, 2025
@Zinkue
Zinkue
commented
Nov 17, 2025

Copy link


Copy Markdown

ContributorAuthor
About the palette generator for us to make a suggestion.
I found this ones:
Played a little bit with them and both looks fine to me
@Zinkue
Zinkue
marked this pull request as ready for review
November 17, 2025 22:41
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
0946506 to
0c48e71CompareNovember 23, 2025 11:34
@Zinkue
Zinkue
commented
Nov 23, 2025

Copy link


Copy Markdown

ContributorAuthor
Link to previous discussion/PR: #56854
@Zinkue
Zinkueforce-pushed
the
add-theme-config
branch
2 times, most recently
from
44c7a5b to
53d23c2CompareDecember 3, 2025 20:54
@bbovenzibbovenzi
added this to the Airflow 3.2.0 milestone
Dec 4, 2025
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogHeader.tsx
Outdated

bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
Comment threadairflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx
bbovenzi
bbovenzi
reviewed
Dec 4, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro
bbovenzi
bbovenzi
approved these changes
Dec 11, 2025
View reviewed changes
@bbovenzibbovenzi
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!
@bbovenzi
bbovenzi
merged commit 09350e3
into
apache:mainDec 11, 2025

125 checks passed

@Zinkue
Zinkue
deleted the

add-theme-config

branch
December 12, 2025 21:03
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
@pierrejeambrun
pierrejeambrun
commented
Dec 15, 2025

Copy link


Copy Markdown

Member
Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
@marcosmartinezfco
marcosmartinezfco
commented
Dec 15, 2025

Copy link


Copy Markdown

Amazing feature, is this expected to be released in version 3.2 or earlier?
This is a feature and will be in next minor release (3.2.0), we follow semver.
Sweet, thanks so much.
jhgoebbert pushed a commit
to jhgoebbert/airflow_Owen-CH-Leung
that referenced
this pull request
Feb 8, 2026
@Zinkue@jhgoebbert
Add theme config (apache#58411)
20c9a4f
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Subham-KRLX pushed a commit
to Subham-KRLX/airflow
that referenced
this pull request
Mar 4, 2026
@Zinkue@Subham-KRLX
Add theme config (apache#58411)
54557c0
* Add theme config property
* Add custom theme to Chakra UI's theme
* Add Oklch type and unit tests
* Add UI documentation
* Fix CI test_config
* Fix Oklch regex
* Move ChakraCustomProvider.tsx
* Create defaultSystem
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@bbovenzibbovenzibbovenzi approved these changes
@pierrejeambrunpierrejeambrunAwaiting requested review from pierrejeambrunpierrejeambrun is a code owner
@ryanahamiltonryanahamiltonAwaiting requested review from ryanahamiltonryanahamilton is a code owner
@shubhamraj-gitshubhamraj-gitAwaiting requested review from shubhamraj-gitshubhamraj-git is a code owner
@guan404mingguan404mingAwaiting requested review from guan404mingguan404ming is a code owner
@ephraimbuddyephraimbuddyAwaiting requested review from ephraimbuddyephraimbuddy is a code owner
@rawwarrawwarAwaiting requested review from rawwarrawwar is a code owner
@jason810496jason810496Awaiting requested review from jason810496jason810496 is a code owner
@bugraoz93bugraoz93Awaiting requested review from bugraoz93bugraoz93 is a code owner

Assignees


No one assigned


Labels

area:APIAirflow's REST/HTTP APIarea:ConfigTemplatesarea:UIRelated to UI/UX. For Frontend Developers.kind:documentation

Projects


None yet


Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x


4 participants

@Zinkue@marcosmartinezfco@pierrejeambrun@bbovenzi