Hi, I just wanted to share this hack in case it helps anyone else. I’ve been using the Dark Mode setting on the mobile reader, and the lack of dark mode was the biggest barrier in switching to web. Anyway, here’s what I did to enable dark mode in Chrome:
- Install the Dark Mode Chrome Extension here: Dark Mode - Chrome Web Store
- Open the extension settings and choose “Dark Mode - Custom dark” and paste in the following code (note: not my code - copied from the “simple dark” setting):
/****************** begin code ********************/
html, html * {
color: #eeeeee !important;
background-color: #292929 !important;
}
html, body, html::before, body::before {
background-image: none !important;
}
img, video {
z-index: 1;
}
cite, cite * {
color: #029833 !important;
}
video {
background-color: transparent !important;
}
input, textarea {
background-color: #333333 !important;
}
input, select, button {
background-image: none !important;
}
a {
background-color: rgba(255, 255, 255, 0.01) !important;
}
:before {
color: #eeeeee !important;
}
:link, :link * {
color: #8db2e5 !important;
}
:visited, :visited * {
color: rgb(211, 138, 138) !important;
}
.sentence-text .sentence-item.lingq-word.lingq-status-0 {
background-color: #9e8f11 !important;
}
.sentence-text .sentence-item.lingq-word.lingq-status-1,
.sentence-text .sentence-item.lingq-word.lingq-status-2 {
background-color: #756a08 !important;
}
/****************** end code ********************/
Optional, but if you’re using a Macbook Pro like me and you want to make the text window wider, try this as well:
/****************** begin code ********************/
.container {
width: 1800px !important;
}
.lesson-card .lesson-content .content-left {
flex: 6 !important;
}
/****************** end code ********************/
Hope this helps someone!