Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Add support for darkmode

Browse Source
This commit is contained in:
Teriuihi 2025-06-22 23:15:06 +02:00
parent 5284d498f3
commit 9abd570b87
10 changed files with 300 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/particles/components/frames/frames.component.html
View File

@ -1,4 +1,5 @@
<mat-card>
<div class="card-div">
<mat-card>
<mat-card-header>
<mat-card-title>Frames</mat-card-title>
</mat-card-header>
@ -43,4 +44,5 @@
</div>
</div>
</mat-card-content>
</mat-card>
</mat-card>
</div>

13
frontend/src/app/particles/components/frames/frames.component.scss
View File

@ -34,7 +34,7 @@
.no-particles {
padding: 20px;
text-align: center;
color: #888;
color: var(--color-primairy);
}
.frame-actions {
@ -48,3 +48,14 @@
display: flex;
justify-content: center;
}
.card-div {
mat-card {
background-color: var(--color-primary);
color: var(--font-color);
}
}
span {
color: var(--font-color);
}

6
frontend/src/app/particles/components/particle/particle.component.html
View File

@ -1,4 +1,5 @@
<mat-card class="color-picker-card">
<div class="card-div">
<mat-card class="color-picker-card">
<mat-card-header>
<mat-card-title>Particle Color</mat-card-title>
</mat-card-header>
@ -8,4 +9,5 @@
<span>Selected Color: {{ selectedColor }}</span>
</div>
</mat-card-content>
</mat-card>
</mat-card>
</div>

11
frontend/src/app/particles/components/particle/particle.component.scss
View File

@ -15,3 +15,14 @@
border-radius: 4px;
cursor: pointer;
}
.card-div {
mat-card {
background-color: var(--color-primary);
color: var(--font-color);
}
}
span {
color: var(--font-color);
}

8
frontend/src/app/particles/components/properties/properties.component.html
View File

@ -1,4 +1,5 @@
<mat-card>
<div class="card-div">
<mat-card>
<mat-card-header>
<mat-card-title>Particle Properties</mat-card-title>
</mat-card-header>
@ -85,7 +86,8 @@
</div>
<div class="form-row">
<mat-checkbox [(ngModel)]="particleData.stationary">Stationary</mat-checkbox>
<mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
</div>
</mat-card-content>
</mat-card>
</mat-card>
</div>

14
frontend/src/app/particles/components/properties/properties.component.scss
View File

@ -0,0 +1,14 @@
.form-row {
margin-bottom: 15px;
}
.card-div {
mat-card {
background-color: var(--color-primary);
color: var(--font-color);
}
}
span {
color: var(--font-color);
}

2
frontend/src/app/particles/components/render-container/render-container.component.html
View File

@ -1,5 +1,6 @@
<div #rendererContainer class="renderer-container">
<div class="plane-controls-overlay">
<div class="button-row">
<button mat-mini-fab color="primary" (click)="resetCamera()"
matTooltip="Reset camera">
<mat-icon>location_searching</mat-icon>
@ -9,6 +10,7 @@
[matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
<mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
</button>
</div>
<div *ngIf="isPlaneLocked" class="plane-orientation-buttons">
<button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_ABOVE)"

11
frontend/src/app/particles/components/render-container/render-container.component.scss
View File

@ -3,7 +3,7 @@
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
background-color: #f0f0f0;
background-color: var(--color-primairy);
display: flex;
justify-content: center;
align-items: center;
@ -21,6 +21,13 @@
z-index: 10;
}
.button-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 10px;
}
.plane-orientation-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
@ -42,5 +49,5 @@
.plane-orientation-buttons button.active {
opacity: 1;
transform: scale(1.1);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px var(--color-tertiary);
}

98
frontend/src/app/particles/particles.component.scss
View File

@ -16,10 +16,14 @@
gap: 20px;
}
label, span {
color: var(--font-color);
}
.plane-controls {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
background-color: var(--color-primairy);
border-radius: 4px;
display: flex;
align-items: center;
@ -30,10 +34,92 @@
flex: 1;
}
.form-row {
margin-bottom: 15px;
:host ::ng-deep {
.mdc-text-field--outlined {
background-color: var(--color-primary);
}
.mdc-text-field--outlined .mdc-floating-label,
.mdc-text-field--outlined .mdc-text-field__input,
.mat-mdc-form-field-label,
.mat-mdc-select-value-text,
.mat-mdc-select-arrow,
.mat-mdc-checkbox-label,
.mat-mdc-card-header,
.mat-mdc-card-title,
.mat-mdc-card-content {
color: var(--font-color) !important;
}
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: var(--font-color) !important;
}
// Fix for dropdown menu
.mat-mdc-select-panel {
background-color: var(--color-primary) !important;
}
.mat-mdc-option {
color: var(--font-color) !important;
}
.mat-mdc-option:hover:not(.mdc-list-item--disabled) {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.mat-mdc-option.mat-mdc-option-active {
background-color: rgba(255, 255, 255, 0.2) !important;
}
.mat-mdc-select-panel {
background-color: var(--color-primary) !important;
}
.mat-mdc-option {
color: var(--font-color) !important;
}
.mat-mdc-option:hover:not(.mdc-list-item--disabled) {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.mat-mdc-option.mat-mdc-option-active {
background-color: rgba(255, 255, 255, 0.2) !important;
}
.mat-mdc-tab {
color: var(--font-color) !important;
}
.mat-mdc-tab-header {
background-color: var(--color-primary);
}
.mat-mdc-tab-label-container {
background-color: var(--color-primary);
}
.mdc-tab__content .mdc-tab__text-label {
color: var(--font-color) !important;
}
.mat-mdc-tab-label, .mat-mdc-tab-link {
color: var(--font-color) !important;
}
.mat-mdc-tab-group.mat-primary .mat-mdc-tab:not(.mat-mdc-tab-disabled) .mdc-tab-indicator__content--underline {
border-color: var(--font-color) !important;
}
.mat-mdc-tab-body-content {
background-color: var(--color-primary);
}
.mat-icon {
color: var(--font-color);
}
}
mat-form-field {
width: 100%;
}

18
frontend/src/app/particles/services/renderer.service.ts
View File

@ -1,6 +1,8 @@
import {ElementRef, Injectable} from '@angular/core';
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {ThemeService} from '../../theme/theme.service';
import {THEME_MODE} from '../../constant';
/**
* Service responsible for managing the Three.js rendering environment
@ -13,6 +15,16 @@ export class RendererService {
camera!: THREE.PerspectiveCamera;
renderer!: THREE.WebGLRenderer;
controls!: OrbitControls;
private currentTheme: THEME_MODE = THEME_MODE.LIGHT;
constructor(private themeService: ThemeService) {
this.themeService.theme$.subscribe(theme => {
this.currentTheme = theme;
if (this.scene) {
this.setBackgroundColor(theme);
}
})
}
/**
* Initializes the Three.js scene, camera, renderer, and controls
@ -20,7 +32,7 @@ export class RendererService {
initializeRenderer(container: ElementRef): void {
// Create scene
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xf0f0f0);
this.setBackgroundColor(this.currentTheme);
// Get container dimensions
const containerWidth = container.nativeElement.clientWidth;
@ -54,6 +66,10 @@ export class RendererService {
this.addLights();
}
private setBackgroundColor(theme: THEME_MODE) {
this.scene.background = new THREE.Color(this.currentTheme === THEME_MODE.DARK ? 0x242526 : 0xFBFBFE);
}
/**
* Resets the camera to its default position and orientation.
*/