variables would be useful

[mmikeyy]

It would be useful to include in the download a scss or sass file with the variables used in the standard themes set to the replacement values chosen in the theme builder. I already import the theme variables in component sass files. Now that the theme builder is only producing a css file, the components are no longer following. It makes the theme builder a simple to use tool only for the most basic applications.

[rdlauer]

Yeah that makes perfect sense. I'll need to look more closely at how the core theme uses SASS/SCSS, but this shouldn't be too difficult to implement. If you have an example that might help the process too.

[mmikeyy]

Here's an example.

I use the dark theme. This theme defines these variables as overrides for the std theme:
`
// Core variables
@import '../../variables';
/**

• Dark variable overrides
  **/
  // Colors
  $background: #303030;
  $primary: #fff;
  $secondary: darken($primary, 30%);
  $disabled: darken($primary, 50%);
  $accent: $sky;
  // ActionBar
  $ab-background: $background;
  $ab-color: $primary;
  // Headings
  $headings-color: $primary;
  // SideDrawer
  $item-color-android : #a0a0a0;
  $item-active-background: #2b2b2b;
  $item-active-color: $accent;
  $item-active-icon-color: #fff;
  $item-color-ios: #848484;
  $image-background: #e0e0e0;
  $side-drawer-header-background: $accent;
  $side-drawer-header-brand: #fff;
  $side-drawer-background: #303030;

`

I have my own variables.sass file that defines values that use the theme as a starting point (by importing variables from theme):
`
// here I import theme variables, which are all std theme variables plus dark theme overrides
@import '~nativescript-theme-core/scss/skins/dark/_variables.scss'

$contrastBackground1: lighten($background, 15%) // here I define values relative to theme
$contrastBackground2: lighten($background, 50%) // here too... etc etc
$contrastBackground3: lighten($background, 75%)
// titlebar for event
$evTitleBackground: $contrastBackground2
$evTitleColor: $background
// menu under titlebar
$evMenuBackground: darken($evTitleBackground, 10%)
$evMenucolor: darken($evTitleColor, 10%)
// event body
$evBodyBackground: $contrastBackground3
$evBodyColor: $background
In my app.sass, I can define classes that make use of the values defined by just importing the theme variables and my personal variables making use of them (variables.sass) at the beginning:
@import '~nativescript-theme-core/scss/skins/dark/_index.scss' // theme values
@import './variables.sass' // my values, which use the theme values
`
The same @import statements can be placed in any component sass file.

If I switch to another theme in a different shade, the $background value form the theme will be different but I don't care: lighten($background, 50%) (for example) will adjust automatically to the new colors. A css file for a new theme would make changing the theme very painful as part of the application would not follow.