Set page background color based on theme

This commit is contained in:
Mark McDowall 2025-12-25 18:42:10 -08:00
parent c3706c3c92
commit 91f1b672c5
3 changed files with 18 additions and 0 deletions

View file

@ -56,6 +56,13 @@
window.Sonarr = {
urlBase: '__URL_BASE__'
};
var theme = '_THEME_';
var defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var finalTheme =
theme === 'dark' || (theme === 'auto' && defaultDark) ? 'dark' : 'light';
document.documentElement.style.setProperty('--pageBackground', finalTheme === 'dark' ? '#202020' : '#f5f7fa');
</script>
__MINI_PROFILER__
@ -70,6 +77,10 @@
saves fighting with CSS Modules for ~10 lines
-->
<style>
html {
background-color: var(--pageBackground);
}
.root {
overflow: hidden;
height: 100%; /* needed for proper layout */

View file

@ -60,6 +60,10 @@
<title>Login - Sonarr</title>
<style>
html {
background-color: var(--pageBackground);
}
body {
background-color: var(--pageBackground);
color: var(--textColor);

View file

@ -45,6 +45,9 @@ public override bool CanHandle(string resourceUrl)
protected override string GetHtmlText(HttpContext context)
{
var html = base.GetHtmlText(context);
var theme = _configFileProvider.Theme;
html = html.Replace("_THEME_", theme);
if (_configFileProvider.ProfilerEnabled)
{