Merge pull request #12 from eksrvb/feature/theming

Feature/theming

Author: eksrha

.github/workflows/branchPR.yaml

@@ -1,10 +1,7 @@
 name: Build PR
 
 on:
-  push:
-    branches-ignore:
-      - "main"
-      - 'docs/**'
+  pull_request:
     paths-ignore:
       - "README.md"
       - 'docs/**'
@@ -37,4 +34,4 @@ jobs:
       - name: Dry-Run release
         run: ./awesome-ci createRelease -patchLevel bugfix -dry-run
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -20,6 +20,7 @@ If you want to give me feedback and don't want to open an issue on github, pleas
 - get a date back with the annotation "clickDate" (see example)
 - insert your own calendar data and render the new template
 - multiselect days optional (returns the daily span)
+- include your own [theme](https://eksrvb.github.io/material-calendar/api.html#theaming) (requiered since version 3.1.0)
 more in the docs... ;)
 
 ## Getting help

docs/api.md

@@ -86,4 +86,36 @@ Optionally provide your location:
 | {string}   badgeMode       | null | badgeMode options: 'Int' or 'Icon' |
 | {number}   badgeInt        | null | if badgeMode == 'Int', set our Number here |
 | {string}   badgeIcon       | null | if badgeMode == 'Icon', set Icon (Matireal-Icons) |
-| {string}   toolTip         | null | if set, this displays a mat-tooltip |
+| {string}   toolTip         | null | if set, this displays a mat-tooltip |
+
+## theaming
+
+Make sure your using the standard material palette!
+
+> Since Version 3.1.0 theaming is required.
+
+style.scss or theme.scss
+```scss
+@import "material-calendar/calendar-theme.scss";
+// standard angular material -->
+@import "~@angular/material/theming";
+@include mat-core();
+
+$mat-primary-palette: mat-palette($mat-indigo);
+$mat-accent-palette: mat-palette($mat-light-green);
+
+$app-light-theme: mat-light-theme($mat-primary-palette, $mat-accent-palette);
+$app-dark-theme: mat-dark-theme($mat-primary-palette, $mat-accent-palette);
+
+@include angular-material-theme($app-light-theme);
+// <-- standard angular material
+// this include prowides the calendar with the right colors
+@include calendar-theme($app-light-theme);
+
+// following section is for dark mode and optional.
+// use appropriate class name for darkMode
+.darkMode {
+  @include angular-material-theme($app-dark-theme);
+  @include calendar-theme($app-dark-theme);
+}
+```

docs/index.md

@@ -38,16 +38,19 @@ If you need an example for your pipeline you can find it in the sidebar under th
 > All available version are listed at [npmjs](https://www.npmjs.com/package/material-calendar)
 
 
-## A couple of impressions
+## A few impressions
 
-### One single panel without displaying calendar week
-![example-picture](https://github.com/eksrvb/material-calendar/raw/bugfix/unification-github-gitlab/docs/pictures/monthly-onem-cdata.png)
+### One single panel without displaying calendar week and with dark theme
+![example-picture](https://github.com/eksrvb/material-calendar/raw/main/docs/pictures/monthly-onem-cdata-kw_1.png)
 
 ### One single panel with displaying calendar week
-![example-picture](https://github.com/eksrvb/material-calendar/raw/bugfix/unification-github-gitlab/docs/pictures/monthly-onem-cdata-kw.png)
+![example-picture](https://github.com/eksrvb/material-calendar/raw/main/docs/pictures/monthly-onem-cdata-kw.png)
 
 ### Three panels with displaying calendar week
-![example-picture](https://github.com/eksrvb/material-calendar/raw/bugfix/unification-github-gitlab/docs/pictures/monthly-threem-cdata-kw.png)
+![example-picture](https://github.com/eksrvb/material-calendar/raw/main/docs/pictures/monthly-threem-cdata-kw_1.png)
 
-### A calendar with 12 months (annual-mode) and with displaying calendar week
-![example-picture](https://github.com/eksrvb/material-calendar/raw/bugfix/unification-github-gitlab/docs/pictures/annual-cdata-kw.png)
+### Three panels with displaying calendar week and dark theme
+![example-picture](https://github.com/eksrvb/material-calendar/raw/main/docs/pictures/monthly-threem-cdata-kw_2.png)
+
+### A calendar with 12 months (annual-mode) and without displaying calendar week
+![example-picture](https://github.com/eksrvb/material-calendar/raw/main/docs/pictures/annual-cdata-kw.png)