123 lines
4.5 KiB
Plaintext
123 lines
4.5 KiB
Plaintext
<%- include("partials/layout-top", { title }) %>
|
|
<section class="card">
|
|
<h1>Theming</h1>
|
|
<p>Update light and dark mode colors used across the WebUI.</p>
|
|
<form method="post" action="/admin/theming" class="form-grid theme-grid">
|
|
<h2>Light mode</h2>
|
|
<div class="field">
|
|
<label>Background 1</label>
|
|
<input type="color" name="theme_light_bg_1" value="<%= theme.light.bg1 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Background 2</label>
|
|
<input type="color" name="theme_light_bg_2" value="<%= theme.light.bg2 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Background 3</label>
|
|
<input type="color" name="theme_light_bg_3" value="<%= theme.light.bg3 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Text</label>
|
|
<input type="color" name="theme_light_text" value="<%= theme.light.text %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Muted text</label>
|
|
<input type="color" name="theme_light_text_muted" value="<%= theme.light.muted %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Accent</label>
|
|
<input type="color" name="theme_light_accent" value="<%= theme.light.accent %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Accent alt</label>
|
|
<input type="color" name="theme_light_accent_alt" value="<%= theme.light.accentAlt %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Danger</label>
|
|
<input type="color" name="theme_light_danger" value="<%= theme.light.danger %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Surface</label>
|
|
<input type="color" name="theme_light_surface" value="<%= theme.light.surface %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Surface 2</label>
|
|
<input type="color" name="theme_light_surface_2" value="<%= theme.light.surface2 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Surface 3</label>
|
|
<input type="color" name="theme_light_surface_3" value="<%= theme.light.surface3 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Border</label>
|
|
<input type="color" name="theme_light_border" value="<%= theme.light.border %>" />
|
|
</div>
|
|
|
|
<h2>Dark mode</h2>
|
|
<div class="field">
|
|
<label>Background 1</label>
|
|
<input type="color" name="theme_dark_bg_1" value="<%= theme.dark.bg1 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Background 2</label>
|
|
<input type="color" name="theme_dark_bg_2" value="<%= theme.dark.bg2 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Background 3</label>
|
|
<input type="color" name="theme_dark_bg_3" value="<%= theme.dark.bg3 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Text</label>
|
|
<input type="color" name="theme_dark_text" value="<%= theme.dark.text %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Muted text</label>
|
|
<input type="color" name="theme_dark_text_muted" value="<%= theme.dark.muted %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Accent</label>
|
|
<input type="color" name="theme_dark_accent" value="<%= theme.dark.accent %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Accent alt</label>
|
|
<input type="color" name="theme_dark_accent_alt" value="<%= theme.dark.accentAlt %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Danger</label>
|
|
<input type="color" name="theme_dark_danger" value="<%= theme.dark.danger %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Surface</label>
|
|
<input type="color" name="theme_dark_surface" value="<%= theme.dark.surface %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Surface 2</label>
|
|
<input type="color" name="theme_dark_surface_2" value="<%= theme.dark.surface2 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Surface 3</label>
|
|
<input type="color" name="theme_dark_surface_3" value="<%= theme.dark.surface3 %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Border</label>
|
|
<input type="color" name="theme_dark_border" value="<%= theme.dark.border %>" />
|
|
</div>
|
|
|
|
<h2>Role colors</h2>
|
|
<div class="field">
|
|
<label>Public</label>
|
|
<input type="color" name="theme_role_public" value="<%= theme.role.public %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Moderator</label>
|
|
<input type="color" name="theme_role_mod" value="<%= theme.role.mod %>" />
|
|
</div>
|
|
<div class="field">
|
|
<label>Admin</label>
|
|
<input type="color" name="theme_role_admin" value="<%= theme.role.admin %>" />
|
|
</div>
|
|
<button type="submit" class="button">Save theme</button>
|
|
</form>
|
|
</section>
|
|
<%- include("partials/layout-bottom") %>
|