Skip to content

Instantly share code, notes, and snippets.

@NWYLZW

NWYLZW/index.html

Created November 10, 2021 07:16
Show Gist options
  • Save NWYLZW/ac3e9ab5f0cba47c2fb1a6f30d99d8b3 to your computer and use it in GitHub Desktop.
Save NWYLZW/ac3e9ab5f0cba47c2fb1a6f30d99d8b3 to your computer and use it in GitHub Desktop.
Download ZIP
hack qqcord, add dark theme.
Raw
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="app://./favicon.ico" />
<style>
div.icons {
z-index: 100000;
position: fixed;
bottom: 20px; left: 20px;
display: flex;
flex-direction: column;
}
div.icons > span[class^="el-icon-"] {
width: 32px; height: 32px;
background-color: #fff;
border: 2px solid #99d6ff;
border-radius: 100%;
color: gray;
line-height: 32px;
cursor: pointer;
transition: .3s;
display: flex;
align-items: center;
justify-content: center;
}
div.icons > span[class^="el-icon-"]:not(:last-child) {
margin-bottom: 10px;
}
div.icons > span[class^="el-icon-"]:hover {
border: 2px solid #0099ff;
box-shadow: 0 0 10px gray;
}
div.icons > span.el-icon-moon {
font-weight: bold;
color: #d6c90e;
background-color: #333;
}
div.icons > span.el-icon-sunny {
font-weight: bold;
color: orange;
}
#app.moon > .container {
background-color: #333;
}
#app.moon > .container .channel-container {
background-color: #444;
}
#app.moon > .container .channel-category__header {
color: #fff;
}
#app.moon > .container .channel-container .channel-item {
color: #fff;
}
#app.moon > .container .channel-container .channel-item.channel-clicked {
background-color: #555;
}
#app.moon > .container .channel-container .channel-item:active {
background-color: #555;
}
#app.moon > .container .chatDragDropArea {
color: #fff;
background-color: #555;
}
#app.moon > .container .chatDragDropArea .chat-main {
background-color: #555;
}
#app.moon > .container .chatDragDropArea .chat-main .chat-panel {
border-top: 1px solid #222;
}
#app.moon > .container .chatDragDropArea .chat-main .chat-panel .aio-bottom {
border-top: 1px solid #222;
}
#app.moon > .container .chatDragDropArea .chat-main .chat-panel .aio-bottom .aio-input {
color: #fff;
}
#app.moon > .container .chatDragDropArea .chat-main .chat-panel .aio-bottom .aio-input .aio-input__default .send-info .editor {
color: #fff;
}
#app.moon div.right-container > div.sender-info > span.sender-name {
color: #eee;
}
#app.moon .message.menu-open, #app.moon .message:hover {
background-color: #666;
}
#app.moon > .container .chatDragDropArea .userList {
border-top: 1px solid #222;
border-left: 1px solid #222;
background-color: #444;
}
#app.moon > .container .chatDragDropArea .userList .user-name {
color: #fff;
}
</style>
<link href="app://./css/app.19010b64.css" rel="preload" as="style"/>
<link href="app://./css/chunk-vendors.4cb5fce1.css" rel="preload" as="style"/>
<link href="app://./js/app.7bc66f3f.js" rel="modulepreload" as="script"/>
<link href="app://./js/chunk-vendors.a2780b01.js" rel="modulepreload" as="script"/>
<link href="app://./css/chunk-vendors.4cb5fce1.css" rel="stylesheet"/>
<link href="app://./css/app.19010b64.css" rel="stylesheet"/>
</head>
<body>
<noscript>
<strong>
We're sorry but qq_guild doesn't work properly without JavaScript
enabled. Please enable it to continue.
</strong>
</noscript>
<div class="icons">
<span class="el-icon-moon"></span>
<span class="el-icon-refresh"></span>
</div>
<div id="app" style="height: 100%" class="sunny"></div>
<script type="module" src="app://./js/chunk-vendors.a2780b01.js"></script>
<script type="module" src="app://./js/app.7bc66f3f.js"></script>
<script>
!(function () {
var e = document,
t = e.createElement("script");
if (!("noModule" in t) && "onbeforeload" in t) {
var n = !1;
e.addEventListener(
"beforeload",
function (e) {
if (e.target === t) n = !0;
else if (!e.target.hasAttribute("nomodule") || !n) return;
e.preventDefault();
},
!0
),
(t.type = "module"),
(t.src = "."),
e.head.appendChild(t),
t.remove();
}
})();
</script>
<script>
const app = document.querySelector('#app')
document.querySelector('div.icons > span.el-icon-refresh').addEventListener('click', () => {
location.reload()
})
document.querySelector('div.icons > span.el-icon-moon').addEventListener('click', function() {
if (this.classList.contains('el-icon-moon')) {
this.classList.remove('el-icon-moon')
this.classList.add('el-icon-sunny')
app.classList.remove('sunny')
app.classList.add('moon')
} else {
this.classList.remove('el-icon-sunny')
this.classList.add('el-icon-moon')
app.classList.remove('moon')
app.classList.add('sunny')
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment