docs: fix Cloudflare logo not updating with theme toggle#7118
Open
kasimthecoder wants to merge 4 commits intoTanStack:mainfrom
Open
docs: fix Cloudflare logo not updating with theme toggle#7118kasimthecoder wants to merge 4 commits intoTanStack:mainfrom
kasimthecoder wants to merge 4 commits intoTanStack:mainfrom
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughReplaced Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
docs/start/framework/solid/guide/hosting.md (1)
200-206: Consider updating Railway logo for consistency.Similar to the React hosting guide, the Railway section still uses
<picture>withprefers-color-scheme, which only responds to system preference. Consider updating to the dual<img>approach for consistency.Note: The Solid guide uses different Railway image filenames (
railway-dark.svg/railway-light.svg) compared to the React guide (railway-white.svg/railway-black.svg). Ensure you use the correct Solid-specific filenames if updating.♻️ Suggested update for consistency
-<a href="https://railway.com?utm_source=tanstack" alt="Railway Logo"> - <picture> - <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" width="280"> - <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" width="280"> - <img alt="Railway logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" width="280"> - </picture> -</a> +<a href="https://railway.com?utm_source=tanstack"> + <img + class="block dark:hidden" + src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" + width="280" + alt="Railway logo" + /> + <img + class="hidden dark:block" + src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" + width="280" + alt="Railway logo" + /> +</a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/start/framework/solid/guide/hosting.md` around lines 200 - 206, Replace the <picture> block that uses prefers-color-scheme with the same dual-<img> pattern used in the React guide: remove the <picture> element and render two <img> elements (one for dark, one for light) that match the Solid guide filenames; ensure you reference the Solid-specific assets ("railway-dark.svg" and "railway-light.svg") for src/srcset and set appropriate alt/width attributes so the Railway logo display is consistent with the React hosting guide.docs/start/framework/react/guide/hosting.md (1)
205-211: Consider updating Railway logo for consistency.The Railway section still uses the
<picture>element withprefers-color-scheme, which means it responds only to system theme preference, not the site's theme toggle. For consistency with the Cloudflare and Netlify sections (and to fully address the pattern that caused issue#693), consider updating this to use the same dual<img>approach.♻️ Suggested update for consistency
-<a href="https://railway.com?utm_source=tanstack" alt="Railway Logo"> - <picture> - <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-white.svg" width="280"> - <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-black.svg" width="280"> - <img alt="Railway logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" width="280"> - </picture> -</a> +<a href="https://railway.com?utm_source=tanstack"> + <img + class="block dark:hidden" + src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-black.svg" + width="280" + alt="Railway logo" + /> + <img + class="hidden dark:block" + src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-white.svg" + width="280" + alt="Railway logo" + /> +</a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/start/framework/react/guide/hosting.md` around lines 205 - 211, Replace the <picture> element in the Railway anchor with the same dual-<img> pattern used for Cloudflare/Netlify so the site theme toggle (not just prefers-color-scheme) controls which logo shows; remove the <picture>/<source> tags and add two <img> elements pointing to the dark and light SVGs (railway-white.svg / railway-black.svg or railway-light.svg), preserve the alt text ("Railway logo") and width, and apply the same CSS visibility classes/utility names used elsewhere so the site theme toggle hides/shows the correct image.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/start/framework/react/guide/hosting.md`:
- Line 126: The anchor tag linking to Netlify ("<a
href=\"https://www.netlify.com?utm_source=tanstack\" alt=\"Netlify Logo\">")
contains an invalid alt attribute; remove the alt attribute from this <a>
element so the tag becomes a valid anchor without alt (matching the Cloudflare
section's correction).
In `@docs/start/framework/solid/guide/hosting.md`:
- Line 121: Remove the invalid alt attribute from the anchor element currently
written as <a href="https://www.netlify.com?utm_source=tanstack" alt="Netlify
Logo">; update the tag to <a href="https://www.netlify.com?utm_source=tanstack">
and, if there is an <img> inside that anchor, ensure that <img> has an
appropriate alt attribute (e.g., alt="Netlify Logo") so accessibility is
preserved.
- Line 48: Remove the stray test text "testing updats" (the accidental test
content) from the documentation — delete that line/entry where it appears,
ensure the surrounding Markdown remains valid (no leftover blank lines or broken
formatting), and preview/build the docs to confirm no other test artifacts
remain.
---
Nitpick comments:
In `@docs/start/framework/react/guide/hosting.md`:
- Around line 205-211: Replace the <picture> element in the Railway anchor with
the same dual-<img> pattern used for Cloudflare/Netlify so the site theme toggle
(not just prefers-color-scheme) controls which logo shows; remove the
<picture>/<source> tags and add two <img> elements pointing to the dark and
light SVGs (railway-white.svg / railway-black.svg or railway-light.svg),
preserve the alt text ("Railway logo") and width, and apply the same CSS
visibility classes/utility names used elsewhere so the site theme toggle
hides/shows the correct image.
In `@docs/start/framework/solid/guide/hosting.md`:
- Around line 200-206: Replace the <picture> block that uses
prefers-color-scheme with the same dual-<img> pattern used in the React guide:
remove the <picture> element and render two <img> elements (one for dark, one
for light) that match the Solid guide filenames; ensure you reference the
Solid-specific assets ("railway-dark.svg" and "railway-light.svg") for
src/srcset and set appropriate alt/width attributes so the Railway logo display
is consistent with the React hosting guide.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 953b0822-5c1d-4f51-8c46-910010ac0e55
📒 Files selected for processing (2)
docs/start/framework/react/guide/hosting.mddocs/start/framework/solid/guide/hosting.md
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
docs/start/framework/solid/guide/hosting.md (1)
48-48:⚠️ Potential issue | 🟡 MinorRemove accidental test text from docs content.
testing updatsappears to be stray text and should be removed.🧹 Suggested fix
-testing updats🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/start/framework/solid/guide/hosting.md` at line 48, Remove the accidental stray text "testing updats" from the documentation content in the Solid hosting guide; locate the line containing that exact phrase in the guide (the stray diff entry "testing updats") and delete it so the docs contain only intended content.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/start/framework/react/guide/hosting.md`:
- Around line 205-215: The light-mode Railway logo img tag has the image URL
mistakenly placed in the class attribute; update the first <img> element so the
image URL is moved from the class attribute into the src attribute (i.e.,
replace the class="https://raw.githubusercontent.com/.../railway-light.svg" with
a proper src="..."), leaving any intended class names separate, and verify the
second <img> (hidden dark:block) already uses src correctly.
In `@docs/start/framework/solid/guide/hosting.md`:
- Around line 200-210: The first <img> tag in the snippet has the light-mode
logo URL mistakenly placed in the class attribute instead of src; update that
first <img> element (the one with
class="https://raw.githubusercontent.com/.../railway-light.svg") to put the logo
URL into the src attribute and use a proper class value (or remove class) so the
image renders; ensure the alt text remains and any width attribute is added if
needed to match the second <img>.
---
Duplicate comments:
In `@docs/start/framework/solid/guide/hosting.md`:
- Line 48: Remove the accidental stray text "testing updats" from the
documentation content in the Solid hosting guide; locate the line containing
that exact phrase in the guide (the stray diff entry "testing updats") and
delete it so the docs contain only intended content.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 443c6c6c-8fe6-4539-91f4-454de8137e1d
📒 Files selected for processing (2)
docs/start/framework/react/guide/hosting.mddocs/start/framework/solid/guide/hosting.md
Comment on lines
+205
to
+215
| <a href="https://railway.com?utm_source=tanstack"> | ||
| <img | ||
| class="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" | ||
| alt="Railway logo" | ||
| /> | ||
| <img | ||
| class="hidden dark:block" | ||
| src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" | ||
| width="280" | ||
| alt="Railway logo" | ||
| /> |
Contributor
There was a problem hiding this comment.
Railway light-mode image is broken due to missing src.
At Line 207, the image URL is assigned to class instead of src, so the light logo will not render.
🔧 Suggested fix
<a href="https://railway.com?utm_source=tanstack">
<img
- class="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg"
+ class="block dark:hidden"
+ src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg"
+ width="280"
alt="Railway logo"
/>
<img
class="hidden dark:block"
src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <a href="https://railway.com?utm_source=tanstack"> | |
| <img | |
| class="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" | |
| alt="Railway logo" | |
| /> | |
| <img | |
| class="hidden dark:block" | |
| src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" | |
| width="280" | |
| alt="Railway logo" | |
| /> | |
| <a href="https://railway.com?utm_source=tanstack"> | |
| <img | |
| class="block dark:hidden" | |
| src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" | |
| width="280" | |
| alt="Railway logo" | |
| /> | |
| <img | |
| class="hidden dark:block" | |
| src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" | |
| width="280" | |
| alt="Railway logo" | |
| /> | |
| </a> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/react/guide/hosting.md` around lines 205 - 215, The
light-mode Railway logo img tag has the image URL mistakenly placed in the class
attribute; update the first <img> element so the image URL is moved from the
class attribute into the src attribute (i.e., replace the
class="https://raw.githubusercontent.com/.../railway-light.svg" with a proper
src="..."), leaving any intended class names separate, and verify the second
<img> (hidden dark:block) already uses src correctly.
Comment on lines
+200
to
+210
| <a href="https://railway.com?utm_source=tanstack"> | ||
| <img | ||
| class="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" | ||
| alt="Railway logo" | ||
| /> | ||
| <img | ||
| class="hidden dark:block" | ||
| src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" | ||
| width="280" | ||
| alt="Railway logo" | ||
| /> |
Contributor
There was a problem hiding this comment.
Railway light-mode logo won’t render (URL placed in class).
At Line 202, the light logo URL is in class instead of src, so the first image is broken.
🔧 Suggested fix
<a href="https://railway.com?utm_source=tanstack">
<img
- class="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg"
+ class="block dark:hidden"
+ src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg"
+ width="280"
alt="Railway logo"
/>
<img
class="hidden dark:block"
src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <a href="https://railway.com?utm_source=tanstack"> | |
| <img | |
| class="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" | |
| alt="Railway logo" | |
| /> | |
| <img | |
| class="hidden dark:block" | |
| src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" | |
| width="280" | |
| alt="Railway logo" | |
| /> | |
| <a href="https://railway.com?utm_source=tanstack"> | |
| <img | |
| class="block dark:hidden" | |
| src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" | |
| width="280" | |
| alt="Railway logo" | |
| /> | |
| <img | |
| class="hidden dark:block" | |
| src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" | |
| width="280" | |
| alt="Railway logo" | |
| /> | |
| </a> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/start/framework/solid/guide/hosting.md` around lines 200 - 210, The
first <img> tag in the snippet has the light-mode logo URL mistakenly placed in
the class attribute instead of src; update that first <img> element (the one
with class="https://raw.githubusercontent.com/.../railway-light.svg") to put the
logo URL into the src attribute and use a proper class value (or remove class)
so the image renders; ensure the alt text remains and any width attribute is
added if needed to match the second <img>.
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
docs/start/framework/solid/guide/hosting.md (1)
199-210:⚠️ Potential issue | 🔴 CriticalFix the Railway light-mode logo markup.
The first
<img>element has the URL incorrectly placed in theclassattribute instead ofsrc, and is missing thesrc,width, and proper visibility class attributes. This prevents the logo from rendering in light mode.🔧 Proposed fix
<a href="https://railway.com?utm_source=tanstack"> <img - class="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" + class="block dark:hidden" + src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-light.svg" + width="280" alt="Railway logo" /> <img class="hidden dark:block" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/src/images/railway-dark.svg" width="280" alt="Railway logo" /> </a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/start/framework/solid/guide/hosting.md` around lines 199 - 210, The light-mode Railway logo <img> element has the image URL incorrectly in the class attribute and is missing src, width, and visibility classes; update the first <img> (the light-mode logo) by moving the URL from the class attribute into src, add width="280" and set the visibility classes (e.g., class="block dark:hidden") so it mirrors the dark-mode image's behavior, and keep the alt text intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@docs/start/framework/solid/guide/hosting.md`:
- Around line 199-210: The light-mode Railway logo <img> element has the image
URL incorrectly in the class attribute and is missing src, width, and visibility
classes; update the first <img> (the light-mode logo) by moving the URL from the
class attribute into src, add width="280" and set the visibility classes (e.g.,
class="block dark:hidden") so it mirrors the dark-mode image's behavior, and
keep the alt text intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 77f559d2-299b-4244-9612-9e01fcf2c883
📒 Files selected for processing (1)
docs/start/framework/solid/guide/hosting.md
… in class attribute
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
1 participant
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.
Fixes TanStack/tanstack.com#693
Summary:
The Cloudflare logo did not update when switching between light and dark themes.
Cause:
The implementation used prefers-color-scheme, which depends on system theme and does not react to the site's theme toggle.
Fix: with conditional rendering using dark mode classes to ensure the logo updates correctly with theme changes.
Replaced
Testing:
Verified that the logo switches correctly when toggling between light and dark themes.
Summary by CodeRabbit