Set Theme light only in single page
Hi there,
i would like to know how to add light theme (as always) for login page.
The rest of the pages it will works as it is selection selected by user dark or light theme.
https://preview.keenthemes.com/html/metronic/docs/getting-started/dark-mode
i referring to above url but not working.
Please advise.
Replies (7)
Able to show only light theme in login page only. as below but not sure is this fine or not..
data-bs-theme="light">
<!--begin::Content-->
<div class="d-flex flex-column flex-center text-center p-10">
<!--begin::Wrapper-->
<div class="card card-flush w-lg-450px py-3" data-bs-theme="light">
<div class="card-body py-15 py-lg-10">
<router-outlet></router-outlet>
</div>
</div>
<!--end::Wrapper-->
</div>
<!--end::Content-->
Hi,
To achieve this, you'll need to manually assign the data-bs-theme="light" attribute to the HTML tag on the login page.
Open the TypeScript file of your login component (e.g., login.component.ts).
Import the necessary Angular modules and classes:
import { Component, OnInit, Renderer2 } from "@angular/core";In your component class, inject the Renderer2 service and the Document object:
@Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {
constructor(private renderer: Renderer2, private document: Document) { }
ngOnInit(): void {
// Manually set data-bs-theme attribute to "light"
this.renderer.setAttribute(this.document.documentElement, "data-bs-theme", "light");
}
// Other login component code here
}With these steps, the light theme will be applied only to the login page, and the rest of the pages will continue to use the user-selected dark or light theme.
Remember to adjust the file paths and component names according to your project structure.
If you encounter any issues or need further assistance, feel free to ask.
Thanks
hi Faizal,
i did as mentioned,and i got error in console browser
src_app_modules_auth_auth_module_ts.js:2 ERROR NullInjectorError: R3InjectorError(AuthModule)[Document -> Document -> Document -> Document]:
NullInjectorError: No provider for Document!
at NullInjector.get (core.mjs:7493:27)
at R3Injector.get (core.mjs:7914:33)
at R3Injector.get (core.mjs:7914:33)
at R3Injector.get (core.mjs:7914:33)
at R3Injector.get (core.mjs:7914:33)
at ChainedInjector.get (core.mjs:12084:36)
at lookupTokenUsingModuleInjector (core.mjs:3201:39)
at getOrCreateInjectable (core.mjs:3246:12)
at Module.ɵɵdirectiveInject (core.mjs:10041:12)
at NodeInjectorFactory.LoginComponent_Factory [as factory] (login.component.ts:14:28)below is what i did
import { Component, OnInit, OnDestroy, Renderer2, ChangeDetectorRef } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { Subscription, Observable } from "rxjs";
import { first } from "rxjs/operators";
import { UserModel } from "../../models/user.model";
import { AuthService } from "../../services/auth.service";
import { ActivatedRoute, Router } from "@angular/router";
@Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.scss"],
})
export class LoginComponent implements OnInit, OnDestroy {constructor(
private fb: FormBuilder,
private authService: AuthService,
private route: ActivatedRoute,
private router: Router,
private renderer: Renderer2,
private document: Document
) {
this.isLoading$ = this.authService.isLoading$;
// redirect to home if already logged in
if (this.authService.currentUserValue) {
this.router.navigate(["/"]);
}
}ngOnInit(): void {
// Manually set data-bs-theme attribute to "light"
this.renderer.setAttribute(this.document.documentElement, "data-bs-theme", "light");
this.initForm();
// get return url from route parameters or default to "/"
this.returnUrl =
this.route.snapshot.queryParams["returnUrl".toString()] || "/";
}any update on this please?
Hi,
You can also utilize the @Inject decorator to precisely define the document object as a dependency in your component's constructor. Here's an example:
import { Component, OnInit, Renderer2, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common"; // Import the DOCUMENT tokenconstructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) { }This code line instructs Angular to inject the document object using the DOCUMENT token into your component. The DOCUMENT token is an inherent token that symbolizes the global document object. To access it, you'll need to import it from the @angular/common package.
Thanks
Thanks Faizal... it is works!
You're welcome! I'm glad to hear that it's working now. If you have any more questions or need further assistance, feel free to ask.
