Method onThemeChange

static/settings.ts:508–546

()

    }

    private onThemeChange() {
        // We can be called when:
        // Site is initializing (settings and dropdowns are already done)
        // "Make all colour schemes available" changes
        // Selected theme changes
        const themeSelect = this.root.find('.theme');
        const colourSchemeSelect = this.root.find('.colourScheme');

        const oldScheme = colourSchemeSelect.val() as colour.AppTheme | undefined;
        const newTheme = themeSelect.val() as colour.AppTheme | undefined;

        // Small check to make sure we aren't getting something completely unexpected, like a string[] or number
        assert(
            isString(oldScheme) || oldScheme === undefined || oldScheme == null,
            'Unexpected value received from colourSchemeSelect.val()',
        );
        assert(
            isString(newTheme) || newTheme === undefined || newTheme == null,
            'Unexpected value received from colourSchemeSelect.val()',
        );

        this.fillColourSchemeSelector(colourSchemeSelect, newTheme);
        const newThemeStoredScheme = $.data(themeSelect, 'theme-' + newTheme) as colour.AppTheme | undefined;

        // If nothing else, set the new scheme to the first of the available ones
        let newScheme = colourSchemeSelect.first().val() as colour.AppTheme | undefined;
        // If we have one old one stored, check if it's still valid and set it if so
        if (newThemeStoredScheme && this.selectorHasOption(colourSchemeSelect, newThemeStoredScheme)) {
            newScheme = newThemeStoredScheme;
        } else if (isString(oldScheme) && this.selectorHasOption(colourSchemeSelect, oldScheme)) {
            newScheme = oldScheme;
        }

        if (newScheme) {
            colourSchemeSelect.val(newScheme);
        }

        colourSchemeSelect.trigger('change');
    }
}