mirror/rio
1
0
Fork 0
mirror of https://github.com/rio-labs/rio.git synced 2026-05-20 03:18:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

flashbang prevention prevention

Browse Source
This commit is contained in:
Jakob Pinterits
2024-09-27 22:14:09 +02:00
parent e9007f93c1
commit 45a330ae46
3 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/code/rpc.ts
+3
View File
@@ -417,6 +417,9 @@ export async function processMessageReturnResponse(
message.params.themeVariant
);
// Remove the default anti-flashbang color
document.documentElement.style.background = "";
response = null;
break;
frontend/index.html
+25 -6
View File
@@ -1,10 +1,5 @@
<!doctype html>
<!--
Until the CSS is loaded and the server sends us the theme colors, make the
background dark so that dark mode users don't get flashbanged by a completely
white screen
-->
<html data-theme="dark" style="background: #333">
<html>
<head>
<title>{title}</title>
<meta name="{meta}" />
@@ -26,4 +21,28 @@ white screen
</head>
<body class="rio-switcheroo-background"></body>
<script>
/// Apply the theme's background color. This is done immediately in the
/// `index.html` to avoid the users getting flashbanged by a completely
/// white screen while loading.
const LIGHT_THEME_BACKGROUND_COLOR = "{light_theme_background_color}";
const DARK_THEME_BACKGROUND_COLOR = "{dark_theme_background_color}";
let useLightTheme = !window.matchMedia("(prefers-color-scheme: dark)")
.matches;
let themeVariables;
// Apply the background color and also set a data attribute on the HTML.
// This will be used by CSS to switch code highlighting themes.
if (useLightTheme) {
document.documentElement.style.backgroundColor =
LIGHT_THEME_BACKGROUND_COLOR;
document.documentElement.setAttribute("data-theme", "light");
} else {
document.documentElement.style.backgroundColor =
DARK_THEME_BACKGROUND_COLOR;
document.documentElement.setAttribute("data-theme", "dark");
}
</script>
</html>
rio/app_server/fastapi_server.py
+18 -2
View File
@@ -483,8 +483,6 @@ class FastapiServer(fastapi.FastAPI, AbstractAppServer):
# Load the template
html_ = read_frontend_template("index.html")
self.app._theme.background_color
html_ = html_.replace(
"{session_token}",
session_token,
@@ -528,6 +526,24 @@ class FastapiServer(fastapi.FastAPI, AbstractAppServer):
html_base_url,
)
theme = self.app._theme
if isinstance(theme, tuple):
light_theme_background_color = theme[0].background_color
dark_theme_background_color = theme[1].background_color
else:
light_theme_background_color = theme.background_color
dark_theme_background_color = theme.background_color
html_ = html_.replace(
"{light_theme_background_color}",
f"#{light_theme_background_color.hex}",
)
html_ = html_.replace(
"{dark_theme_background_color}",
f"#{dark_theme_background_color.hex}",
)
# Since the title is user-defined, it might contain placeholders like
# `{debug_mode}`. So it's important that user-defined content is
# inserted last.