| 1 | {{ define "page" -}} |
| 2 | <div class="shithub-settings-page"> |
| 3 | {{ template "settings-nav" . }} |
| 4 | <div class="shithub-settings-content"> |
| 5 | <h1>Appearance</h1> |
| 6 | |
| 7 | {{ with .Error }}<p class="shithub-flash shithub-flash-error" role="alert">{{ . }}</p>{{ end }} |
| 8 | {{ with .Success }}<p class="shithub-flash shithub-flash-notice" role="status">{{ . }}</p>{{ end }} |
| 9 | |
| 10 | <section class="shithub-settings-section"> |
| 11 | <h2>Theme preferences</h2> |
| 12 | <p>Choose how shithub looks. <em>Sync with system</em> matches your OS setting and switches automatically when it does.</p> |
| 13 | |
| 14 | <form method="POST" action="/settings/appearance" novalidate class="shithub-theme-form"> |
| 15 | <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}"> |
| 16 | |
| 17 | <fieldset class="shithub-theme-grid"> |
| 18 | <legend>Theme mode</legend> |
| 19 | |
| 20 | <label class="shithub-theme-card{{ if eq .CurrentTheme "" }} active{{ end }}"> |
| 21 | <input type="radio" name="theme" value=""{{ if eq .CurrentTheme "" }} checked{{ end }}> |
| 22 | <span class="shithub-theme-card-title">Sync with system</span> |
| 23 | <span class="shithub-theme-card-desc">Follow your OS light/dark setting.</span> |
| 24 | </label> |
| 25 | |
| 26 | <label class="shithub-theme-card{{ if eq .CurrentTheme "auto" }} active{{ end }}"> |
| 27 | <input type="radio" name="theme" value="auto"{{ if eq .CurrentTheme "auto" }} checked{{ end }}> |
| 28 | <span class="shithub-theme-card-title">Auto (time-of-day)</span> |
| 29 | <span class="shithub-theme-card-desc">Light by day, dark by night — based on your OS preference.</span> |
| 30 | </label> |
| 31 | |
| 32 | <label class="shithub-theme-card{{ if eq .CurrentTheme "light" }} active{{ end }}"> |
| 33 | <input type="radio" name="theme" value="light"{{ if eq .CurrentTheme "light" }} checked{{ end }}> |
| 34 | <span class="shithub-theme-card-title">Light</span> |
| 35 | <span class="shithub-theme-card-desc">Always use the light theme.</span> |
| 36 | </label> |
| 37 | |
| 38 | <label class="shithub-theme-card{{ if eq .CurrentTheme "dark" }} active{{ end }}"> |
| 39 | <input type="radio" name="theme" value="dark"{{ if eq .CurrentTheme "dark" }} checked{{ end }}> |
| 40 | <span class="shithub-theme-card-title">Dark</span> |
| 41 | <span class="shithub-theme-card-desc">Always use the dark theme.</span> |
| 42 | </label> |
| 43 | |
| 44 | <label class="shithub-theme-card{{ if eq .CurrentTheme "high_contrast" }} active{{ end }}"> |
| 45 | <input type="radio" name="theme" value="high_contrast"{{ if eq .CurrentTheme "high_contrast" }} checked{{ end }}> |
| 46 | <span class="shithub-theme-card-title">High contrast</span> |
| 47 | <span class="shithub-theme-card-desc">Increased contrast for accessibility.</span> |
| 48 | </label> |
| 49 | </fieldset> |
| 50 | |
| 51 | <button type="submit" class="shithub-button shithub-button-primary">Update theme</button> |
| 52 | </form> |
| 53 | </section> |
| 54 | </div> |
| 55 | </div> |
| 56 | {{- end }} |