![]() Stepped Color Generator Ĭreate a custom background and text color theme for your app. The full list of stepped colors is shown in the generator below. It is important to update the stepped colors when updating the background or text color of an application.īy default, the Ionic stepped colors start at the default background color value #ffffff and mix with the text color value #000000 using an increasing percentage. We use stepped colors in order to define these slight variations. Meanwhile, the loading component background is a shade darker than white, using #f2f2f2. For example, an item heading text may need to be #404040, which is a few shades lighter than our default text color. In some components we use a shade darker than the background or lighter than the text. This will be more apparent when applying a darker theme. ![]() While updating the background ( -ion-background-color) and text ( -ion-text-color) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. To accommodate this pattern, we created stepped colors. In order to imply importance and depth throughout the design, we need to use different shades of the background and text colors. Background color of the entire app, rgb formatĬolor of the Segment Buttons in the ToolbarĬolor of the checked Segment Buttons in the Toolbarīackground of the Segment Buttons in the ToolbarĬolor of the Segment Button indicator in the ToolbarĪfter exploring different ways to customize the Ionic theme, we found that we couldn't use just one background or text color.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |