fix: move color variables into separate file to allow simple customizations
MODIFY
angular.json
angular.json
"styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss",
- "src/assets/themes/default.scss",
+ "src/themes/default.scss",
"node_modules/swagger-ui/dist/swagger-ui.css",
"node_modules/simplebar/dist/simplebar.css",
"node_modules/prismjs/themes/prism.css",

ADD
src/assets/custom-style.css
+/*
+ * Copyright 2021 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+
+:root {
+ /* Put the color values for you primary, accent and warning to define your color theme */
+ --primary: rgba(41, 150, 204, 1);
+ --primary-80: rgba(41, 150, 204, .8);
+ --primary-60: rgba(41, 150, 204, .6);
+ --primary-40: rgba(41, 150, 204, .4);
+ --primary-20: rgba(41, 150, 204, .2);
+
+ --accent: rgba(186, 182, 185, 1);
+ --accent-80: rgba(186, 182, 185, .8);
+ --accent-60: rgba(186, 182, 185, .6);
+ --accent-40: rgba(186, 182, 185, .4);
+ --accent-20: rgba(186, 182, 185, .2);
+
+ --warn: rgba(208, 50, 55, 1);
+ --warn-80: rgba(208, 50, 55, .8);
+ --warn-60: rgba(208, 50, 55, .6);
+ --warn-40: rgba(208, 50, 55, .4);
+ --warn-20: rgba(208, 50, 55, .2);
+
+ --primary-warn-contrast: rgba(255, 255, 255, 1);
+
+ --dark-primary: rgba(5, 97, 141, 1);
+ --dark-primary-80: rgba(5, 97, 141, .8);
+ --dark-primary-60: rgba(5, 97, 141, .6);
+ --dark-primary-40: rgba(5, 97, 141, .4);
+ --dark-primary-20: rgba(5, 97, 141, .2);
+
+ --dark-accent: rgba(106, 116, 127, 1);
+ --dark-accent-80: rgba(106, 116, 127, .8);
+ --dark-accent-60: rgba(106, 116, 127, .6);
+ --dark-accent-40: rgba(106, 116, 127, .4);
+ --dark-accent-20: rgba(106, 116, 127, .2);
+
+ --acccent-contrast: rgba(0, 0, 0, 1);
+ --acccent-contrast-80: rgba(0, 0, 0, .8);
+ --acccent-contrast-60: rgba(0, 0, 0, .6);
+ --acccent-contrast-40: rgba(0, 0, 0, .4);
+ --acccent-contrast-20: rgba(0, 0, 0, .2);
+
+ --dark-warn: rgba(172, 30, 28, 1);
+ --dark-warn-80: rgba(172, 30, 28, .8);
+ --dark-warn-60: rgba(172, 30, 28, .6);
+ --dark-warn-40: rgba(172, 30, 28, .4);
+ --dark-warn-20: rgba(172, 30, 28, .2);
+}
+
+/* Place your custom styles below this comment */

DELETE
src/assets/themes/custom.scss
-/*!
- * Copyright 2021 Scheer PAS Schweiz AG
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * imitations under the License.
- */
-
-@import '../../../node_modules/@angular/material/theming';
-@include mat-core();
-
-:root {
- --red: rgba(208, 50, 55, 1);
- --red-80: rgba(208, 50, 55, .8);
- --red-60: rgba(208, 50, 55, .6);
- --red-40: rgba(208, 50, 55, .4);
- --red-20: rgba(208, 50, 55, .2);
-
- --blue: rgba(41, 150, 204, 1);
- --blue-80: rgba(41, 150, 204, .8);
- --blue-60: rgba(41, 150, 204, .6);
- --blue-40: rgba(41, 150, 204, .4);
- --blue-20: rgba(41, 150, 204, .2);
-
- --grey: rgba(186, 182, 185, 1);
- --grey-80: rgba(186, 182, 185, .8);
- --grey-60: rgba(186, 182, 185, .6);
- --grey-40: rgba(186, 182, 185, .4);
- --grey-20: rgba(186, 182, 185, .2);
-
- --white: rgba(255, 255, 255, 1);
-
- --dark-red: rgba(172, 30, 28, 1);
- --dark-red-80: rgba(172, 30, 28, .8);
- --dark-red-60: rgba(172, 30, 28, .6);
- --dark-red-40: rgba(172, 30, 28, .4);
- --dark-red-20: rgba(172, 30, 28, .2);
-
- --dark-blue: rgba(5, 97, 141, 1);
- --dark-blue-80: rgba(5, 97, 141, .8);
- --dark-blue-60: rgba(5, 97, 141, .6);
- --dark-blue-40: rgba(5, 97, 141, .4);
- --dark-blue-20: rgba(5, 97, 141, .2);
-
- --dark-grey: rgba(106, 116, 127, 1);
- --dark-grey-80: rgba(106, 116, 127, .8);
- --dark-grey-60: rgba(106, 116, 127, .6);
- --dark-grey-40: rgba(106, 116, 127, .4);
- --dark-grey-20: rgba(106, 116, 127, .2);
-
- --black: rgba(0, 0, 0, 1);
- --black-80: rgba(0, 0, 0, .8);
- --black-60: rgba(0, 0, 0, .6);
- --black-40: rgba(0, 0, 0, .4);
- --black-20: rgba(0, 0, 0, .2);
-}
-
-$custom-blue: (
- 50: var(--blue-20),
- 100: var(--blue-20),
- 200: var(--blue-40),
- 300: var(--blue-60),
- 400: var(--blue-80),
- 500: var(--blue),
- 600: var(--dark-blue-40),
- 700: var(--dark-blue-60),
- 800: var(--dark-blue-80),
- 900: var(--dark-blue),
- A100: var(--blue-40),
- A200: var(--blue-60),
- A400: var(--blue-80),
- A700: var(--blue),
- contrast: (
- 50: var(--white),
- 100: var(--white),
- 200: var(--white),
- 300: var(--white),
- 400: var(--white),
- 500: var(--white),
- 600: var(--white),
- 700: var(--white),
- 800: var(--white),
- 900: var(--white),
- A100: var(--white),
- A200: var(--white),
- A400: var(--white),
- A700: var(--white),
- )
-);
-
-$custom-red: (
- 50: var(--red-20),
- 100: var(--red-20),
- 200: var(--red-40),
- 300: var(--red-60),
- 400: var(--red-80),
- 500: var(--red),
- 600: var(--dark-red-40),
- 700: var(--dark-red-60),
- 800: var(--dark-red-80),
- 900: var(--dark-red),
- A100: var(--red-40),
- A200: var(--red-60),
- A400: var(--red-80),
- A700: var(--red),
- contrast: (
- 50: var(--white),
- 100: var(--white),
- 200: var(--white),
- 300: var(--white),
- 400: var(--white),
- 500: var(--white),
- 600: var(--white),
- 700: var(--white),
- 800: var(--white),
- 900: var(--white),
- A100: var(--white),
- A200: var(--white),
- A400: var(--white),
- A700: var(--white),
- )
-);
-
-$custom-grey: (
- 50: var(--grey-20),
- 100: var(--grey-20),
- 200: var(--grey-40),
- 300: var(--grey-60),
- 400: var(--grey-80),
- 500: var(--grey),
- 600: var(--dark-grey-40),
- 700: var(--dark-grey-60),
- 800: var(--dark-grey-80),
- 900: var(--dark-grey),
- A100: var(--grey-40),
- A200: var(--grey-60),
- A400: var(--grey-80),
- A700: var(--grey),
- contrast: (
- 50: var(--black-60),
- 100: var(--black-60),
- 200: var(--black-60),
- 300: var(--black-60),
- 400: var(--black-60),
- 500: var(--black-60),
- 600: var(--black-80),
- 700: var(--black-80),
- 800: var(--black-80),
- 900: var(--black-80),
- A100: var(--black-80),
- A200: var(--black-80),
- A400: var(--black-80),
- A700: var(--black-80),
- )
-);
-
-$primary-palette: mat-palette($custom-blue);
-$accent-palette: mat-palette($custom-grey);
-$warn-palette: mat-palette($custom-red);
-
-$theme-custom: mat-light-theme($primary-palette,$accent-palette, $warn-palette);

MODIFY
src/index.html
src/index.html
rel="stylesheet"
type="text/css"
href="//fonts.googleapis.com/css?family=Open+Sans" />
+ <link rel="stylesheet" type="text/css" href="assets/custom-style.css" />
</head>
<body>
<app-root></app-root>

MODIFY
src/styles.scss
src/styles.scss
@use '~@angular/material' as mat;
@import '~@angular/material/theming';
-@import 'assets/themes/default';
-@import 'assets/themes/custom';
+@import 'src/themes/default';
+@import 'src/themes/custom';
@include mat-core();
/***** THEMING *****/

ADD
src/themes/custom.scss
+/*!
+ * Copyright 2021 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+
+@import 'node_modules/@angular/material/theming';
+@include mat-core();
+
+$custom-primary: (
+ 50: var(--primary-20),
+ 100: var(--primary-20),
+ 200: var(--primary-40),
+ 300: var(--primary-60),
+ 400: var(--primary-80),
+ 500: var(--primary),
+ 600: var(--dark-primary-40),
+ 700: var(--dark-primary-60),
+ 800: var(--dark-primary-80),
+ 900: var(--dark-primary),
+ A100: var(--primary-40),
+ A200: var(--primary-60),
+ A400: var(--primary-80),
+ A700: var(--primary),
+ contrast: (
+ 50: var(--primary-warn-contrast),
+ 100: var(--primary-warn-contrast),
+ 200: var(--primary-warn-contrast),
+ 300: var(--primary-warn-contrast),
+ 400: var(--primary-warn-contrast),
+ 500: var(--primary-warn-contrast),
+ 600: var(--primary-warn-contrast),
+ 700: var(--primary-warn-contrast),
+ 800: var(--primary-warn-contrast),
+ 900: var(--primary-warn-contrast),
+ A100: var(--primary-warn-contrast),
+ A200: var(--primary-warn-contrast),
+ A400: var(--primary-warn-contrast),
+ A700: var(--primary-warn-contrast),
+ )
+);
+
+$custom-warn: (
+ 50: var(--warn-20),
+ 100: var(--warn-20),
+ 200: var(--warn-40),
+ 300: var(--warn-60),
+ 400: var(--warn-80),
+ 500: var(--warn),
+ 600: var(--dark-warn-40),
+ 700: var(--dark-warn-60),
+ 800: var(--dark-warn-80),
+ 900: var(--dark-warn),
+ A100: var(--warn-40),
+ A200: var(--warn-60),
+ A400: var(--warn-80),
+ A700: var(--warn),
+ contrast: (
+ 50: var(--primary-warn-contrast),
+ 100: var(--primary-warn-contrast),
+ 200: var(--primary-warn-contrast),
+ 300: var(--primary-warn-contrast),
+ 400: var(--primary-warn-contrast),
+ 500: var(--primary-warn-contrast),
+ 600: var(--primary-warn-contrast),
+ 700: var(--primary-warn-contrast),
+ 800: var(--primary-warn-contrast),
+ 900: var(--primary-warn-contrast),
+ A100: var(--primary-warn-contrast),
+ A200: var(--primary-warn-contrast),
+ A400: var(--primary-warn-contrast),
+ A700: var(--primary-warn-contrast),
+ )
+);
+
+$custom-accent: (
+ 50: var(--accent-20),
+ 100: var(--accent-20),
+ 200: var(--accent-40),
+ 300: var(--accent-60),
+ 400: var(--accent-80),
+ 500: var(--accent),
+ 600: var(--dark-accent-40),
+ 700: var(--dark-accent-60),
+ 800: var(--dark-accent-80),
+ 900: var(--dark-accent),
+ A100: var(--accent-40),
+ A200: var(--accent-60),
+ A400: var(--accent-80),
+ A700: var(--accent),
+ contrast: (
+ 50: var(--acccent-contrast-60),
+ 100: var(--acccent-contrast-60),
+ 200: var(--acccent-contrast-60),
+ 300: var(--acccent-contrast-60),
+ 400: var(--acccent-contrast-60),
+ 500: var(--acccent-contrast-60),
+ 600: var(--acccent-contrast-80),
+ 700: var(--acccent-contrast-80),
+ 800: var(--acccent-contrast-80),
+ 900: var(--acccent-contrast-80),
+ A100: var(--acccent-contrast-80),
+ A200: var(--acccent-contrast-80),
+ A400: var(--acccent-contrast-80),
+ A700: var(--acccent-contrast-80),
+ )
+);
+
+$primary-palette: mat-palette($custom-primary);
+$accent-palette: mat-palette($custom-accent);
+$warn-palette: mat-palette($custom-warn);
+
+$theme-custom: mat-light-theme($primary-palette,$accent-palette, $warn-palette);

RENAME
src/assets/themes/default.scss
src/themes/default.scss
* imitations under the License.
*/
-@import '../../../node_modules/@angular/material/theming';
+@import 'node_modules/@angular/material/theming';
@include mat-core();
$primary-palette: mat-palette($mat-indigo);

fix: move color variables into separate file to allow simple customizations