Igor AdamenkoandUmputun
6f1b9037d5
* add with-theme hoc * add dark theme styles for components * add toggle theme button to the dev demo page * add info about widget themes to README
76 lines
1.8 KiB
Plaintext
76 lines
1.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>remark42</title>
|
|
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 40px;
|
|
}
|
|
|
|
.document_theme_dark {
|
|
background: #22201c;
|
|
color: #ddd;
|
|
}
|
|
|
|
.document_theme_dark a {
|
|
color: #5e5eff;
|
|
}
|
|
</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">
|
|
<h1>Demo page</h1>
|
|
<p>To install widgets on your website, follow the <a href="https://github.com/umputun/remark#setup-on-your-website">instructions</a>.</p>
|
|
<p>See also</p>
|
|
<ul>
|
|
<li><a href="/web/last-comments.html">Last comments widget</a></li>
|
|
<li><a href="/web/counter.html">Counter widget</a></li>
|
|
</ul>
|
|
<p><Button onclick="toggleTheme()">Toggle theme</Button></p>
|
|
<div id="remark42"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var remark_config = {
|
|
site_id: 'remark',
|
|
url: 'https://remark42.com/demo/',
|
|
};
|
|
|
|
(function() {
|
|
var d = document, s = d.createElement('script');
|
|
s.src = '/web/embed.js';
|
|
s.type = 'text/javascript';
|
|
(d.head || d.body).appendChild(s);
|
|
})();
|
|
</script>
|
|
<noscript>
|
|
Please enable JavaScript to view the comments powered by Remark.
|
|
</noscript>
|
|
</body>
|
|
</html>
|