updateStyle() — astro Function Reference

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

Function typescript DevToolbar ToolbarClient called by 2

Entity Profile

DevToolbar→ ToolbarClient→ updateStyle() — astro Function Reference

Dependency Diagram

graph TD
  700bfb4d_7404_0177_04f7_28819be7ca66["updateStyle()"]
  72415224_142e_1e36_4c77_8fc883507bf2["DevToolbarHighlight"]
  700bfb4d_7404_0177_04f7_28819be7ca66 -->|defined in| 72415224_142e_1e36_4c77_8fc883507bf2
  a297cf54_f189_0e1c_c1aa_070ad4bd7ea9["highlightStyle()"]
  a297cf54_f189_0e1c_c1aa_070ad4bd7ea9 -->|calls| 700bfb4d_7404_0177_04f7_28819be7ca66
  e2666104_6dd2_32ae_a5dd_0cc91aef3385["connectedCallback()"]
  e2666104_6dd2_32ae_a5dd_0cc91aef3385 -->|calls| 700bfb4d_7404_0177_04f7_28819be7ca66
  style 700bfb4d_7404_0177_04f7_28819be7ca66 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts lines 88–98

	updateStyle() {
		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');

		if (style) {
			style.innerHTML = `
			:host {
				--background: var(--${this.highlightStyle}-background);
				--border: var(--${this.highlightStyle}-border);
			}`;
		}
	}