[Ionic v4.0.0-beta.3] Application Colors with Var

[matthew-valenti]

Bug Report

Ionic Info

Ionic:
   ionic (Ionic CLI)          : 4.1.0 (C:\Users\matth\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

System:
   NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

Describe the Bug Application color variables do NOT work with var e.g. var(--ion-tabbar-background-color); Layered color variables do work with var e.g. background-color: var(--ion-color-light);

It's unclear if this is a bug or expected behavior. But it would be nice to be able to use application variables in this way.

Application color variables are documented here: https://beta.ionicframework.com/docs/theming/advanced/#color-language

--ion-backdrop-color
--ion-overlay-background-color
--ion-background-color
--ion-border-color
--ion-box-shadow-color
--ion-text-color
--ion-tabbar-background-color
--ion-tabbar-border-color
--ion-tabbar-text-color
--ion-tabbar-text-color-active
--ion-toolbar-background-color
--ion-toolbar-border-color
--ion-toolbar-color-active
--ion-toolbar-color-inactive
--ion-toolbar-text-color
--ion-item-background-color
--ion-item-background-color-active
--ion-item-border-color
--ion-item-text-color
--ion-placeholder-text-color

Steps to Reproduce Steps to reproduce the behavior:

1. Create a new Ionic 4 blank project.
2. Add the following to the bottom of /src/theme/variables.scss:

   ion-content {
   background-color: var(--ion-tabbar-background-color);
   }

3. Background color does not change.

Expected Behavior In example, above ion-content background displays as gray i.e. value of variable --ion-tabbar-background-color

[brandyscarney]

The variables documented there are used to override the Ionic components. They are not available as CSS variables to use internally unless you set them. This is done on purpose because we have defaults set per mode for some of these global variables and we want those defaults to be used unless the global variables are set by the user. If you wanted to set them in your app and use them you would need to do so like:

:root {
  --ion-tabbar-background-color:        grey;
}

ion-content {
    background-color: var(--ion-tabbar-background-color);
}

The reason layered colors work is because they are defined in the starters to make it easier to change them and use throughout the app: https://github.com/ionic-team/starters/blob/master/angular/base/src/theme/variables.scss#L7

I will keep this issue open though to discuss with the team if we want to provide the application variables the same way though. Thank you!

[brandyscarney]

@ionic-team/framework We should discuss this.

[brandyscarney]

I discussed this with @manucorporat and we decided it would be helpful if we could provide some themes in the starters that could be changed, for example this could be commented out:

// uncomment to import default theme
// @import “./theme/default.css”;

and that could contain something like the following:

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

.ios {
  --ion-border-color: #dedede;
  ...
}

.md {
  --ion-border-color: #c1c4cd;
  ...
}

We could also have a dark theme made available, or do something like this:

/* Light mode */
@import "./theme/default.css";

/* Dark mode */
@media (prefers-color-scheme: dark) {
  @import "./theme/dark.css";
}

I'm going to move this issue to the backlog as something to keep in mind, but the workaround exists to set the variables in your app, like so: https://raw.githubusercontent.com/ionic-team/ionic/master/core/src/themes/test/css-variables/css/oceanic.css

``` :root { --ion-backdrop-color: #1b2b34; --ion-overlay-background-color: #142129; --ion-background-color: #1b2b34; --ion-background-color-rgb: 27,43,52; --ion-background-color-step-50: #26363e; --ion-background-color-step-100: #324048; --ion-background-color-step-150: #3d4b52; --ion-background-color-step-200: #49555d; --ion-background-color-step-250: #546067; --ion-background-color-step-300: #5f6b71; --ion-background-color-step-350: #6b757b; --ion-background-color-step-400: #768085; --ion-background-color-step-450: #828a8f; --ion-background-color-step-500: #8d959a; --ion-background-color-step-550: #98a0a4; --ion-background-color-step-600: #a4aaae; --ion-background-color-step-650: #afb5b8; --ion-background-color-step-700: #bbbfc2; --ion-background-color-step-750: #c6cacc; --ion-background-color-step-800: #d1d5d6; --ion-background-color-step-850: #dddfe1; --ion-background-color-step-900: #e8eaeb; --ion-background-color-step-950: #f4f4f5; --ion-background-color-step-1000: #fff; --ion-border-color: #1b2b34; --ion-box-shadow-color: #000; --ion-text-color: #fff; --ion-text-color-rgb: 255,255,255; --ion-text-color-step-50: #f4f4f5; --ion-text-color-step-100: #e8eaeb; --ion-text-color-step-150: #dddfe1; --ion-text-color-step-200: #d1d5d6; --ion-text-color-step-250: #c6cacc; --ion-text-color-step-300: #bbbfc2; --ion-text-color-step-350: #afb5b8; --ion-text-color-step-400: #a4aaae; --ion-text-color-step-450: #98a0a4; --ion-text-color-step-500: #8d959a; --ion-text-color-step-550: #828a8f; --ion-text-color-step-600: #768085; --ion-text-color-step-650: #6b757b; --ion-text-color-step-700: #5f6b71; --ion-text-color-step-750: #546067; --ion-text-color-step-800: #49555d; --ion-text-color-step-850: #3d4b52; --ion-text-color-step-900: #324048; --ion-text-color-step-950: #26363e; --ion-text-color-step-1000: #1b2b34; --ion-tab-bar-background: #343d46; --ion-tab-bar-background-focused: #293039; --ion-tab-bar-color: #a7adba; --ion-tab-bar-color-activated: #549ee7; --ion-toolbar-background: #343d46; --ion-toolbar-color: #a7adba; --ion-toolbar-color-activated: var(--ion-color-primary); --ion-item-background: #343d46; --ion-item-background-activated: #232b34; } ```

[paulstelzer]

@brandyscarney About a dark mode. Is my current appreach correct?

:root {
  .dark-mode {
    --ion-background-color: #000;
    --ion-text-color: #fff;
    --ion-text-color-rgb: 255, 255, 255;
  }
}

[liamdebeasi]

Hi everyone,

With the upcoming Ionic 8 release we will be providing built-in themes for developers to import as suggested in https://github.com/ionic-team/ionic-framework/issues/15229#issuecomment-438740563. Developers will be able to use the global application vars to override these themes. I am going to close this, but let me know if there are any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.