I know about css of course in variables.scss and other places - just can’t find anything on centrally changing all buttons of my app to default fill=“outline” without search+replace all the code… Is it possible?
Using ionic 5+capacitor 2 going on 3 +angular and that rocks very much
If it is just buttons that you wish to change then you can leverage the fill=outline property of the buttons if the buttons are 100% in width then maybe be also use expand=block
Here is the link for other properties of the Ion-button that you can use LINK
Example codes
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button shape="round" fill="outline">Outline + Round</ion-button>
Edit 1- Some Additonal Info
You do no need to tweak of touch the core css that comes with ionic… if you wish to add you own custom style then maybe you can create a new file in theme folder and add it to you main.js[main.ts] file
Also, all the ion-component expose many customizable proerties that can be used to style and various css-properties that can be targeted from inside the css/scss files.
Inorder to know what option/properties/css-properties you can use follow the documentation for each component.
Yes, I know, but can I somehow set somewhere that “I want ALL my buttons in this app to become this:”
<ion-button fill="outline">…
by just writing this?:
<ion-button>…
Kind of like “css for ion-button params” (or any other tag, for that matter)
Maybe then create a new file that contains your CSS code for the button and import it inside of your main.js file
But this way you will face a bigger and larger challenge of shadow-root.
if you are using a button inside of other components say for example ion-buttons then you will need to expose/leak the ion-button CSS using :part() from the Ion-buttons
Also, imagine if the buttons are nested 2-3 level down for some reason, so apart from ion-buttons the button are also nested inside of several other components such as cards>card-content OR cards>card-footer OR ion-list>ion-items, etc then you will need to expose the same CSS code again and again for all such edge cases…
I may be wrong as so far I have only worked and styled local components and only a few handfuls of the core CSS are coming from a theme file but what I found so far is that I always encounter the shadow-root no matter if I have the style scoped or come from an scss file…
I should stick to the solution i mentioned in my prev comment.