Mission 10: Fleet-Wide UI Directives
Directive 117 is live. The first step is to define the new fleet-wide color and theme variables in the central protocol file.
Mission Objective
Step 1 / 2
System Briefing: Centralized Theming
Astro-Logic Command has issued a new set of visual standards (Directive 117) for all interfaces. Manually updating thousands of lines of CSS is impossible. You must implement a centralized theming system using CSS Custom Properties (Variables).
Defining a Variable
You define a custom property using a double-hyphen prefix (--) and assign it a value, typically within the :root selector so it's globally available.
:root {
--primary-color: #00aaff;
}
Using a Variable
You use the variable's value with the var() function. The massive benefit is that if you update the variable in :root, the change propagates everywhere it's used.
.button {
background-color: var(--primary-color);
}