Method putRootVars

src/inject/dynamic-theme/variables.ts:588–620

(styleElement: HTMLStyleElement, theme: Theme)

    }

    putRootVars(styleElement: HTMLStyleElement, theme: Theme): void {
        const declarations = new Map<string, string>();
        iterateCSSDeclarations(document.documentElement.style, (property, value) => {
            if (isVariable(property)) {
                if (this.isVarType(property, VAR_TYPE_BG_COLOR)) {
                    declarations.set(wrapBgColorVariableName(property), tryModifyBgColor(value, theme));
                }
                if (this.isVarType(property, VAR_TYPE_TEXT_COLOR)) {
                    declarations.set(wrapTextColorVariableName(property), tryModifyTextColor(value, theme));
                }
                if (this.isVarType(property, VAR_TYPE_BORDER_COLOR)) {
                    declarations.set(wrapBorderColorVariableName(property), tryModifyBorderColor(value, theme));
                }
                this.subscribeForVarTypeChange(property, this.onRootVariableDefined);
            }
        });
        const cssLines: string[] = [];
        cssLines.push(':root {');
        for (const [property, value] of declarations) {
            cssLines.push(`    ${property}: ${value};`);
        }
        cssLines.push('}');
        const cssText = cssLines.join('\n');
        const sheet = styleElement.sheet;
        if (sheet) {
            if (sheet.cssRules.length > 0) {
                sheet.deleteRule(0);
            }
            sheet.insertRule(cssText);
        } else {
            styleElement.textContent = cssText;
        }
    }
}

export const variablesStore = new VariablesStore();