Is there a more efficient method for updating icon paths when switching themes in ThemeService?

Question

Is there a more efficient method for updating icon paths when switching themes in ThemeService?

I have developed a theme change service for switching icons. Within my theme service, I use BehaviorSubject to manage the path of icons - light theme icons are stored in "assets/light-icons" and dark theme icons are stored in "assets/dark-icons." I inject my service into every component's constructor, passing the folder name as a string based on the selected theme.

Here is an example TypeScript class:

constructor(public themeService: ThemeService) {}

And here is an example HTML class:

<img [src]="'assets/'+themeService.functionWhichReturnsSubjectValueAsString+'/target_icon.svg'">

While this solution works well, I am curious if there is a more efficient approach. Currently, I need to inject my service in each component that contains icons or images. Is it possible to manage this at the parent level?

angular typescript

Answer 1

Answer №1

You can also utilize css variables without specifying a value for [src] or [attr.src]. For more information, refer to this thread on Stack Overflow

~~Additionally, you need to pass it as SecurityTrustUrl.~~ Consider a styles.css like this:

body {
  --background-color: #fff;
  --text-color: #212a2e;
  --link-color: #543fd7;
  --url-path:'https://picsum.photos/'
}

body.dark {
  --background-color: #212a2e;
  --text-color: #F7F8F8;
  --link-color: rgb(130, 255, 161);
  --url-path:'https://dummyimage.com/'
}
body{
  color:var(--text-color);
  background-color:var(--background-color);
}
a{
  color:var(--link-color);
}

A sample component could look like this:

customProps = window.getComputedStyle(document.body);
constructor(public satinizer:DomSanitizer){}
toogle()
{
document.body.classList.toggle('dark');
}
getImg(value:String)
{
return this.satinizer.bypassSecurityTrustUrl(
this.customProps.getPropertyValue('--url-path').replace("'","").replace("'","")
+value);
}

Then use it like:

<img [attr.src]="getImg('200')">

Check out the example on StackBlitz

Update Actually, SecurityTrustUrl is not necessary

Try something like this instead:

 <img [attr.src]="'http://' + customProps.getPropertyValue('--url-path') + '200'">

where the properties are defined as:

--url-path:picsum.photos/;

//or 

--url-path:dummyimage.com/;

Answer 2

You can also utilize css variables without specifying a value for [src] or [attr.src]. For more information, refer to this thread on Stack Overflow

~~Additionally, you need to pass it as SecurityTrustUrl.~~ Consider a styles.css like this:

body {
  --background-color: #fff;
  --text-color: #212a2e;
  --link-color: #543fd7;
  --url-path:'https://picsum.photos/'
}

body.dark {
  --background-color: #212a2e;
  --text-color: #F7F8F8;
  --link-color: rgb(130, 255, 161);
  --url-path:'https://dummyimage.com/'
}
body{
  color:var(--text-color);
  background-color:var(--background-color);
}
a{
  color:var(--link-color);
}

A sample component could look like this:

customProps = window.getComputedStyle(document.body);
constructor(public satinizer:DomSanitizer){}
toogle()
{
document.body.classList.toggle('dark');
}
getImg(value:String)
{
return this.satinizer.bypassSecurityTrustUrl(
this.customProps.getPropertyValue('--url-path').replace("'","").replace("'","")
+value);
}

Then use it like:

<img [attr.src]="getImg('200')">

Check out the example on StackBlitz

Update Actually, SecurityTrustUrl is not necessary

Try something like this instead:

 <img [attr.src]="'http://' + customProps.getPropertyValue('--url-path') + '200'">

where the properties are defined as:

--url-path:picsum.photos/;

//or 

--url-path:dummyimage.com/;

Is there a more efficient method for updating icon paths when switching themes in ThemeService?

Answer №1

Similar questions

What is the best way to clear data in a block after it has been clicked

Does Highchart offer support for drilling down into sub-categories?

Exploring the functionality of this TypeScript code: What's the distinction between { [key: string]: string }[] and { prop1: string, prop2: string }[]

Struggling to enter the command `zip` and accurately anticipating when inference fails in overloaded functions involving generics

Upgrade from RxJS 4 to RxJS 6

Tips for embedding Apache Superset visualizations into an Angular 7 app: Overcoming hurdles with authentication and headers

Utilizing Angular's asynchronous validators to handle incoming response data

Navigating a page without embedding the URL in react-router-dom

How to style the initial selection in a p-dropdown from PrimeNG using CSS

The error message stating that 'children' property is missing in the 'IntrinsicAttributes' type is displayed

Uncertainty arises when trying to understand the callback function supplied to the `addEventListener` method in JavaScript

Installing a 3rd party plugin in Angular using the Angular-cli tool

Encountering the error message "No 'Access-Control-Allow-Origin' header is found on the requested resource."

Ways to troubleshoot this issue: encountering error in Angular v11 - The Schematic workflow has encountered a failure

Error: The service object is unable to bind to ngModel in Angular 5 due to a TypeError, as it cannot read the property 'state' of undefined within Object.eval

Add 'http://' to hrefs that do not have a protocol specified in Angular

Make sure to clear the browser cache after you have successfully deployed your Angular 7 application on I

How to handle a Node.js promise that times out if execution is not finished within a specified timeframe

Angular2 - Retrieve data in XLS format from RestService并下载

Ionic 3 Storage Timing Explained