WerySkok/weryskok.ru
1
0
Fork 0
mirror of https://github.com/WerySkok/weryskok.ru.git synced 2025-04-23 00:13:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

Dark theme

Browse source
This commit is contained in:
Alexander Minkin 2021-01-26 21:57:09 +03:00
parent e45456bbc6
commit 5616bc86a9
2 changed files with 66 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
404.html
View file

@ -57,6 +57,10 @@
margin-right: auto;
margin-left: auto;
}
.darkmode--activated .center {
color: #fff;
}
</style>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@ -75,6 +79,30 @@
<h1>Ошибка 404</h1>
<p>Здесь ничего нет, зря ищешь. Приходи, когда сайт будет готов.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
const options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>
</body>
</html>

40
index.html
View file

@ -46,7 +46,7 @@
}
nav {
background-color: #F8F9FA;
background-color: #f8f8f8;
box-sizing: border-box;
display: flex;
align-items: center;
@ -63,6 +63,18 @@
margin-right: auto;
margin-left: auto;
}
.darkmode--activated .center {
color: #fff;
}
.darkmode--activated .center a {
color: #5e5eff;
}
.darkmode--activated .center a:visited {
color: #895eff;
}
</style>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@ -86,8 +98,32 @@
<li><a href="mailto:i_am@weryskok.ru">i_am@WerySkok.ru</a></li>
<li><a href="mailto:weryskok@gmail.com">weryskok@gmail.com</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
const options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>
</body>
</html>