anas/divan
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

#410 switch between dark and light theme

Browse Source
This commit is contained in:
Hamid Reza Mohammadi 2023-10-09 15:13:41 +03:30
parent e2be23d42c
commit b0a7aad6b9
26 changed files with 149 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
GanjooRazor/Areas/User/Pages/VerseAdd.cshtml
View File

@ -14,7 +14,7 @@
<meta name="robots" content="noindex, nofollow" />
<title>پیشنهاد اضافه شدن مصرع‌های جا افتاده</title>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<style>
label {
width: 100px;

4
GanjooRazor/Pages/AudioClip.cshtml
View File

@ -15,7 +15,7 @@
گنجور » نمایش خوانش
</title>
<link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
<link href="~/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="~/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script>
@ -150,7 +150,7 @@
</p>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/bk.js?version=40"></script>
<script src="~/js/bk.js?version=41"></script>
<script src="~/js/jplayersupport.js"></script>
<script src="~/js/vaabd.js?version=5"></script>
<script src="~/dist/jplayer/jquery.jplayer.min.js"></script>

2
GanjooRazor/Pages/Books.cshtml
View File

@ -16,7 +16,7 @@
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
var cookieValue = getCookie("playerScrollLock");
var playerScrollLock = cookieValue === "true";

2
GanjooRazor/Pages/Bp.cshtml
View File

@ -11,7 +11,7 @@
<title>انتخاب قطعهٔ موسیقی مرتبط با شعر از بیپتونز</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist/jquery.min.js"></script>

2
GanjooRazor/Pages/Error.cshtml
View File

@ -14,7 +14,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

2
GanjooRazor/Pages/FAQ.cshtml
View File

@ -16,7 +16,7 @@
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
var cookieValue = getCookie("playerScrollLock");
var playerScrollLock = cookieValue === "true";

2
GanjooRazor/Pages/Golha.cshtml
View File

@ -10,7 +10,7 @@
<title>انتخاب قطعه‌ای از برنامهٔ گلها مرتبط با این شعر</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/golha.js"></script>

2
GanjooRazor/Pages/Hashieha.cshtml
View File

@ -18,7 +18,7 @@
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
var cookieValue = getCookie("playerScrollLock");
var playerScrollLock = cookieValue === "true";

4
GanjooRazor/Pages/Index.cshtml
View File

@ -12,11 +12,11 @@
<title>
@Html.Raw(ViewData["Title"])
</title>
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css">
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon">
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml">
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
var cookieValue = getCookie("playerScrollLock");
var playerScrollLock = cookieValue === "true";

2
GanjooRazor/Pages/Login.cshtml
View File

@ -13,7 +13,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
</head>
<body class="bk-background">
<div id="hdr">

4
GanjooRazor/Pages/Map.cshtml
View File

@ -12,7 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="سخنوران و نویسندگان گنجور روی نقشهٔ جغرافیایی" />
<meta charset="utf-8" />
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/css/leaflet.css" />
<style>
.leaflet-container {
@ -23,7 +23,7 @@
font-family: 'Vazir'
}
</style>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/js/leaflet.js"></script>
<script src="~/js/leaflet-providers.js"></script>

2
GanjooRazor/Pages/Photos.cshtml
View File

@ -15,7 +15,7 @@
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
var cookieValue = getCookie("playerScrollLock");
var playerScrollLock = cookieValue === "true";

2
GanjooRazor/Pages/Pin.cshtml
View File

@ -11,7 +11,7 @@
<title>پیشنهاد شعر مرتبط با تصویر</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link href="/css/spotify.css" rel="stylesheet" type="text/css" />
<script src="/lib/jquery/dist//jquery.min.js"></script>

2
GanjooRazor/Pages/RecitationsOrder.cshtml
View File

@ -12,7 +12,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex, nofollow" />
<title>اطلاعات رتبه‌بندی خوانش‌های شعر</title>
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
</head>
<body>

2
GanjooRazor/Pages/ReportComment.cshtml
View File

@ -11,7 +11,7 @@
<meta name="robots" content="noindex, nofollow" />
<title>درخواست حذف حاشیه</title>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<style>
label {
width: 100px;

4
GanjooRazor/Pages/ReportRecitation.cshtml
View File

@ -13,7 +13,7 @@
<meta name="robots" content="noindex, nofollow" />
<title>گنجور » گزارش خطا در خوانش</title>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
<style>
label {
@ -238,7 +238,7 @@
<script src="~/js/bk.js?version=40"></script>
<script src="~/js/bk.js?version=41"></script>
<script src="~/js/jplayersupport.js"></script>
<script src="~/js/vaabd.js?version=5"></script>
<script src="~/dist/jplayer/jquery.jplayer.min.js"></script>

2
GanjooRazor/Pages/Search.cshtml
View File

@ -21,7 +21,7 @@
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
var cookieValue = getCookie("playerScrollLock");
var playerScrollLock = cookieValue === "true";

2
GanjooRazor/Pages/Shared/_AdminLayout.cshtml
View File

@ -35,7 +35,7 @@
});
</script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
function editBanner(bannerId) {
var url = '?handler=Edit';

2
GanjooRazor/Pages/Shared/_UserPanelLayout.cshtml
View File

@ -32,7 +32,7 @@
});
</script>
<script src="/lib/diff.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
</head>
<body>

2
GanjooRazor/Pages/Simi.cshtml
View File

@ -17,7 +17,7 @@
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
var cookieValue = getCookie("playerScrollLock");
var playerScrollLock = cookieValue === "true";

2
GanjooRazor/Pages/Tagged.cshtml
View File

@ -18,7 +18,7 @@
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/bk.js?version=40"></script>
<script src="/js/bk.js?version=41"></script>
<script>
var cookieValue = getCookie("playerScrollLock");
var playerScrollLock = cookieValue === "true";

15
GanjooRazor/Pages/_FooterPartial.cshtml
View File

@ -34,11 +34,20 @@
</div>
</div>
<a href="javascript:toggleColorScheme();">
<span id="icon-sun"><i class="material-icons">sunny</i></span>
<span id="icon-moon"><i class="material-icons">dark_mode</i></span>
</a>
<script>
applyPreferredColorScheme(getPreferredColorScheme());
</script>
@if (Model.StickyEnabled)
{
<script>
// When the user scrolls the page, execute stickyFunction
window.onscroll = function() { stickyFunction() };
window.onscroll = function () { stickyFunction() };
// Get the navbar
var navbar = document.getElementById("main-navbar");
@ -100,14 +109,14 @@
if (playerScrollLock) {
const lockButtons = document.querySelectorAll('.recitation-scrollunlock');
lockButtons.forEach(function(lockButton) {
lockButtons.forEach(function (lockButton) {
lockButton.classList.toggle('recitation-scrollunlock');
lockButton.classList.toggle('recitation-scrolllock');
});
}
else {
const lockButtons = document.querySelectorAll('.recitation-scrolllock');
lockButtons.forEach(function(lockButtons) {
lockButtons.forEach(function (lockButtons) {
lockButtons.classList.toggle('recitation-scrollunlock');
lockButtons.classList.toggle('recitation-scrolllock');
});

2
GanjooRazor/Pages/errors/404.cshtml
View File

@ -14,7 +14,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

2
GanjooRazor/Pages/errors/503.cshtml
View File

@ -15,7 +15,7 @@
@ViewData["Title"]
</title>
<link href="/css/p8.css?version=59" rel="stylesheet" type="text/css" />
<link href="/css/p8.css?version=60" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
<link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

12
GanjooRazor/wwwroot/css/p8.css
View File

@ -1953,6 +1953,18 @@ fieldset {
border: 1px solid black;
}
#icon-sun {
width: 1.5rem;
height: 1.5rem;
display: none;
}
#icon-moon {
width: 1.5rem;
height: 1.5rem;
display: none;
}
@media(prefers-color-scheme: dark) {
body {
background: rgba(0, 0, 0, 0.9);

99
GanjooRazor/wwwroot/js/bk.js
View File

@ -1107,4 +1107,101 @@ function loadCatRecitations(catId) {
},
});
}
}
// https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting
// Return the system level color scheme, but if something's in local storage, return that
// Unless the system scheme matches the the stored scheme, in which case... remove from local storage
function getPreferredColorScheme() {
let systemScheme = 'light';
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
systemScheme = 'dark';
}
let chosenScheme = systemScheme;
if (localStorage.getItem("scheme")) {
chosenScheme = localStorage.getItem("scheme");
}
if (systemScheme === chosenScheme) {
localStorage.removeItem("scheme");
}
return chosenScheme;
}
// Write chosen color scheme to local storage
// Unless the system scheme matches the the stored scheme, in which case... remove from local storage
function savePreferredColorScheme(scheme) {
let systemScheme = 'light';
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
systemScheme = 'dark';
}
if (systemScheme === scheme) {
localStorage.removeItem("scheme");
}
else {
localStorage.setItem("scheme", scheme);
}
}
// Get the current scheme, and apply the opposite
function toggleColorScheme() {
let newScheme = "light";
let scheme = getPreferredColorScheme();
if (scheme === "light") {
newScheme = "dark";
}
applyPreferredColorScheme(newScheme);
savePreferredColorScheme(newScheme);
}
// Apply the chosen color scheme by traversing stylesheet rules, and applying a medium.
function applyPreferredColorScheme(scheme) {
for (var s = 0; s < document.styleSheets.length; s++) {
for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
rule = document.styleSheets[s].cssRules[i];
if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
switch (scheme) {
case "light":
rule.media.appendMedium("original-prefers-color-scheme");
if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
if (rule.media.mediaText.includes("dark")) rule.media.deleteMedium("(prefers-color-scheme: dark)");
break;
case "dark":
rule.media.appendMedium("(prefers-color-scheme: light)");
rule.media.appendMedium("(prefers-color-scheme: dark)");
if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
break;
default:
rule.media.appendMedium("(prefers-color-scheme: dark)");
if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
break;
}
}
}
}
// Change the toggle button to be the opposite of the current scheme
if (scheme === "dark") {
document.getElementById("icon-sun").style.display = 'inline';
document.getElementById("icon-moon").style.display = 'none';
} else {
document.getElementById("icon-moon").style.display = 'inline';
document.getElementById("icon-sun").style.display = 'none';
}
}