CS_ALearn/ailearning
1
0
Fork 0
mirror of https://github.com/apachecn/ailearning.git synced 2026-04-14 02:10:01 +08:00
Code Issues Projects Releases Wiki Activity

2021-05-08 22:39:09

Browse Source
This commit is contained in:
wizardforcel
2021-05-08 22:39:09 +08:00
parent 128b78184f
commit 4bc4553837
5 changed files with 70 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
asset/dark-mode.css Normal file
View File

@@ -0,0 +1,23 @@
#dark-mode-btn {
position: fixed;
right: 20px;
top: 100px;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: background-image .15s ease-in-out .15s;
}
.dark-logo {
background-image: url('sun.svg');
}
.light-logo {
background-image: url('moon.svg');
}

42
asset/dark-mode.js Normal file
View File

@@ -0,0 +1,42 @@
document.addEventListener('DOMContentLoaded', function() {
var style = document.querySelector('#invert')
if (style == null) {
style = document.createElement('style')
style.id = 'invert'
document.head.append(style)
}
var btn = document.querySelector('#dark-mode-btn')
if (btn == null) {
btn = document.createElement('div')
btn.id = 'dark-mode-btn'
btn.classList.add('light-logo')
document.body.append(btn)
}
var enableDarkMode = function() {
style.innerText = 'html,img,pre,#dark-mode-btn{filter:invert(100%)}'
btn.classList.remove('light-logo')
btn.classList.add('dark-logo')
localStorage.darkLight = 'dark'
}
var disableDarkMode = function() {
style.innerText = ''
btn.classList.remove('dark-logo')
btn.classList.add('light-logo')
localStorage.darkLight = 'light'
}
btn.addEventListener('click', function(){
var currMode = localStorage.darkLight || 'light'
if (currMode == 'light')
enableDarkMode()
else
disableDarkMode()
})
if (localStorage.darkLight == 'dark')
enableDarkMode()
})

1
asset/moon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" stroke="#34495e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 279 B

1
asset/sun.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 648 B

4
index.html
View File

@@ -15,6 +15,9 @@
<!-- google webmaster -->
<meta name="google-site-verification" content="pyo9N70ZWyh8JB43bIu633mhxesJ1IcwWCZlM3jUfFo" />
<link rel="stylesheet" href="asset/dark-mode.css">
<script src="asset/dark-mode.js"></script>
</head>
<body>
<div id="app">now loading...</div>
@@ -57,6 +60,5 @@
<script src="asset/docsify-cnzz.js"></script>
<script src="asset/docsify-apachecn-footer.js"></script>
<script src="asset/docsify-clicker.js"></script>
<script src="asset/docsify-clicker.js"></script>
</body>
</html>