Estoy creando una aplicación web usando Angular 12. En mi menú de navegación, quiero que el texto sea gris oscuro (# 161413). Sin embargo, el color de mi texto no se verá por debajo de cierto tono. Por ejemplo, puedo hacer que mi texto sea rojo "medio" (#670000), pero no puedo hacerlo rojo "oscuro" (#450000); el texto simplemente aparece en blanco por debajo del umbral #67xxxx. Comenté todo el css (incluido mi padre de styles.css) y dejé solo mi clase navmenu. Como nota al margen: parece que sigue habiendo cierta influencia de css en mi texto porque el rojo medio parece más claro de lo que debería ser, como una configuración de opacidad.
.navbar { color: black!important; justify-content: center; height: 20vh; } <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div class="navbar"> <div class="navmenu" *ngIf="atHome"> <button class="nav-button" routerLink="/">HOME</button> | <button class="nav-button" (click)="LeaveHome()" routerLink="/link1">LINK1</button> | <button class="nav-button" (click)="LeaveHome()" routerLink="/link2">LINK2</button> | <button class="nav-button" (click)="LeaveHome()" routerLink="/link3">LINK3</button> </div> <div class="burger-shield" *ngIf="!atHome" (click)="ReturnHome()"> <div class="burger-shield" routerLink="/"> </div> </div> </div>parece que funciona bien aquí. No nos estás dando suficiente información. Muestre un fragmento completo que muestre su problema
.navbar { color: red; justify-content: center; height: 20vh; } #a{ color:#450000; background-color:white; } #b{ color:#670000; background-color:white; } <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div class="navbar"> <div class="navmenu" *ngIf="atHome"> <button id='a' class="nav-button" routerLink="/">HOME</button> | <button id ='b' class="nav-button" (click)="LeaveHome()" routerLink="/link1">LINK1</button> | <button class="nav-button" (click)="LeaveHome()" routerLink="/link2">LINK2</button> | <button class="nav-button" (click)="LeaveHome()" routerLink="/link3">LINK3</button> </div> <div class="burger-shield" *ngIf="!atHome" (click)="ReturnHome()"> <div class="burger-shield" routerLink="/"> </div> </div> </div>Gracias por la contribución de todos. Este realmente me tuvo perplejo toda la mañana y su confusión (así como la mía) sobre por qué este fragmento de código aparentemente simple no funcionaba me obligó a pensar fuera de la caja. Recientemente descargué un complemento de Firefox llamado "darkreader" que crea un modo oscuro para cada sitio web que visito. Este complemento tiene un control deslizante para hacer que los tonos oscuros sean más brillantes hasta que alcanzan el umbral mencionado, momento en el que se aclaran.