Skip to content

feat(TabBar): add Ionic theme customization#31081

Merged
joselrio merged 3 commits intonextfrom
ROU-12699
Apr 15, 2026
Merged

feat(TabBar): add Ionic theme customization#31081
joselrio merged 3 commits intonextfrom
ROU-12699

Conversation

@joselrio
Copy link
Copy Markdown
Contributor

@joselrio joselrio commented Apr 14, 2026

Issue number: internal


This pull request adds support for a translucent tab bar style in the Ionic tab bar component for Ionic theme by introducing new SCSS variables and styles. The main changes include defining variables for the translucent background and filter, and updating the component's SCSS to apply these styles when the tab-bar-translucent class is present.

Translucent Tab Bar Support:

  • Added tab-bar.ionic.vars.scss with new SCSS variables for the translucent tab bar background color, alpha, and blur filter.
  • Updated tab-bar.ionic.scss to import the new variables and apply translucent styles using the tab-bar-translucent class and backdrop-filter support. [1] [2]

What is the current behavior?

Translucent style was only applied to Ios theme.

What is the new behavior?

These changes enable the tab bar to have a blurred, semi-transparent background when the tab-bar-translucent class is used, improving visual appeal and consistency with modern UI trends.

Does this introduce a breaking change?

  • Yes
  • No

@joselrio joselrio requested a review from a team as a code owner April 14, 2026 15:18
@joselrio joselrio requested a review from thetaPC April 14, 2026 15:18
@github-actions github-actions bot added the package: core @ionic/core package label Apr 14, 2026
@joselrio joselrio added type: feature request a new feature, enhancement, or improvement and removed package: core @ionic/core package labels Apr 14, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Apr 15, 2026 10:22am

Request Review

@joselrio joselrio changed the title feat(TabBar): Adding Ionic Theme customization feat(TabBar): add Ionic theme customization Apr 14, 2026
@joselrio joselrio merged commit 37dbb80 into next Apr 15, 2026
49 checks passed
@joselrio joselrio deleted the ROU-12699 branch April 15, 2026 10:43
@thetaPC
Copy link
Copy Markdown
Contributor

thetaPC commented Apr 15, 2026

@joselrio @BenOsodrac Moving forward, please make sure the PR titles follow the standard set for Ionic. The scopes should be in skewer-case. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package type: feature request a new feature, enhancement, or improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants