Skip to content

Instantly share code, notes, and snippets.

@trandaison

trandaison/cw-dark-mode.vue

Last active September 25, 2019 04:52
Show Gist options
  • Save trandaison/f35cb9a53f648634e8c85c989166e7e0 to your computer and use it in GitHub Desktop.
Save trandaison/f35cb9a53f648634e8c85c989166e7e0 to your computer and use it in GitHub Desktop.
Download ZIP
Chatwork dark mode
Raw
cw-dark-mode.vue
<template>
<div class="toggle-dark-theme">
Dark theme
<label class="switch">
<input type="checkbox" checked id="toggle-dark-theme">
<span class="slider round"></span>
</label>
</div>
</template>
<script>
setTimeout(function() {
console.log('DOMContentLoaded');
var isDarkModeActivated = true;
const togglerExists = document.querySelector('.toggle-dark-theme');
if (togglerExists) {
console.log('EXISTING', togglerExists);
return;
}
var parrent = document.querySelector('.globalHeader__navigation');
if (!parrent) {
console.log('PARRENT NOT FOUND', parrent);
return;
}
var span = document.createElement('span');
span.classList.add('slider', 'round');
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('id', 'toggle-dark-theme');
input.checked = isDarkModeActivated;
input.addEventListener('change', function() {
document.body.classList.toggle('default-theme', isDarkModeActivated)
isDarkModeActivated = !isDarkModeActivated;
});
var label = document.createElement('label');
label.classList.add('switch');
label.appendChild(input);
label.appendChild(span);
var div = document.createElement('div');
div.classList.add('toggle-dark-theme');
div.innerHTML = 'Dark theme';
div.appendChild(label);
parrent.prepend(div);
return input;
}, 5000);
</script>
<style lang="scss">
#_subRoomDescriptionWrapper {
height: calc(100vh - 165px) !important;
}
.roomContent {
right: 300px !important;
}
.toggle-dark-theme {
color: #cccccc;
display: inline-flex;
align-items: center;
.switch {
margin: auto 10px;
position: relative;
display: inline-block;
width: 36px;
height: 22px;
input {
opacity: 0;
width: 0;
height: 0;
}
input:checked+.slider {
background-color: #000;
}
input:checked+.slider:before {
transform: translateX(14px);
background: #fff;
}
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #484848;
transition: .3s ease;
border: 2px solid #cccccc;
border-radius: 9999px;
&:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 2px;
bottom: 2px;
background-color: #848484;
border-radius: 50%;
transition: .3s ease;
}
}
}
body:not(.default-theme) {
/*
._showDescription {
max-width: 124px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
*/
.actionNav {
filter: invert(90%);
}
.chatInfo {
background: transparent;
.title {
background: rgba(242, 242, 242, 0.10);
color: #adadad;
}
}
.chatInput {
border: 1px solid #425075;
&__settingEnterAction {
white-space: nowrap;
}
&__textarea {
&--existExternalUser {
background: #20272b;
}
}
&__textarea {
&::placeholder {
color: rgba(122, 137, 148, .5);
}
}
&__textareaContainer {
background: #20272b;
}
&__tools {
border-bottom: 1px solid #e6d8ad;
filter: invert(90%);
}
}
.chatRoomHeader {
background-color: black;
border-bottom: 1px solid #424242;
border-left: 1px solid #424242;
}
.chatSendArea {
background: #3e4448;
&__areaScaleButtonLeft {
&:hover {
background: #4d555d;
}
}
}
.timelineMessage {
&.chatTimeLineMessageHover {
background-color: #1a1d21;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
}
.messageBadge {
.chatTimeLineReply,
.chatTimeLineTo,
&__toAllBadge {
background-color: #006528;
}
}
.quoteText {
border-left: 2px dashed #475d84;
color: rgba(122, 137, 148, .5);
padding: 5px 0 5px 10px;
}
.reactionButton {
background-color: #000;
}
.roomContent {
background: #121517;
border-left: none;
border-right: none;
}
.roomDescription {
&__description {
&--overflow {
&:hover {
background: #20272b;
}
}
}
}
.roomDescription__header,
.roomTask__header,
.sc-jrIrqw {
background-color: rgba(230, 230, 230, .1);
}
.roomInformationContentContainer {
background: #20272b;
}
.roomListHeader {
filter: invert(100%);
}
.sc-cJSrbW {
background: #131621;
p {
color: #7a8994;
&.iaaGZM {
color: #465169;
}
}
&.gjGWIu {
background: #000;
}
}
.sc-gGBfsJ {
&.cfFvEk {
background: #81a781;
color: #05460d;
}
}
.sc-jrIrqw {
border: none;
}
.sc-feJyhm {
&.hjDIYs {
background: #323233;
}
div[role="button"] {
filter: invert(85%);
}
}
.timeLine {
&:focus {
border: none;
}
&__dateHead {
border-top: 2px solid black;
}
&__dateHeadBody {
background: black;
}
&__dateHeadText {
color: white;
}
}
.timelineMessage {
&--border {
border-top: 1px solid #525252;
}
&--mention {
background-color: #101a1f;
border-bottom: 1px solid #054958;
border-top: 1px solid #077d98;
pre {
color: #839c8c;
}
}
&--jumpMessage {
border-bottom: 1px solid #054958 !important;
border-top: 1px solid #077d98 !important;
background: #162831 !important;
color: #b1b2b3 !important;
}
&__reactionUserListContainer {
filter: invert(100%);
}
&__avatar {
.avatarMedium {
background-color: #077d98;
}
}
}
.chatCode {
filter: invert(85%);
}
::-webkit-scrollbar {
background: #141621;
overflow: visible;
width: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 99999px;
}
::selection {
background: rgba(162, 199, 230, 0.25);
color: #b5b7b9;
}
body,
pre,
input,
select,
textarea,
button {
color: #7a8994;
}
}
</style>
Raw
raw-script.js
setTimeout(function() {
console.log('DOMContentLoaded');
var isDarkModeActivated = true;
const togglerExists = document.querySelector('.toggle-dark-theme');
if (togglerExists) {
console.log('EXISTING', togglerExists);
return;
}
var parrent = document.querySelector('.globalHeader__navigation');
if (!parrent) {
console.log('PARRENT NOT FOUND', parrent);
return;
}
var span = document.createElement('span');
span.classList.add('slider', 'round');
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('id', 'toggle-dark-theme');
input.checked = isDarkModeActivated;
input.addEventListener('change', function() {
document.body.classList.toggle('default-theme', isDarkModeActivated)
isDarkModeActivated = !isDarkModeActivated;
});
var label = document.createElement('label');
label.classList.add('switch');
label.appendChild(input);
label.appendChild(span);
var div = document.createElement('div');
div.classList.add('toggle-dark-theme');
div.innerHTML = 'Dark theme';
div.appendChild(label);
parrent.prepend(div);
return input;
}, 5000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment