feat: Custom Theming
MODIFY
config.json
config.json
{
"language": "de",
"supportedLanguages": ["de", "en"],
- "theme": "default-theme",
"hero": {
"title": "HOME.TITLE",
"subtitle": "HOME.SUBTITLE",
"heroImgUrl": "https://www.gstatic.com/earth/social/00_generic_facebook-001.jpg",
"large": true,
"fontColor": {
- "title": "orange",
- "subtitle": "green"
+ "title": "rgba(255, 255, 255, 1)",
+ "subtitle": "rgba(255, 255, 255, 1)"
},
"overlayColor": "rgba(200, 200, 200, 0.4)"
},

MODIFY
src/app/app.component.sass
src/app/app.component.sass
min-height: calc(68vh - 40px - 40px)
height: 100%
-// Header: 32vh
+// Header: 19vh
// Content Padding Top + Bottom: 40px
// Footer Height: 40px
.free-height
min-height: calc(81vh - 40px - 40px)
- height: 100%
#navigation
text-align: center

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -32,10 +32,8 @@ import {MyAppsComponent} from './components/my-apps/my-apps.component';
import {ThemeService} from './services/theme/theme.service';
export function initializeApp(configService: ConfigService,
- devPortalInitializer: InitializerService,
- themeService: ThemeService): () => Promise<void> {
+ devPortalInitializer: InitializerService): () => Promise<void> {
configService.readAndEvaluateConfig();
- themeService.setTheme(configService.getTheme());
/* Define promisses needed for the app initialization */
const initLanguagePromise: Promise<void> = new Promise((resolve, reject) => {

MODIFY
src/app/components/header/header.component.html
src/app/components/header/header.component.html
<div #heroImage id="hero-image" [ngClass]="{'hero-large' : heroService.hero.large}">
<div id="hero-overlay">
<div #heroOverlay id="hero-text">
- <h1 #heroTitle>{{heroService.hero.title}}</h1>
+ <h1 class="mt-40" #heroTitle>{{heroService.hero.title}}</h1>
<p #heroSubtitle>{{heroService.hero.subtitle}}</p>
</div>
<div id="hero-btn">

MODIFY
src/app/interfaces/IConfig.ts
src/app/interfaces/IConfig.ts
export interface IConfig {
"language": string,
"supportedLanguages": string[],
- "theme": string,
"hero": IHero,
"navigation": INavigation,
"footer": IFooter

MODIFY
src/app/services/config/config.service.ts
src/app/services/config/config.service.ts
@@ -37,8 +37,4 @@ export class ConfigService {
getLanguage(): string {
return this.config.language;
}
-
- getTheme(): string {
- return this.config.theme;
- }
}

MODIFY
src/index.html
src/index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
-<body>
+<body class="theme">
<app-root></app-root>
</body>
</html>

MODIFY
src/styles.sass
src/styles.sass
@import '~@angular/material/theming'
-@import './themes/default'
-// @import './themes/custom'
+@import './themes/custom'
@include mat-core()
-/* Theme Classes */
-.default-theme
- @include angular-material-theme($default-theme)
+/***** THEMING *****/
+.theme
+ @include angular-material-theme($theme)
-//.custom-theme
-// @include angular-material-theme($custom-theme)
+/***** DEFINITIONS *****/
+/** Font **/
+$default-font: 'Open Sans', sans-serif
+
+/** Paddings and Margins **/
+$sizes: 5, 10, 15, 20, 25, 30, 35, 40
+@each $size in $sizes
+ // Margins
+ .mt-#{$size}
+ margin-top: #{$size}px
+
+ .mr-#{$size}
+ margin-right: #{$size}px
+
+ .mb-#{$size}
+ margin-bottom: #{$size}px
+
+ .ml-#{$size}
+ margin-left: #{$size}px
+
+ // Paddings
+ .pt-#{$size}
+ padding-top: #{$size}px
+
+ .pr-#{$size}
+ padding-right: #{$size}px
+
+ .pb-#{$size}
+ padding-bottom: #{$size}px
+
+ .pl-#{$size}
+ padding-left: #{$size}px
+/***** DevPortal Default Styling *****/
+/** Main tags **/
html
font-size: 100%
body
- font-family: 'Open Sans', sans-serif
+ font-family: $default-font
margin: 0
line-height: 1.6
-a
- text-decoration: none
- &:visited
- color: map-get($primary-palette, 500)
-
-/** Font **/
+/** h-tags **/
h1
font-size: 2rem
@@ -36,9 +62,14 @@ h3
h4
font-size: 1.1rem
+/** a-tags **/
+a
+ text-decoration: none
+ &:visited
+ color: $primary
-
-/** Style of Material **/
+/***** Material Styling *****/
+/** Form Field Pre- and Suffix **/
.mat-form-field-appearance-legacy
.mat-form-field-prefix, .mat-form-field-suffix
align-self: flex-end

MODIFY
src/themes/custom.sass
src/themes/custom.sass
@import '~@angular/material/theming'
@include mat-core()
-$primary-palette: mat-palette($mat-orange)
-$accent-palette: mat-palette($mat-indigo)
-$warn-palette: mat-palette($mat-lime)
+\: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)
-$custom-theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette)
+ --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)
+
+$mat-scheer-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)))
+$mat-scheer-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)))
+$mat-scheer-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($mat-scheer-blue)
+$accent-palette: mat-palette($mat-scheer-grey)
+$warn-palette: mat-palette($mat-scheer-red)
+
+$primary: var(--blue)
+$warn: var(--red)
+$accent: var(--grey)
+
+$theme: mat-light-theme($primary-palette,$accent-palette, $warn-palette)

MODIFY
src/themes/default.sass
src/themes/default.sass
@@ -5,4 +5,8 @@ $primary-palette: mat-palette($mat-indigo)
$accent-palette: mat-palette($mat-pink)
$warn-palette: mat-palette($mat-lime)
-$default-theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette)
+$primary: map-get($primary-palette, 500)
+$warn: map-get($warn-palette, 500)
+$accent: map-get($accent-palette, 500)
+
+$theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette)

feat: Custom Theming