Theme button is now material button

This commit is contained in:
asuyou 2021-12-17 18:35:43 +02:00
parent 225d37f88d
commit 61900a7ba8
4 changed files with 39 additions and 19 deletions

48
ui/package-lock.json generated
View file

@ -23,6 +23,7 @@
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"bootstrap": "^4.5.0",
"bootstrap-icons": "^1.7.2",
"ngx-cookie-service": "^12.0.3",
"ngx-socket-io": "^4.1.0",
"rxjs": "~6.6.0",
@ -3759,6 +3760,14 @@
"popper.js": "^1.16.1"
}
},
"node_modules/bootstrap-icons": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
"integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ==",
"engines": {
"node": ">=10"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -8709,9 +8718,9 @@
"dev": true
},
"node_modules/json-schema": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
"integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
"dev": true
},
"node_modules/json-schema-traverse": {
@ -8771,18 +8780,18 @@
]
},
"node_modules/jsprim": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
"integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
"integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
"dev": true,
"engines": [
"node >=0.6.0"
],
"dependencies": {
"assert-plus": "1.0.0",
"extsprintf": "1.3.0",
"json-schema": "0.2.3",
"json-schema": "0.4.0",
"verror": "1.10.0"
},
"engines": {
"node": ">=0.6.0"
}
},
"node_modules/jszip": {
@ -20239,6 +20248,11 @@
"integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
"requires": {}
},
"bootstrap-icons": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.2.tgz",
"integrity": "sha512-NiR2PqC73AQOPdVSu6GJfnk+hN2z6powcistXk1JgPnKuoV2FSdSl26w931Oz9HYbKCcKUSB6ncZTYJAYJl3QQ=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -24056,9 +24070,9 @@
"dev": true
},
"json-schema": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
"integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
"dev": true
},
"json-schema-traverse": {
@ -24109,14 +24123,14 @@
"dev": true
},
"jsprim": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
"integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
"integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
"dev": true,
"requires": {
"assert-plus": "1.0.0",
"extsprintf": "1.3.0",
"json-schema": "0.2.3",
"json-schema": "0.4.0",
"verror": "1.10.0"
}
},

View file

@ -26,6 +26,7 @@
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"bootstrap": "^4.5.0",
"bootstrap-icons": "^1.7.2",
"ngx-cookie-service": "^12.0.3",
"ngx-socket-io": "^4.1.0",
"rxjs": "~6.6.0",

View file

@ -13,8 +13,12 @@
</div>
-->
<div>
<span class="text-white">Toggle Theme</span>
<input style="margin: 1rem;" type="checkbox" [ngModel]="this.darkMode" aria-label="Toggle theme" (change)="themeChanged()">
<button class="btn btn-secondary" aria-label="Toggle theme" (click)="themeChanged()">
<i *ngIf="darkMode; else sunIcon" class="bi bi-sun-fill"></i>
<ng-template #sunIcon>
<i class="bi bi-moon-stars-fill"></i>
</ng-template>
</button>
</div>
</nav>

View file

@ -2,3 +2,4 @@
/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap'
@import '~bootstrap-icons/font/bootstrap-icons.css'