feat: dark theme

src/app/app.component.html

@@ -1,3 +1,18 @@
+<!--
+  ~ Copyright (C) 2023 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
 <ion-app style="margin-top: env(safe-area-inset-top)">
   <stapps-navigation></stapps-navigation>
 </ion-app>

src/app/modules/about/about-licenses.scss

@@ -22,7 +22,7 @@ cdk-virtual-scroll-viewport {
   width: 100%;
 }
 
-::ng-deep {
+:host ::ng-deep {
   .cdk-virtual-scroll-content-wrapper {
     width: 100%;
   }

src/app/modules/about/about-page/about-page-content.html

@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -36,7 +36,7 @@
       </ion-col>
     </ion-row>
   </ion-grid>
-  <ion-item *ngSwitchCase="'router link'" [routerLink]="content.link">
+  <ion-item *ngSwitchCase="'router link'" [routerLink]="content.link" fill="clear">
     <ion-icon *ngIf="content.icon" [name]="content.icon" slot="start"></ion-icon>
     <ion-label>{{ 'title' | translateSimple: content }}</ion-label>
   </ion-item>

src/app/modules/about/about-page/about-page.html

@@ -26,7 +26,7 @@
 </ion-header>
 <ion-content *ngIf="content" class="ion-content-parallax">
   <div>
-    <ion-text color="light">{{ appName }} v{{ version }}</ion-text>
+    <ion-text>{{ appName }} v{{ version }}</ion-text>
     <div class="page-content">
       <about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
     </div>

src/app/modules/about/about-page/about-page.scss

@@ -62,10 +62,7 @@ ion-text {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
-    background: var(--ion-color-primary-contrast);
+    background: var(--ion-item-background);
-    &.licenses-content {
-      background: var(--ion-color-light);
-    }
 
     padding-block-end: var(--spacing-md);
     @include border-radius-in-parallax(var(--border-radius-default));
@@ -80,7 +77,6 @@ ion-text {
       @include border-radius-in-parallax(var(--border-radius-default));
       overflow: hidden;
       position: relative;
-      background-color: var(--ion-color-primary-contrast);
       margin: 0;
 
       & > ion-thumbnail {
@@ -89,3 +85,7 @@ ion-text {
     }
   }
 }
+
+ion-text {
+  color: var(--ion-color-primary-contrast);
+}

src/app/modules/assessments/page/assessments-page.scss

@@ -1,19 +1,20 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
- *  This program is free software: you can redistribute it and/or modify it
+ * This program is free software: you can redistribute it and/or modify it
- *  under the terms of the GNU General Public License as published by the Free
+ * under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
+ * Software Foundation, version 3.
  *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
+ * This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
+ * more details.
  *
- *  You should have received a copy of the GNU General Public License along with
+ * You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
 .content {
   height: 100%;
   padding-inline: 8px;
+  --ion-item-background: var(--ion-background-color);
 }

src/app/modules/catalog/catalog.component.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -27,3 +27,7 @@ ion-toolbar.in-toolbar {
     padding: 0 !important;
   }
 }
+
+:host {
+  --ion-item-background: var(--ion-backgrund-color);
+}

src/app/modules/dashboard/dashboard.component.scss

@@ -48,7 +48,7 @@
 }
 
 ion-content {
-  --background: var(--ion-color-light);
+  --background: var(--ion-background-color);
   --padding-bottom: var(--spacing-xl);
   &::part(inner-scroll) {
     scrollbar-gutter: stable;
@@ -59,6 +59,7 @@ ion-content {
   width: 100%;
   z-index: 3;
   background: var(--ion-color-primary);
+  color: var(--ion-color-primary-contrast);
   display: flex;
   justify-content: space-between;
   gap: var(--spacing-md);

src/app/modules/data/data.module.ts

@@ -99,6 +99,7 @@ import {SCThingListItemVirtualScrollStrategyDirective} from './list/sc-thing-lis
 import {DataListItemHostDirective} from './list/data-list-item-host.directive';
 import {DataListItemHostDefaultComponent} from './list/data-list-item-host-default.component';
 import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
+import {DishCharacteristicsComponent} from './types/dish/dish-characteristics.component';
 
 /**
  * Module for handling data
@@ -111,6 +112,7 @@ import {browserFactory, SimpleBrowser} from '../../util/browser.factory';
     AddressDetailComponent,
     CatalogDetailContentComponent,
     CatalogListItemComponent,
+    DishCharacteristicsComponent,
     DataDetailComponent,
     DataDetailContentComponent,
     DataIconPipe,

src/app/modules/data/detail/data-detail-content.scss

@@ -38,7 +38,7 @@ stapps-origin-detail {
     position: relative;
     margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
     margin-block-end: var(--spacing-xl);
-    background-color: var(--ion-color-primary-contrast);
+    background-color: var(--ion-card-background);
     @include content-padding();
 
     & > ion-thumbnail {
@@ -73,7 +73,6 @@ stapps-origin-detail {
       padding-bottom: 8px;
     }
     ion-card-header {
-      color: var(--ion-color-dark);
       padding-top: 8px;
       padding-bottom: 4px;
       font-weight: bold;

src/app/modules/data/detail/data-detail.scss

@@ -19,3 +19,15 @@ ion-content > div {
   flex-direction: column;
   flex: 1;
 }
+
+stapps-data-path ::ng-deep ion-breadcrumb {
+  color: var(--ion-color-primary-contrast);
+
+  &::part(separator) {
+    color: var(--ion-color-primary-contrast);
+  }
+
+  &::part(collapsed-indicator) {
+    background: var(--ion-color-primary-contrast);
+  }
+}

src/app/modules/data/elements/favorite-button.component.html

@@ -1,16 +1,16 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
-  ~  This program is free software: you can redistribute it and/or modify it
+  ~ This program is free software: you can redistribute it and/or modify it
-  ~  under the terms of the GNU General Public License as published by the Free
+  ~ under the terms of the GNU General Public License as published by the Free
-  ~  Software Foundation, version 3.
+  ~ Software Foundation, version 3.
   ~
-  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-  ~  more details.
+  ~ more details.
   ~
-  ~  You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
 <ion-button (click)="toggle($event)" color="medium" size="small" fill="clear">

src/app/modules/data/elements/favorite-button.component.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -27,6 +27,7 @@
   }
 
   .selected {
+    // TODO
     color: #fbc02d;
   }
 }

src/app/modules/data/elements/title-card.component.html

@@ -38,7 +38,6 @@
     <ion-button
       expand="full"
       fill="clear"
-      color="light"
       *ngIf="item.description && buttonShown"
       (click)="toggleDescriptionAccordion()"
     >

src/app/modules/data/elements/title-card.component.scss

@@ -39,10 +39,14 @@ ion-card {
     padding: 0 0 var(--header-spacing-bottom);
 
     .description * {
-      color: var(--ion-color-light);
+      color: var(--ion-color-primary-contrast);
     }
     .openingHours {
-      color: var(--ion-color-light);
+      color: var(--ion-color-primary-contrast);
     }
   }
+
+  ion-button {
+    --color: var(--ion-color-primary-contrast);
+  }
 }

src/app/modules/data/list/data-list-item.scss

@@ -13,7 +13,6 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 @import 'src/theme/util/_mixins.scss';
-@import 'src/theme/common/_helper.scss';
 
 :host {
   display: block;
@@ -50,11 +49,6 @@ ion-item {
       flex-direction: column;
     }
   }
-  ::ng-deep {
-    ion-note {
-      @extend %horizontal-list;
-    }
-  }
 }
 
 :host.square ::ng-deep {

src/app/modules/data/list/search-page.html

@@ -56,7 +56,10 @@
 </ion-header>
 
 <ion-content class="content">
-  <div [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'">
+  <div
+    [class.no-results]="!showDefaultData && !items && !loading"
+    [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
+  >
     <ion-label class="centeredMessageContainer">
       {{ 'search.instruction' | translate }}
     </ion-label>

src/app/modules/data/list/search-page.scss

@@ -37,7 +37,7 @@ ion-toolbar:first-of-type {
 }
 
 ion-content {
-  --background: var(--ion-color-light);
+  --background: var(--ion-background-color);
 }
 
 .content > div {

src/app/modules/data/types/dish/dish-characteristics.component.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCDish} from '@openstapps/core';
+
+@Component({
+  selector: 'stapps-dish-characteristics',
+  templateUrl: 'dish-characteristics.html',
+  styleUrls: ['dish-characteristics.scss'],
+})
+export class DishCharacteristicsComponent {
+  @Input() item: SCDish;
+}

src/app/modules/data/types/dish/dish-characteristics.html

@@ -0,0 +1,28 @@
+<!--
+  ~ Copyright (C) 2023 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+<ion-note>
+  <ng-container *ngIf="item.characteristics">
+    <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
+      <!-- Abbr tag shows the actual name on hover -->
+      <abbr
+        [style.--background-url]="'url(' + characteristic.image + ')'"
+        [title]="characteristic.name | titlecase"
+      ></abbr>
+    </ng-container>
+  </ng-container>
+  <ion-label>
+    {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+  </ion-label>
+</ion-note>

src/app/modules/data/types/dish/dish-characteristics.scss

@@ -0,0 +1,38 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+ion-note {
+  list-style: none;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: start;
+}
+
+abbr {
+  width: 16px;
+  aspect-ratio: 1;
+
+  background: var(--ion-color-medium);
+
+  mask-image: var(--background-url);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  mask-mode: alpha;
+
+  + ion-label::after {
+    content: '•';
+    margin-inline: var(--spacing-xs);
+  }
+}

src/app/modules/data/types/dish/dish-detail-content.html

@@ -13,31 +13,7 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-grid>
+<stapps-dish-characteristics *ngIf="item.characteristics" [item]="item"></stapps-dish-characteristics>
-  <ion-row>
-    <ion-col>
-      <ion-card *ngIf="item.categories">
-        <ion-card-header>
-          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-        </ion-card-header>
-      </ion-card>
-    </ion-col>
-    <ion-col>
-      <ion-card *ngIf="item.characteristics">
-        <ion-card-header class="no-padding-inline-start vertical-list">
-          <ul>
-            <li>
-              <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
-                <img [src]="characteristic.image" [alt]="characteristic.name | titlecase" />
-              </ng-container>
-            </li>
-          </ul>
-        </ion-card-header>
-      </ion-card>
-    </ion-col>
-  </ion-row>
-</ion-grid>
-
 <stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
 <!-- unwanted by swffm
 <ion-card *ngIf="item.nutrition">
@@ -92,7 +68,7 @@
 -->
 <stapps-simple-card
   *ngIf="item.additives"
-  [title]="'additives' | propertyNameTranslate: item"
+  [title]="$any('additives' | propertyNameTranslate: item) | titlecase"
   [content]="'additives' | thingTranslate: item | join: ', '"
 >
 </stapps-simple-card>

src/app/modules/data/types/dish/dish-detail-content.scss

@@ -12,10 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
+stapps-dish-characteristics {
-@import 'src/theme/common/_helper.scss';
+  margin: var(--spacing-lg);
-.vertical-list {
+  margin-block-end: var(--spacing-sm);
-  ul li img {
-    filter: unset;
-  }
 }

src/app/modules/data/types/dish/dish-list-item.html

@@ -21,18 +21,7 @@
         <p class="title-sub ion-hide-sm-down">
           {{ 'description' | thingTranslate: item }}
         </p>
-        <ion-note>
+        <stapps-dish-characteristics [item]="item"></stapps-dish-characteristics>
-          <ul>
-            <li>
-              {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-            </li>
-            <li *ngIf="item.characteristics">
-              <ng-container *ngFor="let characteristic of 'characteristics' | thingTranslate: item">
-                <img [src]="characteristic.image" [alt]="characteristic.name | titlecase" />
-              </ng-container>
-            </li>
-          </ul>
-        </ion-note>
       </div>
     </ion-col>
     <ion-col width-10 text-right>

src/app/modules/data/types/event/event-list-item.html

@@ -24,9 +24,9 @@
         <p *ngIf="item.academicTerms" class="title-sub">
           {{ 'name' | thingTranslate: item.academicTerms[0] }}
         </p>
-        <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item }}</ion-note>
+        <ion-note *ngIf="!item.categories">{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
         <ion-note *ngIf="item.categories">
-          {{ 'categories' | thingTranslate: item | join: ', ' }}
+          {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
         </ion-note>
       </div>
     </ion-col>

src/app/modules/data/types/message/message-detail-content.html

@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -40,9 +40,8 @@
 </div>
 
 <ng-template #news>
-  <ion-thumbnail>
+  <ion-thumbnail *ngIf="item.image" style="background-image: url('{{ item.image }}')">
     <ion-img
-      *ngIf="item.image"
       src="{{ item.image }}"
       (ionError)="$event.target.nextSibling.style.display = 'none'"
       alt="{{ item.name }}"

src/app/modules/data/types/message/message-detail-content.scss

@@ -1,5 +1,5 @@
-/*
+/*!
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -15,17 +15,24 @@
 
 :host {
   ion-thumbnail {
+    position: relative;
     width: 100%;
     height: auto;
-    img {
+    margin-inline: auto;
-      display: block;
+    overflow: hidden;
-    }
+    background-size: contain;
-  }
+    background-position: center;
-  // Show smaller image on a desktop
+    transform: scaleX(-1);
-  @media (min-width: 992px) {
+
-    ion-thumbnail {
+    ion-img {
-      width: 60%;
+      backdrop-filter: blur(32px);
-      margin: 0 auto;
+
+      &::part(image) {
+        transform: scaleX(-1);
+        max-width: 16cm;
+        object-fit: contain;
+        margin-inline: auto;
+      }
     }
   }
 

src/app/modules/data/types/place/place-detail-content.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -12,10 +12,13 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
 import {SCBuilding, SCFloor, SCPointOfInterest, SCRoom, SCThings} from '@openstapps/core';
 import {DataProvider} from '../../data.provider';
 import {hasValidLocation, isSCFloor} from './place-types';
+import {DataRoutingService} from '../../data-routing.service';
+import {Router} from '@angular/router';
+import {Subscription} from 'rxjs';
 
 /**
  * TODO
@@ -26,7 +29,7 @@ import {hasValidLocation, isSCFloor} from './place-types';
   selector: 'stapps-place-detail-content',
   templateUrl: 'place-detail-content.html',
 })
-export class PlaceDetailContentComponent implements OnInit {
+export class PlaceDetailContentComponent implements OnInit, OnDestroy {
   /**
    * TODO
    */
@@ -39,6 +42,8 @@ export class PlaceDetailContentComponent implements OnInit {
    */
   hasValidLocation = false;
 
+  itemRouting: Subscription;
+
   /**
    * TODO
    *
@@ -63,7 +68,17 @@ export class PlaceDetailContentComponent implements OnInit {
     );
   }
 
+  constructor(dataRoutingService: DataRoutingService, router: Router) {
+    this.itemRouting = dataRoutingService.itemSelectListener().subscribe(item => {
+      void router.navigate(['/data-detail', item.uid]);
+    });
+  }
+
   ngOnInit() {
     this.hasValidLocation = !isSCFloor(this.item) && hasValidLocation(this.item);
   }
+
+  ngOnDestroy() {
+    this.itemRouting.unsubscribe();
+  }
 }

src/app/modules/data/types/place/place-detail-content.html

@@ -35,8 +35,7 @@
       {{ 'inPlace' | propertyNameTranslate: item | titlecase }}
     </ion-card-header>
     <ion-card-content>
-      <ion-icon name="pin_drop"></ion-icon>
+      <stapps-data-list-item [item]="item.inPlace"></stapps-data-list-item>
-      <a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate: item.inPlace }}</a>
     </ion-card-content>
   </ion-card>
 </ng-container>

src/app/modules/data/types/place/place-list-item.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -14,7 +14,7 @@
  */
 import {Component, Input} from '@angular/core';
 import {PositionService} from '../../../map/position.service';
-import {Subscription, interval} from 'rxjs';
+import {interval, Subscription} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
 
 /**
@@ -23,6 +23,7 @@ import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from '.
 @Component({
   selector: 'stapps-place-list-item',
   templateUrl: 'place-list-item.html',
+  styleUrls: ['place-list-item.scss'],
 })
 export class PlaceListItemComponent {
   /**

src/app/modules/data/types/place/place-list-item.html

@@ -26,28 +26,24 @@
           </p>
           <p>
             <ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
-              <ul>
+              <ion-label>
-                <li>
+                {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
-                  {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
+              </ion-label>
-                </li>
+              <ion-label *ngIf="distance" class="distance">
-                <li *ngIf="distance">
+                <ion-icon name="directions_walk"></ion-icon>
-                  <ion-icon name="directions_walk"></ion-icon>
+                {{ distance | metersLocalized }}
-                  {{ distance | metersLocalized }}
+              </ion-label>
-                </li>
-              </ul>
             </ion-note>
           </p>
           <ng-template #onlyType>
             <ion-note>
-              <ul>
+              <ion-label>
-                <li>
+                {{ 'type' | thingTranslate: item | titlecase }}
-                  {{ 'type' | thingTranslate: item }}
+              </ion-label>
-                </li>
+              <ion-label *ngIf="distance" class="distance">
-                <li *ngIf="distance">
+                <ion-icon name="directions_walk"></ion-icon>
-                  <ion-icon name="directions_walk"></ion-icon>
+                {{ distance | metersLocalized }}
-                  {{ distance | metersLocalized }}
+              </ion-label>
-                </li>
-              </ul>
             </ion-note>
           </ng-template>
         </ng-container>
@@ -56,10 +52,11 @@
         </p>
       </div>
     </ion-col>
-    <div *ngIf="item.type !== 'building'">
+    <ng-container *ngIf="item.type !== 'building'">
-      <ion-col width-20 text-right *ngIf="item.inPlace">
+      <ion-col size="auto" class="in-place" *ngIf="item.inPlace">
-        <ion-icon name="pin_drop"></ion-icon>{{ 'name' | thingTranslate: item.inPlace }}
+        <ion-icon name="pin_drop"></ion-icon
+        ><ion-label>{{ 'name' | thingTranslate: item.inPlace }}</ion-label>
       </ion-col>
-    </div>
+    </ng-container>
   </ion-row>
 </ion-grid>

src/app/modules/data/types/place/place-list-item.scss

@@ -0,0 +1,36 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+ion-note {
+  display: flex;
+
+  > ion-label {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+ion-label + ion-label.distance::before {
+  content: '•';
+  margin-inline: var(--spacing-xs);
+}
+
+.in-place {
+  display: flex;
+
+  justify-content: end;
+  align-items: center;
+}

src/app/modules/feedback/feedback-page.scss

@@ -57,7 +57,7 @@ ion-button {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
-    background: var(--ion-color-light);
+    background: var(--ion-item-background);
     @include border-radius-in-parallax(var(--border-radius-default));
 
     & > * {
@@ -70,7 +70,6 @@ ion-button {
       @include border-radius-in-parallax(var(--border-radius-default));
       overflow: hidden;
       position: relative;
-      background-color: var(--ion-color-primary-contrast);
       margin: 0;
 
       & > ion-thumbnail {

src/app/modules/map/page/map-page.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -87,18 +87,10 @@ div.map-buttons {
   ion-button {
     margin: 4px;
     // important for iOS
+    // TODO: find an option that is better suited for the iOS theme
     --box-shadow: var(--map-box-shadow);
     align-self: flex-end;
   }
-
-  ion-button::part(native) {
-    background: white;
-  }
-
-  ion-button::part(native):hover,
-  ion-button::part(native):focus {
-    background: whitesmoke;
-  }
 }
 
 div.map-buttons.above {

src/app/modules/map/widget/map-widget.scss

@@ -1,3 +1,18 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
 div.map-container {
   height: 100%;
   width: 100%;

src/app/modules/menu/context/context-menu.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.

src/app/modules/menu/navigation/navigation.scss

@@ -66,7 +66,7 @@ stapps-offline-notice.is-offline ~ ion-split-pane {
 }
 
 ion-router-outlet {
-  background: white;
+  background: var(--ion-background-color);
 }
 
 .menu-category {

src/app/modules/news/item/news-item.scss

@@ -23,7 +23,7 @@ ion-card::part(native) {
   display: flex;
   flex-direction: column-reverse;
   height: 100%;
-  background: linear-gradient(to top, var(--ion-color-dark), transparent);
+  background: linear-gradient(to top, #0e0e0e, transparent);
 }
 
 .card {
@@ -38,10 +38,10 @@ ion-card-title {
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-size: var(--font-size-xl);
-  --color: var(--ion-color-dark-contrast);
+  --color: var(--ion-text-color-dark, white);
   max-lines: 3;
 }
 
 ion-card-subtitle {
-  --color: var(--ion-color-dark-contrast);
+  --color: var(--ion-text-color-dark, white);
 }

src/app/modules/profile/page/profile-page.html

@@ -95,7 +95,7 @@
       <ion-card class="courses-card">
         <ion-card-header (click)="toggleCourseCardState()">
           <span>{{ 'profile.courses.today' | translate | uppercase }}</span>
-          <ion-icon [name]="courseCardState" fill="red" size="20"></ion-icon>
+          <ion-icon [name]="courseCardState" color="dark" size="20"></ion-icon>
         </ion-card-header>
         <ion-card-content class="course-card" [class.show-card]="courseCardState === courseCardEnum.expanded">
           <ng-container *ngIf="myCoursesToday.length === 0">

src/app/modules/profile/page/profile-page.scss

@@ -159,14 +159,14 @@
       max-width: 800px;
 
       ion-card-header {
-        background-color: var(--ion-color-light-contrast);
+        background-color: var(--ion-item-background);
         border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
 
         span {
-          color: var(--ion-color-light);
+          color: var(--ion-item-background-color-contrast);
           font-size: var(--font-size-lg);
           font-weight: var(--font-weight-bold);
         }
@@ -179,7 +179,7 @@
       ion-card-content {
         margin: 0;
         padding: 0;
-        background-color: var(--ion-color-primary-contrast);
+        background-color: var(--ion-item-background);
         border-radius: var(--border-radius-default);
         max-height: 0;
         overflow: hidden;
@@ -196,7 +196,7 @@
         div {
           font-size: var(--font-size-md);
           font-weight: var(--font-weight-black);
-          color: var(--ion-color-light-contrast);
+          color: var(--ion-item-background-color-contrast);
           text-align: center;
 
           &.no-course {

src/app/modules/schedule/page/components/calendar-component.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -86,17 +86,17 @@ ion-content {
 
   .hours-wrapper {
     z-index: 100;
-    background-color: var(--ion-color-primary-contrast);
+    background-color: var(--ion-background-color);
 
     .hour-lines {
       width: 40px;
       height: 70px;
-      border-right: 1px solid var(--ion-color-light);
+      border-right: 1px solid var(--ion-item-border-color);
       text-align: center;
       top: 0;
       position: absolute;
       font-weight: var(--font-weight-bold);
-      background-color: var(--calender-background-color);
+      background-color: var(--ion-background-color);
     }
   }
 
@@ -106,7 +106,7 @@ ion-content {
 }
 
 .date-header {
-  border-bottom: 1px solid var(--calender-date-line-gray);
+  border-bottom: 1px solid var(--ion-item-border-color);
   padding: var(--spacing-sm) auto;
   height: fit-content;
   font-weight: var(--font-weight-bold);

src/app/modules/schedule/page/grid/schedule-card.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -27,8 +27,8 @@ import {ScheduleEvent} from '../schema/schema';
 })
 export class ScheduleCardComponent implements OnInit {
   cardColor = {
-    isBlack: false,
+    isExercise: false,
-    isBlue: false,
+    isLecture: false,
     isDefault: false,
   };
 
@@ -91,8 +91,8 @@ export class ScheduleCardComponent implements OnInit {
     this.title = this.scheduleEvent.dateSeries.event.name;
 
     this.cardColor = {
-      isBlack: false,
+      isLecture: false,
-      isBlue: false,
+      isExercise: false,
       isDefault: false,
     };
 
@@ -102,10 +102,10 @@ export class ScheduleCardComponent implements OnInit {
         : ''
     ) {
       case 'lecture':
-        this.cardColor.isBlue = true;
+        this.cardColor.isLecture = true;
         break;
       case 'exercise':
-        this.cardColor.isBlack = true;
+        this.cardColor.isExercise = true;
         break;
       default:
         this.cardColor.isDefault = true;

src/app/modules/schedule/page/grid/schedule-card.html

@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -19,8 +19,8 @@
   [style.marginTop.px]="noOffset ? 0 : (fromY - fromHour) * scale - 5 + 45"
   [routerLink]="['/data-detail', scheduleEvent.dateSeries.uid]"
   [class.defaultCard]="cardColor.isDefault"
-  [class.blueCard]="cardColor.isBlue"
+  [class.lectureCard]="cardColor.isLecture"
-  [class.blackCard]="cardColor.isBlack"
+  [class.exerciseCard]="cardColor.isExercise"
   class="clickable"
 >
   <ion-card-header mode="md">

src/app/modules/schedule/page/grid/schedule-card.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -20,55 +20,23 @@ ion-card {
   margin-right: 0;
   border-radius: 0;
 
-  &.blueCard {
+  @each $name in lecture, exercise, default {
-    --background: var(--calender-blue-card);
+    &.#{$name}Card {
+      --background: var(--calender-#{$name}-card);
 
-    ion-card-title,
+      ion-card-title,
-    ion-card-subtitle span,
+      ion-card-subtitle span,
-    ion-card-content ion-note,
+      ion-card-content ion-note,
-    ion-card-content ion-text {
+      ion-card-content ion-text {
-      color: var(--ion-color-primary-contrast);
+        color: var(--calender-#{$name}-card-contrast);
-    }
+      }
 
-    &:after {
+      &:after {
-      background: linear-gradient(
+        background: linear-gradient(
-        rgba(var(--calender-blue-card-rgb), 0%),
+          rgba(var(--calender-#{$name}-card-rgb), 0%),
-        rgba(var(--calender-blue-card-rgb), 100%)
+          rgba(var(--calender-#{$name}-card-rgb), 100%)
-      );
+        );
-    }
+      }
-  }
-  &.blackCard {
-    --background: var(--calender-black-card);
-
-    ion-card-title,
-    ion-card-subtitle span,
-    ion-card-content ion-note,
-    ion-card-content ion-text {
-      color: var(--ion-color-primary-contrast);
-    }
-
-    &:after {
-      background: linear-gradient(
-        rgba(var(--calender-black-card-rgb), 0%),
-        rgba(var(--calender-black-card-rgb), 100%)
-      );
-    }
-  }
-  &.defaultCard {
-    --background: var(--calender-default-card);
-
-    ion-card-title,
-    ion-card-subtitle span,
-    ion-card-content ion-note,
-    ion-card-content ion-text {
-      color: var(--ion-color-light-contrast);
-    }
-
-    &:after {
-      background: linear-gradient(
-        rgba(var(--calender-light-card-rgb), 0%),
-        rgba(var(--calender-light-card-rgb), 100%)
-      );
     }
   }
 
@@ -78,10 +46,6 @@ ion-card {
     bottom: 0;
     height: 33%;
     width: 100%;
-    background: linear-gradient(
-      rgba(var(--calender-blue-card-rgb), 0%),
-      rgba(var(--calender-blue-card-rgb), 100%)
-    );
   }
 
   ion-card-header {

src/app/modules/schedule/page/grid/schedule-day.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -15,8 +15,8 @@
 
 :host {
   .day-wrapper {
-    border-left: 1px solid var(--calender-date-line-gray);
+    border-left: 1px solid var(--ion-item-border-color);
-    border-right: 1px solid var(--calender-date-line-gray);
+    border-right: 1px solid var(--ion-item-border-color);
 
     &.leftmost {
       border-left: unset;
@@ -28,15 +28,15 @@
       left: 0;
       height: fit-content;
       padding: var(--spacing-md);
-      border-bottom: 2px solid var(--ion-color-light);
+      border-bottom: 2px solid var(--ion-item-border-color);
       font-size: var(--font-size-md);
       font-weight: var(--font-weight-bold);
       text-align: center;
-      background-color: var(--ion-color-primary-contrast);
+      background-color: var(--ion-background-color);
       z-index: 3;
 
       &.leftmost {
-        border-left: 1px solid var(--ion-color-light);
+        border-left: 1px solid var(--ion-item-border-color);
       }
     }
   }

src/app/modules/settings/page/settings-page.html

@@ -50,7 +50,7 @@
 
       <calendar-sync-settings></calendar-sync-settings>
 
-      <ion-button color="medium" expand="block" fill="outline" (click)="presentResetAlert()">
+      <ion-button expand="block" (click)="presentResetAlert()" fill="outline">
         {{ 'settings.resetSettings' | translate }}
         <ion-icon slot="start" name="device_reset"></ion-icon>
       </ion-button>

src/app/modules/settings/page/settings-page.scss

@@ -49,7 +49,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
-    background: var(--ion-color-light);
+    background: var(--ion-item-background);
     @include border-radius-in-parallax(var(--border-radius-default));
 
     & > * {
@@ -62,7 +62,6 @@
       @include border-radius-in-parallax(var(--border-radius-default));
       overflow: hidden;
       position: relative;
-      background-color: var(--ion-color-primary-contrast);
       margin: 0;
 
       & > ion-thumbnail {

src/theme/color-processing.scss

@@ -0,0 +1,39 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// Setting this to false significantly reduces the amount of variables
+// being generated, but omits colors with -dark and -light suffixes, making
+// it impossible to access dark theme colors while in light theme and vice versa
+$include-theme-independent-colors: true;
+
+$tint-amount: 10%;
+$shade-amount: 12%;
+$placeholder-fade-amount: 20%;
+$box-shadow-fade-amount: 10%;
+$item-border-color-fade-amount: 15%;
+
+// The color chosen as contrast to another color
+$contrast-threshold: 128;
+$contrast-light-color: #fff;
+$contrast-dark-color: #000;
+
+$fade-threshold: 50%;
+
+// https://ionicframework.com/docs/theming/themes#stepped-colors
+$steps-start: 50;
+$steps-end: 950;
+$steps-step: 50;
+$steps-range-start: 0;
+$steps-range-end: 1000;

src/theme/colors.scss

@@ -0,0 +1,52 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+@import 'util/color-system';
+
+@include ion-color(primary, #3880ff);
+@include ion-color(secondary, #32db64);
+@include ion-color(tertiary, #f4a942);
+@include ion-color(success, #10dc60);
+@include ion-color(warning, #ffce00);
+@include ion-color(danger, #f53d3d);
+@include ion-color(light, #f4f4f4, #222);
+@include ion-color(medium, #989aa2, #989aa2);
+@include ion-color(dark, #222, #f4f4f4);
+
+@include ion-background-color(#f5f5f5, #000);
+@include ion-item-color(#fff, #0e0e0e);
+
+:root {
+  --calender-lecture-card: var(--ion-color-primary-tint);
+  --calender-lecture-card-rgb: var(--ion-color-primary-tint-rgb);
+  --calender-lecture-card-contrast: var(--ion-color-primary-contrast);
+  --calender-exercise-card: var(--ion-color-dark);
+  --calender-exercise-card-rgb: var(--ion-color-dark-rgb);
+  --calender-exercise-card-contrast: var(--ion-color-dark-contrast);
+  --calender-default-card: var(--ion-color-light);
+  --calender-default-card-rgb: var(--ion-color-light-rgb);
+  --calender-default-card-contrast: var(--ion-color-light-contrast);
+
+  --map-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
+  --linear-gradient: linear-gradient(135deg, var(--ion-color-primary-shade), var(--ion-color-tertiary));
+
+  // Shadows
+  --shadow-default: 0px 0px 10px 4px var(--ion-box-shadow-color);
+  --shadow-cards: 0 0 8px 1px var(--ion-box-shadow-color);
+  --shadow-cards-hover: 5px 5px 8px 4px var(--ion-box-shadow-color);
+  --shadow-profile-card: 0 2px 6px 6px rgba(0, 0, 0, 0.06), 0 4px 5px 12px rgba(0, 0, 0, 0.04),
+    0 5px 6px 20px rgba(0, 0, 0, 0.02);
+}

src/theme/common/_helper.scss

@@ -41,7 +41,7 @@
     li img {
       max-height: 1.25rem;
       vertical-align: text-bottom;
-      filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
+      // filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
     }
   }
 }

src/theme/common/_ion-content-parallax.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -15,7 +15,7 @@
 
 @mixin ion-content-parallax(
   $parallax-background: var(--ion-color-primary),
-  $background: var(--ion-color-light),
+  $background: var(--ion-background-color),
   $parallax-strength: 2,
   $overscroll-padding: 720px,
   $content-size: 230px

src/theme/common/_ion-menu.scss

@@ -0,0 +1,18 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+ion-menu {
+  --ion-item-background: var(--ion-background-color);
+  --ion-item-color: var(--ion-background-color-contrast);
+}

src/theme/common/_ion-searchbar.scss

@@ -0,0 +1,18 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+ion-searchbar {
+  --background: var(--ion-item-background) !important;
+}

src/theme/common/_leaflet-tile.scss

@@ -0,0 +1,25 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+@import '../util/dark';
+
+@include dark-only {
+  .leaflet-tile-container > .leaflet-tile {
+    filter: invert(1);
+  }
+}
+
+.map-container.leaflet-container {
+  background: var(--ion-background-color);
+}

src/theme/common/_typo.scss

@@ -1,3 +1,18 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
 body app-root {
   .title,
   .title[class*='sc-ion-label'] {
@@ -13,6 +28,6 @@ body app-root {
   }
 
   .title-sub {
-    color: var(--ion-color-text);
+    // color: var(--ion-color-medium);
   }
 }

src/theme/components/_card.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -15,7 +15,7 @@
 
 .card {
   box-shadow: var(--shadow-cards);
-  background-color: var(--ion-color-primary-contrast);
+  // background-color: var(--ion-item-color);
   border-radius: var(--border-radius-default);
   padding: var(--spacing-md);
   font-size: var(--font-size-sm);

src/theme/components/_image-dark.scss

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import '../util/dark';
+
+@include dark-only {
+  .image-dark {
+    filter: invert(1);
+  }
+}

src/theme/util/_color-system.scss

@@ -0,0 +1,120 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+@use 'sass:color';
+@use 'sass:math';
+@import '../color-processing';
+@import './dark';
+
+@function toRGB($color) {
+  @return red($color) + ',' + green($color) + ',' + blue($color);
+}
+
+@function toShade($color) {
+  @return darken($color, $shade-amount);
+}
+
+@function toTint($color) {
+  @return lighten($color, $tint-amount);
+}
+
+@function toContrast($color) {
+  $yiq: toYiq($color);
+  @return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
+}
+
+@function fade($color, $amount) {
+  @return if(lightness($color) > $fade-threshold, darken($color, $amount), lighten($color, $amount));
+}
+
+@function map-range($value, $input-min, $input-max, $output-min, $output-max) {
+  @return calc(($value - $input-min) * ($output-max - $output-min) / ($input-max - $input-min) + $output-min);
+}
+
+@function interpolate-colors($from, $to, $progress, $progress-min: 0, $progress-max: 100) {
+  @return rgb(
+    map-range($progress, $progress-min, $progress-max, red($from), red($to)),
+    map-range($progress, $progress-min, $progress-max, green($from), green($to)),
+    map-range($progress, $progress-min, $progress-max, blue($from), blue($to))
+  );
+}
+
+/**
+ * Converts a color to the YIQ color system
+ */
+@function toYiq($color) {
+  @return math.div(
+    (color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
+    1000
+  );
+}
+
+@mixin color-rgb($name, $color) {
+  #{$name}: #{$color};
+  #{$name}-rgb: #{toRGB($color)};
+}
+
+@mixin light-dark-scheme($light, $dark) {
+  :root,
+  .light {
+    @if ($include-theme-independent-colors == true) {
+      @content ($light, -light);
+      @content (if($dark == none, $light, $dark), -dark);
+    }
+    @content ($light, "");
+  }
+  @if ($dark != none) {
+    @include dark-only {
+      @content ($dark, "");
+    }
+  }
+}
+
+@mixin ion-color-step($name, $from, $to) {
+  @for $i from calc($steps-start / $steps-step) through calc($steps-end / $steps-step) {
+    $value: $i * $steps-step;
+    #{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
+  }
+}
+
+@mixin ion-color($name, $light, $dark: none) {
+  @include light-dark-scheme($light, $dark) using($color, $suffix) {
+    @include color-rgb(--ion-color-#{$name}#{$suffix}, $color);
+    @include color-rgb(--ion-color-#{$name}-shade#{$suffix}, toShade($color));
+    @include color-rgb(--ion-color-#{$name}-tint#{$suffix}, toTint($color));
+    @include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, toContrast($color));
+  }
+}
+
+@mixin ion-background-color($light, $dark: none) {
+  @include light-dark-scheme($light, $dark) using($color, $suffix) {
+    $text-color: toContrast($color);
+    @include color-rgb(--ion-background-color#{$suffix}, $color);
+    @include color-rgb(--ion-text-color#{$suffix}, $text-color);
+    @include color-rgb(--ion-box-shadow-color#{$suffix}, fade($color, $box-shadow-fade-amount));
+    @include color-rgb(--ion-placeholder-color#{$suffix}, fade($text-color, $placeholder-fade-amount));
+
+    @include ion-color-step(--ion-color-step#{$suffix}, $color, $text-color);
+  }
+}
+
+@mixin ion-item-color($light, $dark: none) {
+  @include light-dark-scheme($light, $dark) using($color, $suffix) {
+    @include color-rgb(--ion-item-background#{$suffix}, $color);
+    @include color-rgb(--ion-card-background#{$suffix}, $color);
+    @include color-rgb(--ion-item-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
+    @include color-rgb(--ion-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
+    @include color-rgb(--ion-item-color#{$suffix}, toContrast($color));
+  }
+}

src/theme/util/_dark.scss

@@ -0,0 +1,24 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+@mixin dark-only {
+  :root {
+    @media (prefers-color-scheme: dark) {
+      @content();
+    }
+  }
+  .dark {
+    @content();
+  }
+}

src/theme/variables.scss

@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -15,108 +15,10 @@
 
 // Ionic Variables and Theming. For more info, please see:
 // http://ionicframework.com/docs/theming/
+@import 'colors';
 
 /** Ionic CSS Variables **/
 :root {
-  /** primary **/
-  --ion-color-primary: #488aff;
-  --ion-color-primary-rgb: 72, 138, 255;
-  --ion-color-primary-contrast: #fff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3f79e0;
-  --ion-color-primary-tint: #5a96ff;
-
-  /** secondary **/
-  --ion-color-secondary: #32db64;
-  --ion-color-secondary-rgb: 50, 219, 100;
-  --ion-color-secondary-contrast: #fff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #2cc158;
-  --ion-color-secondary-tint: #47df74;
-
-  /** tertiary **/
-  --ion-color-tertiary: #f4a942;
-  --ion-color-tertiary-rgb: 244, 169, 66;
-  --ion-color-tertiary-contrast: #fff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #d7953a;
-  --ion-color-tertiary-tint: #f5b255;
-
-  /** success **/
-  --ion-color-success: #10dc60;
-  --ion-color-success-rgb: 16, 220, 96;
-  --ion-color-success-contrast: #fff;
-  --ion-color-success-contrast-rgb: 255, 255, 255;
-  --ion-color-success-shade: #0ec254;
-  --ion-color-success-tint: #28e070;
-
-  /** warning **/
-  --ion-color-warning: #ffce00;
-  --ion-color-warning-rgb: 255, 206, 0;
-  --ion-color-warning-contrast: #000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0b500;
-  --ion-color-warning-tint: #ffd31a;
-
-  /** danger **/
-  --ion-color-danger: #f53d3d;
-  --ion-color-danger-rgb: 245, 61, 61;
-  --ion-color-danger-contrast: #fff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #d83636;
-  --ion-color-danger-tint: #f65050;
-
-  /** light **/
-  --ion-color-light: #f4f4f4;
-  --ion-color-light-rgb: 244, 244, 244;
-  --ion-color-light-contrast: #000;
-  --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d7d7;
-  --ion-color-light-tint: #f5f5f5;
-
-  /** medium **/
-  --ion-color-medium: #989aa2;
-  --ion-color-medium-rgb: 152, 154, 162;
-  --ion-color-medium-contrast: #000;
-  --ion-color-medium-contrast-rgb: 0, 0, 0;
-  --ion-color-medium-shade: #86888f;
-  --ion-color-medium-tint: #a2a4ab;
-
-  /** dark **/
-  --ion-color-dark: #222;
-  --ion-color-dark-rgb: 34, 34, 34;
-  --ion-color-dark-contrast: #fff;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
-  --ion-color-dark-shade: #1e1e1e;
-  --ion-color-dark-tint: #383838;
-
-  /** StApps **/
-  --placeholder-gray: #f1f0ed;
-  --calender-date-line-gray: #dbdbdb;
-  --calender-background-color: #fff;
-  --calender-background-color-rgb: 255, 255, 255;
-  --calender-blue-card: var(--ion-color-primary-tint);
-  --calender-blue-card-rgb: 26, 113, 154;
-  --calender-black-card: #000000;
-  --calender-black-card-rgb: 0, 0, 0;
-  --calender-default-card: var(--ion-color-light);
-  /** Change the colors of the toolbar and the toolbar text here **/
-  --map-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
-
-  --ion-color-text: #000;
-  --ion-color-field-bg: #fff;
-  --ion-color-light-icon: #e6e6e6;
-
-  --linear-gradient: linear-gradient(135deg, var(--ion-color-primary-shade), var(--ion-color-tertiary));
-
-  // Shadows
-  --shadow-default: 0px 0px 10px 4px #ddd;
-  --shadow-cards: 0 0 8px 1px #ddd;
-  --shadow-cards-hover: 5px 5px 8px 4px #ccc;
-  --shadow-profile-card: 0 2px 6px 6px rgba(0, 0, 0, 0.06), 0 4px 5px 12px rgba(0, 0, 0, 0.04),
-    0 5px 6px 20px rgba(0, 0, 0, 0.02);
-
   // Fonts
   --ion-font-family: 'Barlow', Helvetica, Arial, sans-serif;
   --headline-font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
@@ -142,7 +44,6 @@
   --spacing-xl: 20px;
   --spacing-xxl: 24px;
 
-  --border-color-default: #dedd;
   --border-width-default: 1px;
   --border-radius-default: 8px;
 
@@ -176,8 +77,12 @@ body {
 @import 'common/ion-popover';
 @import 'common/ion-refresher';
 @import 'common/ion-toolbar';
+@import 'common/ion-menu';
 @import 'common/swiper';
 @import 'common/typography';
+@import 'common/leaflet-tile';
+@import 'common/ion-searchbar';
+@import 'components/image-dark';
 
 @import 'components/card';
 @import 'components/section';