Skip to content

[Installer] Dynamic theme preview loading, Iframe previews, and other small improvements #1036

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

Merged
merged 11 commits into from
Nov 11, 2025
Merged

[Installer] Dynamic theme preview loading, Iframe previews, and other small improvements #1036

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f17d2fa
Dynamic theme preview loading, Iframe previews, and other improvements
mrblomblo Sep 13, 2025
3614d74
oops
mrblomblo Sep 13, 2025
e37f176
Fixes
mrblomblo Sep 13, 2025
6619a86
Fix theme previews not being applied
mrblomblo Sep 20, 2025
e803b23
Use ViewData instead of GET for overriding theme in _Layout
mrblomblo Sep 25, 2025
3229b3a
Add core parameters to preview
mrblomblo Oct 3, 2025
484a073
Merge branch 'master' into pr/1036
mcmonkey4eva Oct 4, 2025
54a5f85
Fixes
mrblomblo Oct 4, 2025
f2e56a7
Add noise image bg to core params
mrblomblo Oct 4, 2025
af23e4d
Merge branch 'master' into pr/1036
mcmonkey4eva Nov 11, 2025
5581ed7
css debork
mcmonkey4eva Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 11 additions & 70 deletions src/Pages/Install.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,76 +143,17 @@
<div class="install_hint">You can always change this later in the User Settings page.</div>
<br>
<fieldset class="form-group theme_preview" id="theme_selection_field">
<div class="form-check theme_preview_modern_dark" id="theme_input_modern_dark">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_moderndark" value="modern_dark" checked="">
<label class="form-check-label" for="theme_moderndark">Modern Dark</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_modern_light" id="theme_input_modern_light">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_modernlight" value="modern_light">
<label class="form-check-label" for="theme_modernlight">Modern Light</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_solarized" id="theme_input_solarized">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_solarized" value="solarized">
<label class="form-check-label" for="theme_solarized">Solarized Light</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_dark_dreams" id="theme_input_dark_dreams">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_darkdreams" value="dark_dreams">
<label class="form-check-label" for="theme_darkdreams">Dark Dreams</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_gravity_blue" id="theme_input_gravity_blue">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_gravityblue" value="gravity_blue">
<label class="form-check-label" for="theme_gravityblue">Gravity Blue</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_cyber_swarm" id="theme_input_cyber_swarm">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_cyberswarm" value="cyber_swarm">
<label class="form-check-label" for="theme_cyberswarm">Cyber Swarm</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_punked" id="theme_input_punked">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_punked" value="punked">
<label class="form-check-label" for="theme_punked">Punked</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_eyesear_white" id="theme_input_eyesear_white">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_eyesearwhite" value="eyesear_white">
<label class="form-check-label" for="theme_eyesearwhite">Eyesear White</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_swarmpunk" id="theme_input_swarmpunk">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_swarmpunk" value="swarmpunk">
<label class="form-check-label" for="theme_swarmpunk">Swarm Punk</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_beweish" id="theme_input_beweish">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_beweish" value="beweish">
<label class="form-check-label" for="theme_beweish">Beweish</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_ctp_mocha" id="theme_input_ctp_mocha">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpmocha" value="ctp_mocha">
<label class="form-check-label" for="theme_ctpmocha">Catppuccin Mocha</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_ctp_macchiato" id="theme_input_ctp_macchiato">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpmacchiato" value="ctp_macchiato">
<label class="form-check-label" for="theme_ctpmacchiato">Catppuccin Macchiato</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_ctp_frappe" id="theme_input_ctp_frappe">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpfrappe" value="ctp_frappe">
<label class="form-check-label" for="theme_ctpfrappe">Catppuccin Frappé</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_ctp_latte" id="theme_input_ctp_latte">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_ctplatte" value="ctp_latte">
<label class="form-check-label" for="theme_ctplatte">Catppuccin Latte</label>
<span class="button_example">Example</span>
</div>
@foreach (var theme in Program.Web.RegisteredThemes.Values)
{
string themeName = $"{theme.Name.Replace(" (Legacy)","")}";
string themeId = $"{theme.ID}";
string themeIdNoUnderscore = $"{theme.ID.Replace("_", "")}";
<div class="form-check theme_preview_@themeId" id="theme_input_@themeId">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_@themeIdNoUnderscore" value="@themeId" @(themeId == "modern_dark" ? "checked" : "")>
<label class="form-check-label" for="theme_@themeIdNoUnderscore">@themeName</label>
<iframe class="form-check-iframe" src="ThemePreview?theme=@themeId"></iframe>
</div>
}
</fieldset>
</div>

Expand Down
6 changes: 5 additions & 1 deletion src/Pages/Shared/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@
<title id="page_title">@ViewData["Title"] - SwarmUI - @Program.ServerSettings.UserAuthorization.InstanceTitle</title>
@{
string themeId = "modern_dark";
string pageThemeOverride = ViewContext.HttpContext.Request.Query["theme"].ToString();
if (!string.IsNullOrEmpty(pageThemeOverride) && Program.Web.RegisteredThemes.ContainsKey(pageThemeOverride)) {
themeId = pageThemeOverride;
}
// TODO: Identify user by auth header and use their settings to determine theme
if (ViewContext.HttpContext.Request.Cookies.TryGetValue("sui_theme_id", out string themeCookie) && Program.Web.RegisteredThemes.ContainsKey(themeCookie)) {
else if (ViewContext.HttpContext.Request.Cookies.TryGetValue("sui_theme_id", out string themeCookie) && Program.Web.RegisteredThemes.ContainsKey(themeCookie)) {
themeId = themeCookie;
}
WebServer.ThemeData theme = Program.Web.RegisteredThemes[themeId];
Expand Down
20 changes: 20 additions & 0 deletions src/Pages/ThemePreview.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@page
@section Header {
<link rel="stylesheet" href="css/genpage.css?vary=@Utilities.VaryID" />
<link rel="stylesheet" href="css/themepreview.css?vary=@Utilities.VaryID" />
}
<div class="theme_preview-content">
<div class="theme_preview-item">
<p>Core Parameters will go here</p>
</div>

<hr>

<div class="theme_preview-item">
<div class="alt-prompt-buttons-wrapper">
<button class="alt-prompt-buttons alt-prompt-generate-button basic-button translate" id="alt_generate_button">Generate</button>
<button class="alt-prompt-buttons alt-prompt-center-button basic-button" id="alt_center_button">&#x2B9F;</button>
<button class="alt-prompt-buttons interrupt-button interrupt-button-none alt-interrupt" id="alt_interrupt_button">&times;</button>
</div>
</div>
</div>
174 changes: 23 additions & 151 deletions src/wwwroot/css/installer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,166 +24,38 @@
}
.form-check {
margin-bottom: 0.5rem;
cursor: pointer;
}
.theme_preview .form-check {
display: inline-block;
width: 30%;
height: 10rem;
width: 49%;
height: 22rem;
border: 1px solid var(--light-border);
border-radius: 0.5rem;
padding-left: 0;
position: relative;
}
.theme_preview .form-check .button_example {
display: block;
height: 2rem;
font-weight: bold;
border-radius: 0.5rem;
text-align: center;
width: fit-content;
padding-left: 0.2rem;
padding-right: 0.2rem;
margin-top: 2rem;
margin-left: auto;
margin-right: auto;
padding-top: 3px;
}
.theme_preview_modern_dark {
background-color: #202020;
color: #E4E4E4;
}
.theme_preview_modern_dark .button_example {
border: 1px solid #3f3f46;
background-color: #4b4b4b;
color: #ffffff;
}
.theme_preview_modern_light {
background-color: #D9D9D9;
color: #101010;
}
.theme_preview_modern_light .button_example {
border: 1px solid #3f3f46;
background-color: #a1a1a1;
color: #101010;
}
.theme_preview_dark_dreams {
background-color: #18181b;
color: #eeeeee;
}
.theme_preview_dark_dreams .button_example {
border: 1px solid #3f3f46;
background-color: #7855e1;
color: #ffffff;
}
.theme_preview_cyber_swarm {
background-color: #18181b;
color: #eeeeee;
}
.theme_preview_cyber_swarm .button_example {
border: 1px solid #3f3f46;
background-color: #00bc8c;
color: #ffffff;
border-radius: 1rem;
padding-top: 0.1em;
padding-left: 0.3em;
padding-right: 0.3em;
}
.theme_preview_gravity_blue {
background-color: #0b0f20;
color: #eeeeee;
}
.theme_preview_gravity_blue .button_example {
border: 1px solid #3f3f46;
background-color: orange;
color: #101010;
}
.theme_preview_eyesear_white {
background-color: #f0f0f0;
color: #101010;
}
.theme_preview_eyesear_white .button_example {
border: 1px solid #3f3f46;
background-color: #a1a1a1;
color: #101010;
}
.theme_preview_punked {
background-color: #0a0a0a;
color: #eeeeee;
}
.theme_preview_punked .button_example {
border: 1px solid #00fff7;
background-color: #0a0a0a;
color: #ffffff;
border-radius: 1rem;
padding-top: 0.1em;
padding-left: 0.3em;
padding-right: 0.3em;
}
.theme_preview_solarized {
background-color: #d3cdc0;
color: #101010;
}
.theme_preview_solarized .button_example {
border: 1px solid #3f3f46;
background-color: #a1a1a1;
color: #101010;
}
.theme_preview_swarmpunk {
background-color: #0a0a1f;
color: #00ff9d;
}
.theme_preview_swarmpunk .button_example {
border: 1px solid #00ff9d40;
background-color: #12122a;
color: #00ff9d;
}
.theme_preview_beweish {
background-color: #0e0e2c;
color: #ffffff;
}
.theme_preview_beweish .button_example {
border: 1px solid #2a4170;
background-color: #0f3460;
color: #ffffff;
}
.theme_preview_ctp_mocha {
background-color: #11111b;
color: #cdd6f4;
}
.theme_preview_ctp_mocha .button_example {
border: 1px solid #313244;
background-color: #585b70;
color: #cdd6f4;
}
.theme_preview_ctp_macchiato {
background-color: #181926;
color: #cad3f5;
}
.theme_preview_ctp_macchiato .button_example {
border: 1px solid #363a4f;
background-color: #5b6078;
color: #cad3f5;
}
.theme_preview_ctp_frappe {
background-color: #232634;
color: #c6d0f5;
}
.theme_preview_ctp_frappe .button_example {
border: 1px solid #414559;
background-color: #626880;
color: #c6d0f5;
}
.theme_preview_ctp_latte {
background-color: #dce0e8;
color: #4c4f69;
}
.theme_preview_ctp_latte .button_example {
border: 1px solid #ccd0da;
background-color: #acb0be;
color: #4c4f69;
.theme_preview .form-check:has(.form-check-input:checked) {
border: 1px solid var(--emphasis);
}
.form-check .form-check-input {
margin-left: 0.5rem;
margin-top: 0.5rem;
}
.form-check .form-check-iframe {
width: 100%;
height: calc(100% - 2rem);
border-bottom-left-radius: calc(0.5rem - 1px);
border-bottom-right-radius: calc(0.5rem - 1px);
position: absolute;
bottom: 0;
left: 0;
}
label {
margin-top: 0.125rem;
margin-left: 0.5rem;
cursor: pointer;
font-size: 120%;
vertical-align: top;
margin-top: -0.3rem;
}
.final_confirm_info {
font-weight: bold;
Expand Down
26 changes: 26 additions & 0 deletions src/wwwroot/css/themepreview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
html, body {
height: 100%
}
#alt_generate_button {
margin-left: 0 !important;
}
.version-display {
display: none;
visibility: hidden;
}
.theme_preview-content {
height: 100%;
align-content: center;
margin-top: -0.25rem;
}
.theme_preview-item {
display: flex;
justify-content: center;
}
.theme_preview-item:not(:last-child) {
margin-bottom: 0.5em;
}
.theme_preview-item .theme_preview-text {
font-size: 1.25rem;
margin-bottom: 0;
}