updateStyle() — astro Function Reference

Architecture documentation for the updateStyle() function in toggle.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient called by 2

Entity Profile

DevToolbar→ ToolbarClient→ updateStyle() — astro Function Reference

Dependency Diagram

graph TD
  65bced3c_5cdf_2f87_978a_35119d4e60e1["updateStyle()"]
  8a84a891_ea62_56c8_0c0a_767465d852c4["DevToolbarToggle"]
  65bced3c_5cdf_2f87_978a_35119d4e60e1 -->|defined in| 8a84a891_ea62_56c8_0c0a_767465d852c4
  0576d686_72ce_a5ef_f456_95d87f88f28e["toggleStyle()"]
  0576d686_72ce_a5ef_f456_95d87f88f28e -->|calls| 65bced3c_5cdf_2f87_978a_35119d4e60e1
  1873a26d_332d_3df2_d007_7d21cb41d8e8["connectedCallback()"]
  1873a26d_332d_3df2_d007_7d21cb41d8e8 -->|calls| 65bced3c_5cdf_2f87_978a_35119d4e60e1
  style 65bced3c_5cdf_2f87_978a_35119d4e60e1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts lines 110–121

	updateStyle() {
		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
		if (style) {
			style.innerHTML = `
			:host {
				--bg-on: var(--${this.toggleStyle}-bg-on);
				--border-off: var(--${this.toggleStyle}-border-off);
				--border-on: var(--${this.toggleStyle}-border-on);
			}
		`;
		}
	}