Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://ionicframework.com/docs/theming/css-variables below:

CSS Variables | CSS Custom Properties for Variables & Components

Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.

CSS variables can be set globally in an application in the :root selector. They can also be applied only for a specific mode. See Ionic Variables for more information on the global variables Ionic provides.

When using the Ionic CLI to start an Angular, React or Vue project, the src/theme/variables.scss file is created where you can override the default Ionic Variables.

:root {
  
  --ion-background-color: #ff3700;

  
  --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
}


:root.ios {
  --ion-text-color: #000;
}


:root.md {
  --ion-text-color: #222;
}

To set a CSS variable for a specific component, add the variable inside of its selector. See Ionic Variables for more information on the component-level variables Ionic provides.

ion-button {
  --color: #222;
}


.fancy-button {
  --background: #00ff00;
}

CSS variables can also be changed via JavaScript using setProperty():

const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');

The var() CSS function can be used to get the value of a CSS variable, along with any number of fallback values, if desired. In the below example, the --background property will be set to the value of the --charcoal variable, if defined, and if not it will use #36454f.

.fancy-button {
  --background: var(--charcoal, #36454f);
}

The value of a CSS variable can be read in JavaScript using getPropertyValue():

const el = document.querySelector('.fancy-button');
const color = el.style.getPropertyValue('--background');

Ionic provides variables that exist at the component level, such as --background and --color. For a list of the custom properties a component accepts, view the CSS Custom Properties section of its API reference. For example, see the Button CSS Custom Properties.

There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see Colors, Themes and Advanced Theming.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4