provide custom name for color ionic angular-CodePudding

I am new to ionic and angular so I am trying to provide specific color name to one class and export that to all app. I have done this using react but I am not sure how we can do with ionic angular: An example where I have implemented this in react-native

color.js

export default {
  primary: "#fc5c65",
  secondary: "#4ecdc4",
}

and I have used this to different classes like

Button.js

const styles = StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    borderRadius: 25,
  }
})

so How do I implement this structure in ionic angular ? I have color.ts class with

export default {
  primary: '#26316d',
  secondary: '#8995d6',
};

and I am trying to use these color value to scss class

header.page.scss
.header {
    display: flex;
    background: #26316d;  //I want to use primary instead of color code here
}

CodePudding user response：

You don't need to create .ts file instead You can create custom.scss and

custom.scss
    $primary: '#26316d',
    $secondary: '#8995d6',

and you can use it by importing to any scss

@import "./custom.scss";

.header {
    display: flex;
    background: $primary;
}