Angular 2 Theme Switcher Local Storage

I am hoping someone can help me with this as I can not logically work out how to do it.

I have a checkbox in my Angular 2 app footer, which switches my app to 'Dark Mode' when checked, calling the 'Change' event on the checkbox like so in my footercomponent.html file:

footercomponent.html

<input id="themeswitch" type="checkbox" name="setting-theme" [(ngModel)]="currentTheme" (change)="checked(no,$event)" />

This references 'checked' function in my footercomponent.ts file which runs an if statement to set the theme from theme A (light theme) to theme B (dark theme). It also then adds the value A or B to local storage under a key value pair called, theme: A or theme: B, Depending on whether the checkbox is checked. Theme changing is all working great, but knowing how to recall the value in local storage and apply it somewhere is puzzling me.

footercomponent.ts

    export class FooterComponent implements OnInit {

    constructor(public settings: SettingsService, public themes: ThemesService,) { 

    }

    ngOnInit() {

    }

    // Theme Switch
    checked(value,event){

        if(event.target.checked){
            this.themes.setTheme('B');
            //Add Theme value to local storage
            localStorage.setItem('theme', 'B');
            // document.getElementById("myCheck").checked = true;
        }
        else if (!event.target.checked){
            this.themes.setTheme('A');
            //Add Theme value to local storage
            localStorage.setItem('theme', 'A');
        }

    }


}

I have a theme 'Service' setup which contains the default theme and also runs a switch statement to select the desired theme and apply it to app depending on the choice from the previously selected checkbox.

theme.service.ts

const themeA = require('../../shared/styles/themes/theme-a.scss');
const themeB = require('../../shared/styles/themes/theme-b.scss');


@Injectable()
export class ThemesService {

    styleTag: any;
    defaultTheme: string = 'A';



    constructor() {
        this.createStyle();
        this.setTheme(this.defaultTheme);
    }



    private createStyle() {
        const head = document.head || document.getElementsByTagName('head')[0];
        this.styleTag = document.createElement('style');
        this.styleTag.type = 'text/css';
        this.styleTag.id = 'appthemes';
        head.appendChild(this.styleTag);
    }

    setTheme(name) {

        switch (name) {
            case 'A':
                this.injectStylesheet(themeA);

                break;
            case 'B':
                this.injectStylesheet(themeB);

                break;
        }
    }

    injectStylesheet(css) {
        this.styleTag.innerHTML = css;
    }

    getDefaultTheme() {
        return this.defaultTheme;
    }

}

I can see in my browser in the local storage settings panel that the values are being updated as I check or uncheck the checkbox, so that part is working fine, I just cant in my head work out where or how to call or reference the value from local storage in my code to apply that value to the users checkbox selection if that makes sense?

So when a user checks the box, it applies the dark theme, when they refresh the browser, dark theme is still selected. I understand that its an angular app and they may not even refresh the page due to all functionality being dynamically loaded, but just incase I would love to work this out, hopefully with a little help from SO.

Thank you guys, really appreciate any support.