mirror of
https://github.com/rio-labs/rio.git
synced 2026-02-10 07:39:51 -06:00
49 lines
1.9 KiB
HTML
49 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>{title}</title>
|
|
<meta name="{meta}" />
|
|
<link rel="icon" type="image/x-icon" href="rio/favicon.png" />
|
|
<link rel="stylesheet" href="css/style.scss" />
|
|
<script>
|
|
globalThis.SESSION_TOKEN = "{session_token}";
|
|
globalThis.PING_PONG_INTERVAL_SECONDS = "{ping_pong_interval}";
|
|
globalThis.RIO_DEBUG_MODE = "{debug_mode}";
|
|
globalThis.RUNNING_IN_WINDOW = "{running_in_window}";
|
|
globalThis.CHILD_ATTRIBUTE_NAMES = "{child_attribute_names}";
|
|
|
|
// Always end with a slash
|
|
globalThis.RIO_BASE_URL = "/rio-base-url-placeholder/";
|
|
|
|
globalThis.initialMessages = "{initial_messages}";
|
|
</script>
|
|
<script src="code/app.ts" type="module"></script>
|
|
</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>
|