Oleg Isonen
4a10645cb8
## Summary - Document the shared System, Light, and Dark interface-theme preference in the Dashboard and Builder guides. - Distinguish the Webstudio interface theme from the authored site's color scheme. - Explain experimental, nonstandard, and obsolete CSS property warnings in the Advanced Style panel. - Add focused, matching light- and dark-theme screenshots of the released Dashboard controls. ## Implementation The Dashboard guide owns the screenshot and complete theme explanation. The Builder anatomy guide documents the Builder menu path and links to that canonical section. The screenshot pair was captured from the released interface, cropped to the smallest useful region, and excludes account identity. ## Checklist - [x] Document the Dashboard theme path and available preferences. - [x] Document the Builder theme path and canvas-theme boundary. - [x] Explain CSS property status warnings and MDN compatibility details. - [x] Capture and visually review matching light/dark screenshots. - [x] Review documentation impact and update all affected authoritative `docs/` pages. - [x] Verify internal anchors, asset references, image formats, and the final diff. ## Verification - `git diff --check` — passed. - Screenshot assets — verified as 366×100 PNG files with equivalent UI state and no account identity. - Referenced files and `#interface-theme` / `#example-dark-mode` anchors — verified. - Repository formatter — not applicable; `oxfmt` excludes these documentation targets. - Tests — not run; documentation and screenshot assets only. - Fixture inputs and generated outputs — unaffected. ## Known limitations None. Closes #6297
description
| description |
|---|
| New to Webstudio? |
👋 Welcome
Our getting started guide will help you navigate through building your first Webstudio website. It covers the essentials of creating web designs and integrating third-party tools. You'll learn how to utilize Webstudio's unique features like Design tokens and Components, and how to contribute to the project.
{% content-ref url="basics/building-your-first-site.md" %} building-your-first-site.md {% endcontent-ref %}
{% content-ref url="university/foundations/" %} foundations {% endcontent-ref %}
{% content-ref url="university/core-components/" %} core-components {% endcontent-ref %}
{% content-ref url="university/cli.md" %} cli.md {% endcontent-ref %}
{% content-ref url="university/inception.md" %} inception.md {% endcontent-ref %}
{% content-ref url="university/radix/" %} radix {% endcontent-ref %}
{% content-ref url="university/marketplace.md" %} marketplace.md {% endcontent-ref %}
{% content-ref url="university/self-hosting/" %} self-hosting {% endcontent-ref %}
{% content-ref url="university/how-tos/" %} how-tos {% endcontent-ref %}
{% content-ref url="university/integrations/" %} integrations {% endcontent-ref %}
{% content-ref url="university/craft.md" %} craft.md {% endcontent-ref %}
{% content-ref url="basics/FAQ.md" %} FAQ.md {% endcontent-ref %}
Looking to contribute to Webstudio?
{% content-ref url="contributing/contributions.md" %} contributions.md {% endcontent-ref %}
{% content-ref url="contributing/marketplace.md" %} marketplace.md {% endcontent-ref %}