Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix white components backgrounds when OS is using dark theme #8242

Merged
merged 7 commits into from Mar 18, 2024
Merged

Fix white components backgrounds when OS is using dark theme #8242

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
076394d
Use normal color scheme to prevent white backgrounds
LukasMasuch Mar 6, 2024
e2ccadf
Update test
LukasMasuch Mar 6, 2024
9ade245
Remove color scheme from plotly and video
LukasMasuch Mar 7, 2024
670d635
Reformat
LukasMasuch Mar 7, 2024
43cef60
Add color scheme back to video
LukasMasuch Mar 7, 2024
aba1b97
Add color scheme back to plotly
LukasMasuch Mar 7, 2024
f4f9b53
Merge remote-tracking branch 'remote/develop' into fix/component-whit…
LukasMasuch Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions e2e_playwright/st_components_v1_test.py
View file
Open in desktop
Expand Up @@ -31,6 +31,10 @@ def test_components_iframe_rendering(
# does not use a valid URL.
assert_snapshot(elements.nth(0), name="st_components-html")

# Emulate dark theme OS setting:
themed_app.emulate_media(color_scheme="dark")
assert_snapshot(elements.nth(0), name="st_components-html")
LukasMasuch marked this conversation as resolved.
Show resolved Hide resolved


def test_html_correctly_sets_attr(app: Page):
"""Test that html correctly sets attributes."""
Expand Down
2 changes: 1 addition & 1 deletion frontend/lib/src/components/elements/IFrame/IFrame.tsx
View file
Open in desktop
Expand Up @@ -45,7 +45,7 @@ export default function IFrame({
style = { overflow: "hidden" }
}

style.colorScheme = "light dark"
style.colorScheme = "normal"

// Either 'src' or 'srcDoc' will be set in our element. If 'src'
// is set, we're loading a remote URL in the iframe.
Expand Down
2 changes: 1 addition & 1 deletion frontend/lib/src/components/elements/PlotlyChart/PlotlyChart.tsx
View file
Open in desktop
Expand Up @@ -63,7 +63,7 @@ function renderIFrame({
<iframe
title="Plotly"
src={url}
style={{ width, height, colorScheme: "light dark" }}
style={{ width, height, colorScheme: "normal" }}
/>
)
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/lib/src/components/elements/PlotlyChart/__snapshots__/PlotlyChart.test.tsx.snap
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@
exports[`PlotlyChart Element Render iframe should render an iframe 1`] = `
<iframe
src="http://url.test"
style="width: 0px; height: 450px; color-scheme: light dark;"
style="width: 0px; height: 450px; color-scheme: normal;"
title="Plotly"
/>
`;
2 changes: 1 addition & 1 deletion frontend/lib/src/components/elements/Video/Video.tsx
View file
Open in desktop
Expand Up @@ -98,7 +98,7 @@ export default function Video({
src={getYoutubeSrc(url)}
width={width}
height={height}
style={{ colorScheme: "light dark" }}
style={{ colorScheme: "normal" }}
frameBorder="0"
allow="autoplay; encrypted-media"
allowFullScreen
Expand Down
4 changes: 2 additions & 2 deletions frontend/lib/src/components/elements/Video/__snapshots__/Video.test.tsx.snap
View file
Open in desktop
Expand Up @@ -10,7 +10,7 @@ exports[`Video Element YouTube renders a youtube iframe 1`] = `
frameborder="0"
height="528"
src="https://www.w3schools.com/html/mov_bbb.mp4"
style="color-scheme: light dark;"
style="color-scheme: normal;"
title="https://www.w3schools.com/html/mov_bbb.mp4"
width="0"
/>
Expand All @@ -28,7 +28,7 @@ exports[`Video Element YouTube renders a youtube iframe with an starting time 1`
frameborder="0"
height="528"
src="https://www.w3schools.com/html/mov_bbb.mp4?start=10"
style="color-scheme: light dark;"
style="color-scheme: normal;"
title="https://www.w3schools.com/html/mov_bbb.mp4"
width="0"
/>
Expand Down
2 changes: 1 addition & 1 deletion frontend/lib/src/components/widgets/CustomComponent/ComponentInstance.tsx
View file
Open in desktop
Expand Up @@ -391,7 +391,7 @@ function ComponentInstance(props: Props): ReactElement {
width={width}
height={frameHeight}
style={{
colorScheme: "light dark",
colorScheme: "normal",
display: isReadyRef.current ? "initial" : "none",
}}
scrolling="no"
Expand Down