mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add auto-changing theme for development

Browse Source 
Theme is changing follows to OS settings.
This commit is contained in:
Pavel Mineev
2020-01-07 03:57:34 -06:00
committed by Umputun
parent c660d2a522
commit 78bb9dd153
1 changed files with 51 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.ejs
+51 -26
View File
@@ -10,6 +10,13 @@
padding: 0;
margin: 0;
font-family: -system-ui, sans-serif;
color: #333;
background: #fff;
}
a {
color: #0aa;
text-decoration: none;
}
.container {
@@ -22,10 +29,6 @@
color: #ddd;
}
.document_theme_dark a {
color: #5e5eff;
}
.widgets {
display: flex;
flex-wrap: nowrap;
@@ -59,22 +62,6 @@
}
}
</style>
<script>
function toggleTheme() {
var body = document.querySelector('body');
if (body.classList.contains('document_theme_dark')) {
body.classList.add('document_theme_light');
body.classList.remove('document_theme_dark');
window.REMARK42.changeTheme('light');
} else {
body.classList.add('document_theme_dark');
body.classList.remove('document_theme_light');
window.REMARK42.changeTheme('dark');
}
}
</script>
</head>
<body>
<div class="container">
@@ -93,26 +80,64 @@
<div class="widget__frame widget__counter-frame">Comments count: <span class="remark42__counter"></span></div>
</div>
</div>
<p><button onclick="toggleTheme()">Toggle theme</button></p>
<p><button id="toggle-theme">Toggle theme</button></p>
<div id="remark42"></div>
</div>
<script>
var body = document.querySelector('body');
var theme = 'light';
if ('matchMedia' in window) {
var mq = window.matchMedia('(prefers-color-scheme: dark)');
if (mq.matches) {
body.classList.add('document_theme_dark');
}
function getTheme() {
return mq.matches ? 'dark' : 'light';
}
theme = getTheme();
mq.addListener(function() {
REMARK42.changeTheme(getTheme());
});
}
document.getElementById('toggle-theme').addEventListener('click', function(e) {
e.preventDefault();
if (body.classList.contains('document_theme_dark')) {
body.classList.add('document_theme_light');
body.classList.remove('document_theme_dark');
window.REMARK42.changeTheme('light');
return;
}
body.classList.add('document_theme_dark');
body.classList.remove('document_theme_light');
window.REMARK42.changeTheme('dark');
});
var remark_config = {
site_id: 'remark',
host: window.location.origin,
url: 'https://remark42.com/demo/',
components: ['embed', 'counter']
components: ['embed', 'counter'],
theme: theme
};
(function(c) {
(function(c, d) {
for (var i = 0; i < c.length; i++) {
var d = document,
s = d.createElement('script');
var s = d.createElement('script');
s.src = remark_config.host + '/web/' + c[i] + '.js';
(d.head || d.body).appendChild(s);
}
})(remark_config.components || ['embed']);
})(remark_config.components || ['embed'], document);
</script>
<noscript>
Please enable JavaScript to view the comments powered by Remark.