Fix flash of unstyled content when loading the docs site - #473
Open
koic wants to merge 1 commit into
Open
Conversation
## Motivation and Context Opening https://ruby.sdk.modelcontextprotocol.io/ briefly showed a black half-circle at the bottom of the screen. The theme preference script in `head_custom.html` called `window.jtd.setTheme` on every page load. That helper rewrites the `href` of the render-blocking color stylesheet link, which detaches the loaded stylesheet and refetches it, so the page paints unstyled until the replacement arrives. During that window the search magnifier SVG, sized only by CSS, rendered at its fallback size and appeared as a large black half-circle near the bottom of the viewport. The site sets no `color_scheme`, so the default stylesheet is identical to the light one and most visitors paid the flash for a no-op swap. This change replaces the `jtd.setTheme` call with a local swapper that: - Leaves the stylesheet untouched when the resolved theme already matches (treating `default` as `light`). - Swaps non-destructively otherwise: the new link is inserted next to the current one and the old link is removed only after the new stylesheet has loaded. On error the new link is dropped and the page keeps its current styles. - Sets `blocking="render"` on the new link so supporting browsers hold first paint until the dark stylesheet arrives. It also pre-applies the dark background and text colors in `custom.scss`, keyed on the `data-theme` attribute that is set synchronously in the head, to soften the light-colored first paint for dark-preference visitors in browsers without `blocking="render"` support. ## How Has This Been Tested? Mirrored the live site locally, patched the inline script with the new code, and drove it in Chrome: - Unpatched baseline reproduced the old behavior: the link `href` was rewritten and `just-the-docs-light.css` was fetched in addition to `just-the-docs-default.css`. - Patched light and system-light loads keep the original link untouched with no extra stylesheet request. - Patched dark loads settle on a single `just-the-docs-dark.css` link, with `jtd.getTheme()` still reporting the right theme. - Rapid toggling keeps at most two color stylesheet links and settles on exactly one matching the final preference. - With `just-the-docs-dark.css` returning 404, the failed link is dropped and the page stays styled. ## Breaking Changes None.
atesgoral
approved these changes
Jul 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation and Context
Opening https://ruby.sdk.modelcontextprotocol.io/ briefly showed a black half-circle at the bottom of the screen. The theme preference script in
head_custom.htmlcalledwindow.jtd.setThemeon every page load. That helper rewrites thehrefof the render-blocking color stylesheet link, which detaches the loaded stylesheet and refetches it, so the page paints unstyled until the replacement arrives. During that window the search magnifier SVG, sized only by CSS, rendered at its fallback size and appeared as a large black half-circle near the bottom of the viewport.The site sets no
color_scheme, so the default stylesheet is identical to the light one and most visitors paid the flash for a no-op swap.This change replaces the
jtd.setThemecall with a local swapper that:defaultaslight).blocking="render"on the new link so supporting browsers hold first paint until the dark stylesheet arrives.It also pre-applies the dark background and text colors in
custom.scss, keyed on thedata-themeattribute that is set synchronously in the head, to soften the light-colored first paint for dark-preference visitors in browsers withoutblocking="render"support.How Has This Been Tested?
Mirrored the live site locally, patched the inline script with the new code, and drove it in Chrome:
hrefwas rewritten andjust-the-docs-light.csswas fetched in addition tojust-the-docs-default.css.just-the-docs-dark.csslink, withjtd.getTheme()still reporting the right theme.just-the-docs-dark.cssreturning 404, the failed link is dropped and the page stays styled.Breaking Changes
None.
Types of changes
Checklist