Add dark theme
This commit is contained in:
parent
46ea085acf
commit
150fd50b13
GPG Key ID:
D044E84C5BE01605
|
|
@ -239,17 +239,17 @@ else {
|
|||
<span class="input-group-text" style="width:23ch">Pronoun (plurality)</span>
|
||||
</div>
|
||||
@if (user.PronounPlural) {
|
||||
<input type="text" class="form-control" id="input-streamkey" value="@user.PronounSubject.FirstCharToUpper() (@user.Username) are live." disabled>
|
||||
<input type="text" class="form-control" id="input-pronoun-plurality" value="@user.PronounSubject.FirstCharToUpper() (@user.Username) are live." disabled>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-primary" role="button" id="button-reset-streamkey" disabled>Plural</button>
|
||||
<button onclick="ajax_and_reload('pronoun_singular')" class="btn btn-outline-primary" role="button" id="button-reset-streamkey">Singular</button>
|
||||
<button class="btn btn-outline-primary" role="button" id="button-plurality-yes" disabled>Plural</button>
|
||||
<button onclick="ajax_and_reload('pronoun_singular')" class="btn btn-outline-primary" role="button" id="button-plurality-no">Singular</button>
|
||||
</div>
|
||||
}
|
||||
else {
|
||||
<input type="text" class="form-control" id="input-streamkey" value="@user.PronounSubject.FirstCharToUpper() (@user.Username) is live." disabled>
|
||||
<input type="text" class="form-control" id="input-pronoun-plurality" value="@user.PronounSubject.FirstCharToUpper() (@user.Username) is live." disabled>
|
||||
<div class="input-group-append">
|
||||
<button onclick="ajax_and_reload('pronoun_plural')" class="btn btn-outline-primary" role="button" id="button-reset-streamkey">Plural</button>
|
||||
<button class="btn btn-outline-primary" role="button" id="button-reset-streamkey" disabled>Singular</button>
|
||||
<button onclick="ajax_and_reload('pronoun_plural')" class="btn btn-outline-primary" role="button" id="button-plurality-yes">Plural</button>
|
||||
<button class="btn btn-outline-primary" role="button" id="button-plurality-no" disabled>Singular</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,16 @@
|
|||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>@ViewData["Title"] - @Program.SiteName</title>
|
||||
<link rel="stylesheet" href="~/css/dark-mode.css"/>
|
||||
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="~/css/site.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
if (localStorage.darkSwitch) document.body.setAttribute("data-theme", localStorage.darkSwitch);
|
||||
</script>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3">
|
||||
<div class="container">
|
||||
<a asp-area="" asp-page="/Index">
|
||||
<img src="/favicon.ico" alt="Logo" style="width: 3.5ch; margin-right: 1ch"/>
|
||||
|
|
@ -40,6 +44,14 @@
|
|||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<span class="custom-control custom-switch" style="padding-right: 8px">
|
||||
<input type="checkbox" class="custom-control-input" id="darkSwitch"/>
|
||||
<label class="custom-control-label" for="darkSwitch" id="darkSwitchLabel">Dark Mode (beta)</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if (Context.Request.Headers["ASP-Site-Type"] != "view") {
|
||||
<partial name="_LoginPartial"/>
|
||||
}
|
||||
|
|
@ -53,15 +65,27 @@
|
|||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="border-top footer text-muted">
|
||||
<footer class="border-top footer">
|
||||
<div class="container text-center">
|
||||
<a href="https://git.zotan.services/zotan/rtmpdash" target="_blank">Source Code</a> - <a href="@Program.ServiceAnnouncementUrl" target="_blank">Service Announcements</a> - <a href="@Program.ServiceStatusUrl" target="_blank">Service Status</a> - <a asp-area="" asp-page="/Content">Content Policy</a> - <a asp-area="" asp-page="/Privacy">Privacy</a> - <a href="mailto:@Program.AbuseEmail">Abuse</a> - <a asp-area="" asp-page="/Credits">Credits and Copyright</a>
|
||||
<span class="text-muted">
|
||||
<a href="https://git.zotan.services/zotan/rtmpdash" target="_blank">Source Code</a> - <a href="@Program.ServiceAnnouncementUrl" target="_blank">Service Announcements</a> - <a href="@Program.ServiceStatusUrl" target="_blank">Service Status</a> - <a asp-area="" asp-page="/Content">Content Policy</a> - <a asp-area="" asp-page="/Privacy">Privacy</a> - <a href="mailto:@Program.AbuseEmail">Abuse</a> - <a asp-area="" asp-page="/Credits">Credits and Copyright</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
let darkThemeSelected = localStorage.getItem("darkSwitch") !== null && localStorage.getItem("darkSwitch") === "dark";
|
||||
|
||||
let label = document.getElementById("darkSwitchLabel");
|
||||
label.classList.add('notransition');
|
||||
darkSwitch.checked = darkThemeSelected;
|
||||
darkSwitch.offsetHeight;
|
||||
label.classList.remove('notransition');
|
||||
</script>
|
||||
<script src="~/lib/jquery/dist/jquery.min.js"></script>
|
||||
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="~/js/site.js" asp-append-version="true"></script>
|
||||
<script src="~/js/dark-mode-switch.js"></script>
|
||||
<script src="~/js/site.js"></script>
|
||||
|
||||
@await RenderSectionAsync("Scripts", false)
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
/*!
|
||||
* Dark Mode Switch v1.0.1 (https://github.com/coliff/dark-mode-switch)
|
||||
* Copyright 2021 C.Oliff
|
||||
* Licensed under MIT (https://github.com/coliff/dark-mode-switch/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
[data-theme="dark"] {
|
||||
background-color: #222 !important;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a {
|
||||
color: #6599e9;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.btn {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.nav-link.text-dark, [data-theme="dark"] label.custom-control-label {
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.navbar-brand {
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .border-bottom {
|
||||
border-bottom: 1px solid #1c1c1c !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .border-top {
|
||||
border-top: 1px solid #1c1c1c !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .table td, [data-theme="dark"] .table th {
|
||||
padding: 0.75rem;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #3d3d3d;
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .table thead th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid #4b4b4b;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] {
|
||||
background-color: #181818;
|
||||
color: #b6b6b6;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control {
|
||||
background-color: #222;
|
||||
border-color: #4f4f4f;
|
||||
opacity: 1;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .form-control:focus {
|
||||
color: #eee;
|
||||
background-color: #222;
|
||||
border-color: #42659d;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.1rem rgb(0 123 255 / 25%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .input-group-text {
|
||||
background-color: #181818;
|
||||
color: #b6b6b6;
|
||||
border-color: #4f4f4f;
|
||||
}
|
||||
|
||||
.notransition, .notransition::before, .notransition::after {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/*!
|
||||
* Dark Mode Switch v1.0.1 (https://github.com/coliff/dark-mode-switch)
|
||||
* Copyright 2021 C.Oliff
|
||||
* Licensed under MIT (https://github.com/coliff/dark-mode-switch/blob/main/LICENSE)
|
||||
*/
|
||||
let darkSwitch = document.getElementById("darkSwitch");
|
||||
window.addEventListener("load", (function() {
|
||||
if (darkSwitch) {
|
||||
darkSwitch.addEventListener("change", (function() {
|
||||
resetTheme()
|
||||
}
|
||||
))
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
function resetTheme() {
|
||||
if (darkSwitch.checked) {
|
||||
document.body.setAttribute("data-theme", "dark");
|
||||
localStorage.setItem("darkSwitch", "dark")
|
||||
} else {
|
||||
document.body.removeAttribute("data-theme");
|
||||
localStorage.removeItem("darkSwitch")
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue