Basic Dark Mode Theme

[aquasurge7]

A basic dark mode theme made by me.

My intentions with this were to have a nice and clean dark mode that didn’t really change anything that didn’t need changing. Some pictures:

Credit to SARUOU for the footer gif, of which I have taken from his Dark Azure 2 theme, of which you can find here: Wanikani Dark Azure 2 Theme

It should work for both Firefox (which I primarily use) and Chrome.

I tried my best to get everything as perfect as possible, however due to my inexperience with CSS, as well as some weird HTML on WaniKani’s end, I couldn’t get it absolutely perfect. However, I am very happy with how it turned out.

Here are some things that could be improved:

• Multiple little issues with the magnifying glass (the search icon). Manually fixed the sizing, but the hover functions different, and the search bar sizing itself is also different between the dashboard and levels pages. These issues are from WaniKani’s end and I tried my best to fix them.
• There is a small black border around the search icon when it is the last clicked element (I think in the css this is called “active/visited”) and I am not sure how to remove it/set it to the same as the header bg color.
• Can’t figure out why when radicals/kanji/vocabulary nav menus on dashboard when expanded border doesnt change on hover but in levels when expanded the border does change on hover. this only after you click out of the window.
• When attempting to change the hover colours for the links on the contact us page, it also changes the headers in the nav drop downs hovers. but when you change it in the html (not in the user css), it doesnt. Maybe I was brainfried at the time, but not sure about this one and haven’t bothered to revisit.
• When trying to make the nav link container on the settings:app page transparent, instead it turns white. Preferably would like there to be nothing here.
• input#user_username under the settings: account page, the background color is yellowish when your username is already there. Not sure how to change.
• Border sizing on subscription page between the “manage plan” and “purchase” buttons are different and it looks weird. This is on wanikani’s end, but is fixable, just could not be bothered atm. Getting the borders to not be shared with the search button border was enough of a hassle already, don’t want to mess around with it anymore.
• Colour scheme chosen for reviews, specifically the drop down boxes using #2a2a2a as the background color, means the “patterns of use” section sub-collocations are darker than the background of the box, but I couldn’t be bothered figuring out a solution. If you decide to make the sub-collocations brighter, then, you have to make the highlighted one even brighter, which means the white text will no longer be contrasting, which means i will have to switch the text to black, and then have it swap to white on hover/focus? Just doesn’t seem worth it.
• The little question mark on the extra study section has a hover effect when it shouldn’t. This is because it shares some elements with buttons, and I wasn’t sure how to adjust the buttons without adjusting the question mark.
• On chrome, if you have auto-fill login details enabled, the textbox in the sign in area will be semi transparent.

It’s important to mention that I adjusted the height of reviews header and question type containers on the reviews page, basically to make it closer to how it was before the UI update. I also adjusted the margin on the small kanji element in lessons to stop it from getting covered up by the navigation block. I am only saying this because I’m not sure if these size changes will be 1 to 1 between different monitor sizes and setups. They were only minor changes, but I’m still not sure. I made this theme using a 1920x1080 monitor. If you have any issues with these, please let me know and I’ll see if there is a different solution.

These “adjustments” can be found in the code under .character-header__content, .quiz-input__question-type-container, and .subject-character–small .subject-character__characters if you need to make any adjustments.

You will need the Stylus extension which can be installed for both Firefox and Chrome. Once installed, follow the link and install the userstyle.

WK Basic Dark Mode by eggbiscuit1

If the link doesn’t work for whatever reason, I will also be updating the code here. You can manually install it following the instructions below:

Once installed, open up Stylus, go to Manage, once in, on the left under “Actions”, click “Write new style”. Copy and paste this in, and click Overwrite style. Give it a name (at the top-left), hit save, and you should be good to go.

@-moz-document domain("www.wanikani.com") {
/* WK Basic Dark Mode by aquasurge7 */
/* Version 1.1.7 */

/* Notes:

- Credit to SARUOU for the footer gif from Dark Azure 2. If they do not wish for it to be used here, please just notify me.

- If you wish to edit or modify this theme, please do so to your heart's content. If you wish to publish a modified version of this (as I have done with my modified version of Dark Azure 2), please feel free to do so. I only ask that you give credit me for the base of the theme, as well as do not attempt to monetize off of it. I doubt these things would be an issue for the wanikani community anyway, and most likely only a few people will end up getting use out of my dark mode.

- The code isn't perfectly divided. There are page categories, which were the order I coded in. However, modifying some elements will make changes across multiple pages, so please be aware.

*/

/* Page: Dashboard */

body {
    color:#fff;
    background-blend-mode:color-burn;
    background-color:#222;
}

p, ol, figcaption, .body-copy, .body-copy li {
    text-shadow: 0 1px 0 #000;
}

h1, html#public-profile div.wall-of-shame div.title, h2, h3 {
    text-shadow: 0 1px 0 #000;
}

#main footer {
    background-image: url(https://raw.githubusercontent.com/misabiko/Wanikani-Grayish-Blueish-Dark/master/Assets/footer-bg-invert.gif) !important;
    background-position: top !important;
}

.text-black {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity));
}

.sitemap__section-header {
    color:#fff;
    text-shadow:0 1px 0 #000;
}

.global-header{
    background-image:none;
    background-color:#111;
}

.community-banner {
    background-color:#333;
    border:none;
}

.community-banner__link {
    color:#fff;
}

.community-banner__link:hover {
    color:#fff
}

.community-banner__text, .community-banner__cta, .community-banner__title {
    text-shadow:0 1px 0 #000;
}

.global-header {
    border-bottom: 1px solid #555;
}

.dashboard section.forecast {
    background-color:#333;
}

.dashboard section.dashboard-progress, .dashboard section.forecast, .dashboard section.newbie, .dashboard section.upgrade, .dashboard section.system-alert, .dashboard section.alert-where-user-scripts-cant-ignore, .community-banner, .dashboard-panel {
    box-shadow: 0 1px 0 #2A2A2A;
}

.review-forecast__day.is-collapsed .review-forecast__day-header {
    color:#333
}
    
.forecast * {
    color:#fff;
}

.bg-white {
    background-color:#444;
}

.review-forecast__day-header::before {
    background-color: rgba(51,51,51,var(--tw-bg-opacity));
}

.dashboard section.dashboard-progress {
    background-color:#333;
}

.sm\:w-full {
    filter: invert(73.5%);
}

.fa-magnifying-glass::before, .fa-search::before {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

button#search__trigger.hover\:border-transparent-1:hover {
    background-color:#0000;
    border-color:rgba(255, 255, 255, 0.2);
}

button#search__trigger.hover\:border-transparent-3:hover {
    background-color:#0000;
    border-color:rgba(255,255,255,.4);
}

button#search__trigger.hover\:border-transparent-1 {
    color:#0000;
    background-color:#0000;
    border-color:#0000
}

button#search__trigger.hover\:border-transparent-3 {
    color:#0000;
    background-color:#0000;
    border-color:#0000
}

.navigation-shortcut__button {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.navigation-shortcut__button:hover {
    color:#fff;
    border-color:rgba(255, 255, 255, .4);
}

.navigation-shortcut__button:focus {
    color:#fff;
}

section.srs-progress ul li:first-child {
    box-shadow: 0 1px 0 #dd0093;
}

section.srs-progress ul li:nth-child(2) {
    box-shadow: 0 1px 0 #882d9e;
}

section.srs-progress ul li:nth-child(3) {
    box-shadow: 0 1px 0 #294ddb;
}

section.srs-progress ul li:nth-child(4) {
    box-shadow: 0 1px 0 #0093dd;
}

section.srs-progress ul li:last-child {
    box-shadow: 0 1px 0 #434343;
}

.dashboard-sub-section h3 {
    color:#fff;
    text-shadow:0 1px 0 #000;
    background-color:#333;
}

.dashboard section.dashboard-sub-section div.see-more {
    background-color:#333;
    box-shadow: 0 1px 0 #2A2A2A;
}

.dashboard section.dashboard-sub-section a.small-caps {
    color:#eee;
    text-shadow: 0 1px 0 #000;
}

.dashboard section.dashboard-sub-section a.small-caps:hover {
    color: #999;
}

.kotoba-table-list table tr.none-available {
    background-color:#333;
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.kotoba-table-list table tr.none-available div {
    border: 5px solid #fff;
    box-shadow:0 1px 0 #2A2A2A;
}

.sitemap__section-header:hover {
    border-color:rgba(255, 255, 255, .2)
}

.sitemap__section-header:focus{
    border-color:rgba(255, 255, 255, .4)
}

.sitemap__section-header[data-expanded="true"] {
    border-color:rgba(255,255,255,.4);
}

.sitemap__section-header--vocabulary:hover {
    border-color:rgba(170,0,255,0.25);
}

.sitemap__section-header--kanji:hover {
    border-color:rgba(255,0,170,0.25);
}

.sitemap__section-header--radicals:hover {
    border-color:rgba(0,170,255,0.25);
}

.sitemap__expandable-chunk > :first-child {
    background-color:#222;
}

.sitemap__pages--levels .sitemap__page a {
    background-color:#333;
}

ul.sitemap__pages.sitemap__pages--radical{
    background-color:#00AAFF;
}

ul.sitemap__pages.sitemap__pages--kanji{
    background-color:#FF00AA;
}

ul.sitemap__pages.sitemap__pages--vocabulary{
    background-color:#AA00FF;
}

.sitemap__section-header--radicals:focus {
    border-color:#00AAFF;
}

.sitemap__section-header--kanji:focus {
    border-color:#FF00AA;
}

.sitemap__section-header--vocabulary:focus {
    border-color:#AA00FF
}

.search-form form .search-query {
    color:#fff;
    background-color:#111;
}

button.flex-initial.rounded.bg-gray-500.text-white.font-bold.border-0.px-3.py-1 {
    background-color:#333;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

button.flex-initial.rounded.bg-gray-500.text-white.font-bold.border-0.px-3.py-1:hover {
    background-color:#444;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

button.flex-initial.rounded.bg-gray-500.text-white.font-bold.border-0.px-3.py-1:focus {
    box-shadow:none;
}

.text-gray-800 {
    color:#fff;
    text-shadow:#000
}

.text-blue-500 {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.text-blue-500:hover {
    color:#999;
}

.border-blue-300 {
    border-color:#eee;
}

*, ::after, ::before {
    --tw-ring-color: rgba(59,130,246,0.0);
}

.bg-gray-300 {
    background-color:#2A2A2A;
}

a:focus {
    color:#fff;
}

.sitemap__section-header--radicals[data-expanded="true"], .sitemap__section-header--radicals:focus {
    outline: none;
    border-color: #00AAFF;
}

.sitemap__section-header--kanji[data-expanded="true"], .sitemap__section-header--kanji:focus {
    outline: none;
    border-color: #FF00AA;
}

.sitemap__section-header--vocabulary[data-expanded="true"], .sitemap__section-header--vocabulary:focus {
    outline: none;
    border-color: #AA00FF;
}

.disabled\:text-gray-700:disabled {
    color:#fff;
}

button.border.border-solid:hover {
    color: #fff;
    background-color: #fff0;
    border-color: #888;
}

.sitemap__page--login a{
    color:#fff;
}

/* Page: Levels */

.character-grid__header {
    color:#fff;
    text-shadow:0 1px 0 #000;
    background-color:#333;
}

.progress-bar__bar {
    background-image: linear-gradient(to bottom, #555, #333);
}

.progress-bar {
    background-color: #2A2A2A;
}

.subject-legend {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
}

.subject-legend__title {
    color:#fff;
}

.page-header__title {
    text-shadow: 0 1px 0 #000;
}

.page-nav {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.page-nav__item-link{
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color: #333;
    border: 1px solid #333;
}

.page-nav__item-link:hover {
    color:#000;
    text-shadow: 0 1px 0 #fff;
    background-color:#ccc;
    border: 1px solid #ccc;
    transition: color ease-out .1s,background-color ease-out .1s, border ease-out .1s;
}

.page-nav__item-link, .page-nav__item-link:visited {
    color: white;
}

.page-nav__item-link:hover {
    color:#000;
}

.navigation-shortcut__link {
    border: 2px solid rgba(255, 255, 255, 0.2);
    color:#fff;
}

.navigation-shortcut__link:hover {
    border-color: rgba(255,255,255,0.4);
}

.search-button {
    border-color:rgb(17, 17, 17);
    transition: border-color ease-out .15s;
}

.search-button:hover {
    border-color:rgba(255,255,255,0.2);
    transition: border-color ease-in .15s;
}

.search-button__icon {
    flex: 0 0 auto;
    font-size: 16px;
    padding: 0 1px 0 0;
}

.footer {
    background-image: url(https://raw.githubusercontent.com/misabiko/Wanikani-Grayish-Blueish-Dark/master/Assets/footer-bg-invert.gif) !important;
    background-position: top !important;
}

/* Page: Radicals */

.subject-pager__item-link, .subject-pager__item-link:visited {
    color:#ccc;
    text-shadow: 0 1px 0 #000;
}

.subject-section__title {
    text-shadow: 0 1px 0 #000;
}

.user-synonyms__button, .user-synonyms__button:visited, .user-synonyms__button:focus {
    color:#fff;
    background-color:#333;
    text-shadow: 0 2px 0 #000;
}

.user-synonyms__button:hover {
    color: #ccc;
}

.user-synonyms__form-input {
    color:#fff;
    background-color:#111;
    border: 1px solid #333;
}

.subject-section__subtitle {
    text-shadow: 0 1px 0 #000;
}

.subject-section__text {
    text-shadow: 0 1px 0 #000;
}
    
.subject-progress {
    text-shadow: 0 1px 0 #000;
}
    
.subject-progress__button {
    color:#fff;
    border: 1px solid #444;
    background-image: linear-gradient(to bottom, #333, #111);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
}
    
.subject-progress__button:hover {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-image: linear-gradient(to bottom, #444, #222);
}

.subject-progress__button:focus {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}


.subject-progress__streak-value {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#555;
}

.user-note__input {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
}

.user-note__footer {
    background-color:#444;
}
    
.user-note__button, .user-note__button:visited, .user-note__button:active, .user-note__button:focus {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.user-note__button:hover {
    color:#ccc;
}

.user-note__character-count-text {
    color:#aaa;
    text-shadow: 0 1px 0 #000;
}
    
.fa-pencil-alt::before, .fa-pencil::before {
    color:#aaa;
    text-shadow: 0 1px 0 #000;
}
    
.user-note__link, .user-note__link:visited {
    color:#999 !important;
}

.user-note__link:hover {
    color:#777 !important;
}

.subject-pager__item-link:hover {
    color: #888;
}

fieldset.user-note__fields {
    background-color:#444;
}

.user-synonyms__form-input:focus {
    border-color:rgba(255,255,255,0.8);
    box-shadow:0 0 8px rgba(255,255,255,0.6)
}

.user-synonym, .user-synonym:visited {
    color:#fff;
    text-shadow: 0 2px 0 #000;
    background-color:#0000;
}

.user-synonym:hover, .user-synonym:focus {
    color:#fff;  
}

.user-synonym__delete-icon {
    color:#fff;
    text-shadow: 0 2px 0 #000;
    background-color:#444;
}

.user-synonym__delete-icon:hover { 
    color:#dc2626
}
    
.alert-info {
    color: #fff;
    text-shadow: 0 1px 0 #000;
    background-color: #ffffff17;
}

.alert-close {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.alert-close:hover {
    color:#666;
}

.alert-close:focus {
    color:#666;
}

.search__query {
    color:#fff;
    background-color:#111;
}

.search__button {
    background-color:#333;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.7)
}

.search__button:hover {
    background-color:#444;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.7);
    cursor:pointer;
}

.search__button:focus {
    box-shadow:none;
}

/* Page: Kanji */

.component-character__meaning {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.subject-hint {
    color:#fff;
    background-color:#333;
}

.subject-hint__title {
    color:#ddd;
    text-shadow: 0 1px 0 #000;
}

.components-list__item::after {
    text-shadow: 0 1px 0 #000;
}

.subject-readings__reading-title {
    text-shadow: 0 1px 0 #000;
}

.turbo-progress-bar {
    background:#fff;
}

/* Page: Vocabulary */

.subject-readings-with-audio {
    text-shadow: 0 1px 0 #000;
}

.subject-collocations__title {
    text-shadow: 0 1px 0 #000;
}

.subject-collocations__pattern-name {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#222;
    
}

.subject-collocations__pattern-name:hover {
    background-color: #333;
    text-shadow: 0 1px 0 #000;
}

.subject-collocations__pattern-name[aria-selected="true"] {
    color:#fff;
    text-shadow: 0 1px 0#000;
    background-color:#444;
}

.subject-collocations__pattern-name[aria-selected="true"]::after {
    background-color:#444;
}

/* Page: Contact Us */

input#subject, textarea#body, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color: #111;
    border: 1px solid #ccc;
}

input#subject:focus, textarea#body:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus, textarea#user_about:focus {
    border-color:rgba(255, 255, 255, .8);
    box-shadow:0 0 8px rgba(255,255,255,0.6)
}

input#attachment {
    color-scheme: dark;
}

.btn {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background:#333;
    border-color:#2A2A2A;
    box-shadow: inset 0 1px 0 rgb(68, 68, 68), 0 1px 2px rgb(42, 42, 42);
}

.btn:hover {
    color:#000;
    text-shadow: 0 1px 0 #fff;
    background:#ccc;
    border-color:#d4d4d4;
    box-shadow: inset 0 0px 0 rgb(153, 153, 153), 0 1px 2px rgb(204, 204, 204);
}

.btn:focus {
    color:#000;
    text-shadow: 0 1px 0 #fff;
    background:#ccc;
    border-color:#d4d4d4;
    box-shadow:none;
}

.alert, .error {
    color: #fff;
    text-shadow: 0 1px 0 #000;
    background-color: #ffffff17;
    border:none;
}

::selection {
    background:#666
}

/* Page: Profile */

html#public-profile div.wall-of-shame {
    background-color:#2220;
}

html#public-profile div.wall-of-shame ul li > span:first-child {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

div.chart {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

html#public-profile div.wall-of-shame .progress {
    background-color:#2A2A2A;
    background-image:none;
}

.progress {
    background-color:#2A2A2A;
}

html#public-profile div.wall-of-shame h3 span {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
    box-shadow: inset 0 5px 5px rgba(0,0,0,0.0),0 1px 0 rgba(42,42,42,1);
}

html#public-profile footer {
    background-image: url("https://raw.githubusercontent.com/misabiko/Wanikani-Grayish-Blueish-Dark/master/Assets/footer-bg-invert.gif") !important;
    background-position: top !important;
}

html#public-profile .public-profile-header div.user-info {
    background-image: linear-gradient(to bottom, #222, #111);
    box-shadow: inset 0 15px 15px -15px rgba(0,0,0,0.9),inset 0 -15px 15px -15px rgba(0,0,0,0.9);
}

html#public-profile .public-profile-header div.user-info div[class*="span"] {
    text-shadow: 0 1px 0 #000;
}

html#public-profile .public-profile-header div.user-info h3.small-caps {
    color:#999;
    text-shadow: 0 1px 0 #000;
}

/* Page: Settings - App */

.page-list ul {
    background-color:#222;
    padding-top: 4px;
}

.page-list ul > li > a, .page-list ul > li > span {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
    border-color:#222;
}

.page-list ul > li > a:hover {
    color:#000;
    text-shadow: 0 1px 0 #fff;
    background-color:#ccc;
    border-color: #ccc;
    transition: color ease-out .1s,background-color ease-out .1s, border ease-out .1s;
}

.page-list ul > li.active a {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#555;
}

.page-list ul > li.active a:hover {
    color:#000;
    text-shadow: 0 1px 0 #fff;
    background-color:#ccc;
    border-color:#ccc;
    transition: color ease-out .1s,background-color ease-out .1s, border ease-out .1s;
}

.settings-section {
    background-color:#333;
    box-shadow: inset 0 -1px 1px #2a2a2a;
}

form label {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

aside {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.account-settings form.form-auto-submit-on-select-change select {
    color:#fff;
    background-color: #1A1A1A;
    border-color:#555;
}

/* Page: Terms */

.short-version {
    background-color:#333;
}

/* Page: Settings - Account */

/* Page: Settings - API */

.wk-modal__window {
    color:#fff;
    background-color:#2A2A2A;
}

h2 {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

code {
    background-color:#111;
    border: 1px solid #555;
}

.wk-modal__close {
    color:#ccc;
    text-shadow: 0 1px 0 #000;
}

.wk-modal__close:hover {
    color:#888;
}

.personal-access-token-permission__description {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.personal-access-token-permissions__namespace-header {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.personal-access-token-permission__label {
    color:#fff;
    text-shadow: 0 1px 0 #000;    
}

/* Page: Settings - Profile */

textarea#user_about {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#111;
    border: 1px solid #ccc;
}

/* Page: Settings - Danger Zone */

select#user_reset_target_level {
    color:#fff;
    background-color:#1A1A1A;
    border-color:#555;
}

button.btn.btn-danger {
    background-color:#bd362f;
}

button.btn.btn-danger:hover {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    box-shadow:none;
}

button.btn.btn-danger:focus {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}


/* Page: Subscription */

.bg-gray-100 {
    background-color:#333;
}

a.border-solid {
    color:#fff;
    background-color:#4a4a4a;
    border-color:#888
}

a.border-solid:hover {
    color:#fff;
    background-color:#5a5a5a;
    border-color:#999
}

button.border-solid {
    color:#fff;
    background-color:#4a4a4a;
    border-color:#888
}

button.border-solid:hover {
    color:#fff;
    background-color:#5a5a5a;
    border-color:#999;
}

dt.box-border {
    color:#fff;
    
}

dd.box-border {
    color:#fff;
}

/* Page: Sign In */

#explanation .bg-angled {
    background-color:#222;
}

#explanation h2 {
    color:#888;
}

button.button {
    color:#ccc;
    border-color:#ccc;
}

button.button:hover {
    color:#fff;
    border-color:#fff;
}

/* Page: Reviews */

.additional-content__item {
    color: #ccc;
    background-color: #2a2a2a;
    box-shadow: 2px 2px 4px #161616;
    border: 1px solid #0000;
}

.additional-content__item--disabled {
    background-color: #222;
    box-shadow: 3px 3px 0 #161616;
    color: #ccc;
}

.quiz-input__input {
    box-shadow: 3px 3px 0 #161616;
}

input#user-response.quiz-input__input {
    color:#ccc;
    background-color:#2A2A2A;
    border:none;
}

input#user-response.quiz-input__input:focus {
    color:#fff;
    box-shadow: 3px 3px 0 #161616;
}

.quiz-input__input-container[correct="true"] .quiz-input__input {
    background-color:#78b000 !important;
    color:#fff !important;
    text-shadow: 1px 1px 0 #000000bf !important;
    caret-color: #78b000 !important;
    box-shadow:  3px 3px 0 #4d7300;
}

.quiz-input__input-container[correct="true"] .quiz-input__input:focus {
    box-shadow: 3px 3px 0 #4d7300 !important;
}

.quiz-input__input-container[correct="false"] .quiz-input__input {
    background-color:#d0002a !important;
    color: #fff !important;
    text-shadow: 1px 1px 0 #000000bf !important;
    caret-color:#d0002a !important;
    box-shadow:  3px 3px 0 #a20021;
}

.quiz-input__input-container[correct="false"] .quiz-input__input:focus {
    box-shadow:  3px 3px 0 #a20021 !important;
}

div.answer-exception {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#444;
    box-shadow: 3px 3px 0 #333;
}

.answer-exception::before {
    border-color: transparent transparent #444 transparent;
}

:root {
    --color-quiz-srs-correct-background: #8c0;
    --color-quiz-srs-incorrect-background: #f00;
    color-scheme: dark;
}

.quiz-input__exception {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#444;
    box-shadow: 3px 3px 0 #333;
}

.quiz-input__exception::before {
    border-color: transparent transparent #444 transparent;
}
    
.quiz-input__question-type-container[data-question-type="reading"] {
    background-image: linear-gradient(#333, #111);
    border-top: 1px solid #555;
    border-bottom: 1px solid #000;
    color: #fff;
    text-shadow: 0 1px 0 #000;
}    
    
.quiz-input__question-type-container[data-question-type="meaning"] {
  background-image: linear-gradient(#EAEAEA, #BBB);
  border-top: 1px solid #d5d5d5;
  border-bottom: 1px solid #c8c8c8;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}    

turbo-frame#subject-info.subject-info {
    background-color:#2a2a2a;
}

.additional-content__content {
    border: 2px solid #333;
    box-shadow: 2px 2px 4px #222;
}

turbo-frame#last-items.last-items {
    background-color:#2a2a2a;
}

.subject-info[busy]:after {
    background-color:#2a2a2a;  
    background-image:url(https://assets.wanikani.com/assets/v03/loading-100x100-08cd6590501550b2812b26b2dd9166d8fd3628b7546d34e50c49d2e96483943c.gif);
}

.last-item {
    text-shadow: 0 1px 0 #000;
    background-color:#3a3a3a;
    box-shadow: 2px 2px 4px #222;
}

.last-item__value {
    color:#fff;
}

.last-item:hover {
    background-color:#4a4a4a;
}
.subject-info .subject-collocations__pattern-name[aria-selected="true"]::after {
    background-color: #808080;
    background-image: none;
}

.additional-content__item--open:after {
    border-color:transparent transparent #333 transparent
}

.kana-chart {
    background-color: #2a2a2a;
}

.kana-chart__tab {
    text-shadow: 0 1px 0 #000;
}

.kana-chart__character {
    text-shadow: 0 1px 0 #000;
    background-color:#3a3a3a;
}

.kana-chart__character:hover {
    background-color:#555;
}    

.kana-chart__tab--selected {
    border-color: #777 #777 transparent #777;
}

.kana-chart__tab:not(.kana-chart__tab--selected) {
    border-bottom-color: #777;
    color:#aaa
}

.kana-chart__tab:not(.kana-chart__tab--selected):hover {
    color: #fff;
}

.kana-chart__backspace {
    color:#fff;
    background-color:#3a3a3a;
}

.kana-chart__backspace:hover {
    background-color:#555;
}
.kana-chart__backspace-text {
    text-shadow: 0 1px 0 #000;
}

.last-items[busy] {
    background-color:#2a2a2a;
    min-height:80px
}

.last-items[busy]:after {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    content:" ";
    background-color:#2a2a2a;
    background-image:url(https://assets.wanikani.com/assets/v03/loading-100x100-08cd6590501550b2812b26b2dd9166d8fd3628b7546d34e50c49d2e96483943c.gif);
    background-repeat:no-repeat;
    background-size:75px auto;
    background-position:50% 50%;
    z-index:1000
}   

.character-header__content {
    height: 250px;
}

.quiz-input__question-type-container {
    font-size: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Page: Lessons */

.subject-slide__content {
    background-color:#2a2a2a;
}

.subject-slide__navigation, .subject-slide__navigation:visited {
    background-color:#2a2a2a;
}

.subject-slide__navigation:hover {
    color:#fff;
}

.subject-slide__navigation:hover .subject-slide__navigation-icon {
    background-color:#333;
}

.subject-character__meaning {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.subject-slide {
    background-color: #2a2a2a;
    box-shadow: 2px 2px 4px #222;
    border: 2px solid #333;
}

.wk-button--quiz {
    color:#fff !important;
    background-color:#8c0 !important;
}

.subject-slides__navigation {
    text-shadow: 0 1px 0 #000;
    background-color:#222;
}

.subject-character--tiny .subject-character__characters {
    box-shadow: 0 -1px 0 rgba(0,0,0,0.2) inset,0 0 10px rgba(255, 255, 255, 0.25);
}

.wk-button--tiny {
    box-shadow: 0 -1px 0 rgba(0,0,0,0.2) inset,0 0 10px rgba(255, 255, 255, 0.25);
}

.subject-slides__navigation-link[aria-selected=true]:after {
    border-color:transparent transparent #333 transparent;
}

.hotkeys-menu__header, .chat-button {
    color:#ccc;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
    border-radius: 0 0 0 0;
    border-color:#333;
}

.hotkeys-menu__header:hover, .chat-button:hover {
    color:#fff;
}

.wk-button--modal-primary, .wk-button--modal-secondary, .wk-button {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
    border-color:#444;
}

.wk-button--modal-primary:hover, .wk-button--modal-secondary:hover, .wk-button:hover {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#444;
    border-color:#555
}

.hotkeys-menu__header {
    background-color:#333;
}

.hotkeys-menu--open .hotkeys-menu__header-text {
    color:#fff;
}

.hotkeys-menu--open {
    color:#fff;
}

.hotkeys-menu--open .hotkeys-menu__header {
    color:#fff;
}

.hotkeys-menu--open .hotkeys-menu__content {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
}

.wk-button--modal-primary:focus, .wk-button--modal-secondary:focus, .wk-button:focus {
    outline:solid 2px #ccc;
    outline-offset:2px
}

.wk-hint {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
}

.wk-hint__title {
    color: #ddd;
    text-shadow: 0 1px 0 #000;
}

.hotkeys-menu {
    background-color:#333;
}

.user-synonyms__form_container {
    background-color:#222;
}

.user-synonyms__synonym-button {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color:#333;
    
}

.user-synonyms__synonym-button:hover {
    background-color:#3a3a3a;
}

.user-synonyms__synonym-button:focus {
    outline:solid 2px #ccc;
    outline-offset:2px;   
}

.wk-button--default:hover {
    cursor:pointer;
}

/* Extra study change (update 1.0.6)*/

.dashboard-panel {
    background-color:#333;
}

.extra-study__content {
    background-color:#444;
}

.dashboard-panel__title {
    text-shadow: 0 1px 0 #000;
}

.extra-study__image {
    filter: invert(73.5%);
}

.extra-study__intro {
    text-shadow: 0 1px 0 #000;
}

.extra-study-button__link {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.extra-study-button__link:hover {
    color:#999;
}

.extra-study-button__tooltip-button {
    color:#fff;
    border: 1px solid #999;
}

.extra-study-button {
    border: 1px solid #fff;
}

/* Dashboard Panel quick changes (update 1.0.7) */

.level-progress-bar {
    background-color:#2a2a2a;
}

.level-progress-dashboard__content {
    background-color:#444;
}

.subject-character--small .subject-character__characters {
    box-shadow: 0 -3px 0 rgba(0,0,0,0.2) inset,0 0 10px rgba(255,255,255,0.0);
}

/* Recent mistakes update quick changes (update 1.0.8) */

.recent-mistakes-dashboard__content {
    background-color:#444;
}

.recent-mistakes-dashboard__empty-image {
    filter: invert(73.5%);
}

/* Dashboard Panel changes (again) (update 1.1.0) */

.extra-study {
    background-color: #444;
}

.review-forecast__day {
    background-color: #444;
}

.dashboard-panel__content [busy]::after {
    background-color:#333;
}

.review-forecast__day-header:not([aria-controls]) .review-forecast__expanded-icon {
    color: #888;
}

.review-forecast {
    padding: 0 5px 0 0;
}
    
/* Dashboard panel fixes + other 25/10/23 (update 1.1.1) */
    
.wk-panel {
    background-color:#333;
}
    
.wk-panel__content [busy]::after {
    background-color:#333;
}

.dashboard .progress-and-forecast .wk-panel--level-progress {
    border-radius:5px;
    box-shadow: 0 1px 0 #2a2a2a;
}    
    
.dashboard .progress-and-forecast .wk-panel--review-forecast {
    border-radius:5px;
    box-shadow: 0 1px 0 #2a2a2a;
}
    
.dashboard .progress-and-forecast .wk-panel--extra-study {
    border-radius:5px;
    box-shadow: 0 1px 0 #2a2a2a;
}
    
.dashboard .progress-and-forecast .wk-panel--recent-mistakes {
    border-radius:5px;
    box-shadow: 0 1px 0 #2a2a2a;
}
    
.wk-nav__item-link {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background-color: #333;
    border: 1px solid #333;
}    
    
.wk-nav__item-link:hover {
    color:#000;
    text-shadow: 0 1px 0 #fff;
    background-color:#ccc;
    border: 1px solid #ccc;
    transition: color ease-out .1s,background-color ease-out .1s, border ease-out .1s;
}
   
.wk-nav__item-link:visited {   
    color:#fff;
    text-shadow: 0 1px 0 #000;
}  
   
.wk-nav__item-link:hover {
    color:#000;
}
   
.wk-title--small {
    text-shadow: 0 1px 0 #000;
}
   
.wk-nav {
    text-shadow: 0 1px 0 #000;
    color: #fff;
}

/* Fixing forecast turbo frame 21/12/2023 (update 1.1.2) */

turbo-frame[data-show-loading="true"][busy]::after {
    color:#333;
    background-color:#333;
}

/* Forecast image thingy 30/12/2023 (update 1.1.3) */
.review-forecast__empty-content {
    filter: invert(73.5%);
}

/* UI changes and lesson/review buttons (update 1.1.4) */

.lesson-and-review-count__item:hover .lesson-and-review-count__label {
    border-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    text-shadow: 0 1px 0 #000;
    border: 2px solid #555;
}

.lesson-and-review-count__label {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    border: 2px solid #414141;
}

.lesson-and-reviews-loading {
    background-color:#333;
}

.lesson-and-reviews-loading__placeholder {
    background-color:#444;
}

.lesson-picker__section-content {
    background-color: #444;
}

:root{
    --color-placeholder-background-stop-1:#222;
    --color-placeholder-background-stop-2:#3a3a3a;
    --color-lesson-picker-footer-background:rgba(0,0,0,0.25);
    --border-radius-normal: 6px;
    --color-lesson-picker-footer-border: 1px solid #555;
    --color-text: #fff;
}

.lesson-picker__button[aria-disabled="true"]:hover {
    background-color: #555;
    border-color:#555;
}

.lesson-picker__button[aria-disabled="true"] {
    border-color:#666;
    background-color:#666;
    color:#fff;
    text-shadow: 0 1px 0 var(--color-text-shadow-dark);
    box-shadow:0px -3px 0px 0px #00000033 inset;
    --color-count_bubble-text:#666;
}

.lesson-picker__button[aria-disabled="true"]:focus {
    outline:solid 2px #ccc;
    outline-offset:2px
}

.wk-form__select {
    color:#fff;
    border: 2px solid #555;
    background-color:#1a1a1a;
}

.wk-title--medium {
    text-shadow: 0 1px 0 #000;
}

.lesson-picker__section-toggle {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.lesson-picker__section-toggle:hover {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    text-decoration: underline;
    text-decoration-color: #fff;
}

.lesson-picker__section-toggle-all {
    color:#ccc;
    text-shadow: 0 1px 0 #000;    
}

.lesson-picker__section-toggle-all:hover {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    text-decoration: underline;
    text-decoration-color: #fff;    
}

svg {
    fill:#fff;
}

/* Update 1.1.6, small things */

.wk-nav__header {
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

.lu-title {
  font-size: 54px;
  font-weight: 600;
  text-shadow: 0 1px 0 #f00;
}

.srs-progress__subject-type {
    background:#0000004a;
}

.srs-progress__subject-type-title {
    color:#fff;
}

.srs-progress__stage--apprentice {
    color:#fff;
}

.srs-progress__stage--guru {
    color:#fff;
}

.srs-progress__stage--master {
    color:#fff;
}

.srs-progress__stage--enlightened {
    color:#fff;
}

.srs-progress__stage--burned {
    color:#fff;
}

/* Update 1.1.7 */

.wk-alert--info {
    background:#333;
    color:#fff;
    text-shadow: 0 1px 0 #000;
    border: 2px solid #444;
    
}

.wk-icon {
    fill:#fff;
}

turbo-frame[data-show-loading=true]:not([complete]):after {
  background-color:#333;
  background-color:rgba(51,51,51,.9);
}

.progress-chart__progress-bar-container {
    background-color:#2a2a2a;
}

.community-banner__cta {
    text-decoration:none;
}

.subject-info:not([complete]){
    background-color:#333;
}

.subject-info{
    background-color:#333;
}

.subject-info:not([complete])::after {
    background-color:#333;
}

.last-items:not([complete]){
    background-color:#333;
}

.last-items:not([complete])::after {
    background-color:#333;
}
}
@-moz-document url-prefix("https://knowledge.wanikani.com/") {
/* Knowledge Guide */

body {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background:#111;
}

footer {
    background:#111;
}

.content {
    background:#222;
}

.categories a {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

.categories a:hover {
    color:#aaa;
}

.category li a:hover svg {
  fill: #3A3A3A;
}

header {
    color:#fff;
    text-shadow: 0 1px 0 #000;
    background:#111;
}

.hero_search input[type="search"] {
    color:#fff;
    background-color:#000;
}

.banner--getting-started::after {
    background-color:#222;
}

h1, h2, h3, h4, h5, h6 {
    color:#fff;
    text-shadow: 0 1px 0 #000;
}

a {
    color:#fff;
    text-shadow:#000;
}

a:hover {
    color:#aaa;
}

a.header-link:hover {
    color:#999;
}

.tutorial-series {
    background-color:#333;
}

.listing a:hover svg {
    fill:#3A3A3A;
}

.tutorial-series li a::after {
    background:#777;
}

.tutorial-series li a::before {
    color:#555
}

::selection {
    background:#666
}
}

Let me know if you have any issues. I can’t guarantee anything, but I will probably give it a try. Hopefully this userstyle works well for you guys. If I make any updates to the theme I will update the userstyle here. Have a good day or a good sleep.

Edit: I have added a update section, as well as uploaded the userstyle for easy installation.

Updates:

Version 1.0.1:

• Fixed hint box in lessons.
• Modal buttons after completing lessons (return to dashboard/continue lessons) outline on focus changed from blue to light gray (#00aaff → #ccc)

Version 1.0.2:

• Fixed gray border at bottom of the hotkeys button

Version 1.0.3:

• Made hint box (reviews/kanji pages, not lessons) background slightly brighter so that it is visible in the item info container in reviews (#2a2a2a → #333). Also made subject hint title slightly darker to match the lessons hint title (#fff → #ddd)

Version 1.0.4:

• Made hint box in lessons background color match reviews/kanji hint box background color (#3a3a3a → #333).

Version 1.0.5 (27/05/2023):

• Some quick changes to the “add synonyms” button after small UI update from WaniKani. Might refine it a bit at a later date. Let me know if you are having any other issues.

Version 1.0.6 (30/06/2023)

• Quick patch for extra study panel which seems to have been updated by WaniKani. Let me know if you have any other issues.

Version 1.0.7 (3/08/2023)

• Quick patch to fix the dashboard panel after changes.

Version 1.0.8 (19/08/2023)

• Quick patch to the new recent mistakes panel. Also fixed a width issue with small character boxes left margin being off centered (this existed in the first place to fix WaniKani html initially)

Version 1.0.9 (20/08/2023)

• Restored some missing box shadows for the dashboard panels.

Version 1.1.0 (15/09/2023)

• Fixed extra study and review forecast panels after WaniKani update. Also made non-expandable arrow buttons in review forecast slightly darker. Added some padding to the scrollbar in review forecast so that it isn’t right next to the boxes.

Version 1.1.1 (27/10/2023)

• Addressing WaniKani changes. Fixed dashboard panel background color. Fixed dashboard panel box shadows and corners. Fixed nav boxes on levels, radicals, kanji, and vocab pages. Fixed text shadows for renamed elements on the dashboard and levels pages. <3.

Version 1.1.2 (21/12/2023)

• Quick patch to fix the new turbo frame element in the item forecast.

Version 1.1.3 (30/12/2023)

• Quick adjustment to forecast image thing.

Version 1.1.4 (10/02/2024)

• Edited lesson and review count background color in header.
• Edited lesson loading background.
• Edited various lesson picker UI elements.
• Updated form select in settings pages.

Version 1.1.5 (15/02/2024)

• Quick fix to forecast text color after font update.

Version 1.1.6 (25/07/2024)

• Small update for SRS progress update on dashboard.

Version 1.1.7 (2/08/2024)

• More small stuff.

[saraqael]

Oh, this looks really clean! With the other dark themes I didn’t like that the colors were being inverted or changing them in general, so I really like this one. Thanks for making it, I’ll definitely be using this!

[Lachrymogenic]

Pretty cool. Definitely looks a lot cleaner than the Dark Mode that I have on mobile and more darker than the Dark Mode that I don’t have on PC. I should try this out.

[jroach]

This is great! I also really appreciate that the colours for radicals, kanji, and vocab are the same as before. Thank you!!

[zabby23]

You have done it, a dark mode I like! I am eternally grateful.

[saraqael]

@aquasurge7

Let me know if you have any issues.

I noticed that in lessons the hint is still colored white instead of dark. Not a big issue, just thought I’d mention it.

screen grab of hint in lessons

@aquasurge7

Sorry I didn’t make a proper link to just click and easy install this thing, that seems too hard for me.

It’s no problem! But if you’re using the Stylus extension you can easily “publish” the userstyle in the editor and then share the link. It’s not necessary though, it works fine as is!

stylus publish image

[aquasurge7]

Ah sorry, I must of missed this one. I’m getting a new batch of lessons soon so I’ll be sure to update it. Thank you for all the kind words everyone. I’m sure there might be a couple things that I missed unfortunately, just let me know and I will change them when I get the chance.

[aquasurge7]

This should be fixed now. Let me know if there are any other issues and I will try my best to address them

[nospimi99]

Absolutely love this one. Tried a few different themes and most of them either have some weird glaring color clash issue or had important parts of the page really hard to see, etc. This is the one theme that I’ve seen that’s been easy on the eyes but also makes it very easy to see and read everything and looks all clean and seamless. Thank you so much!

[plantron]

Can somebody create dank mode?

[Cammymoop]

This one is quite nice, thanks. The item banner in lessons/reviews is still a bit too much bright pink/blue for night me, though vocab’s purple isn’t as bad.

[andr9719]

Hi.
Usually a fly on the wall in these places but I’m just so grateful that I had to log in and thank you. I wouldn’t be able to use WaniKani without dark mode with the strain it puts on your eyes otherwise - especially when targeting those fast level ups.
Also thankful for the quick updates to keep it looking clean. Please keep at it <3

Stay vigilant fellow WaniKanis

[aquasurge7]

I appreciate the kind words, it makes me happy that people are getting use out of this. If even one person got use out of this it would make me happier. I’ve been struggling recently so this made my day better. I will try my best to keep the updates coming as WaniKani continues to change things here and there. Hope you have a lovely day.

[spidercrab]

Thanks for the dark mode! Me and my eyes are happy now.

[Ibrahim_Blek]

It’s a life saver for me, i suffered so much eye ache before this theme , honestly dreaded wani kani lessons and reviews because of that… thank you!

[Cammymoop]

There was a change to the site that broke css stuff, here’s a quick fix for the blinding backgrounds on the dashboard for anyone using this theme

You can edit the style using the stylish extension just hit the little pencil

[aquasurge7]

Yep, if I haven’t updated anything yet, usually it is a simple fix just inspect the element that needs changing and just stick the code in. There should be an update I already pushed through 12hrs ago, but I didn’t update the thread yet as I want to fix the corners before releasing a proper update. Sorry I hadn’t gotten around to it yet, just finished my work week so a proper update should be out in 24hrs. Thanks for helping everyone though, I appreciate it. I have been slacking on my wanikani so I’m glad that if I missed this update someone would be here to help. Much love

[albertusdev]

Wow, this is a very clean dark mode implementation! Thank you so much @aquasurge7!

[albertusdev]

By the way, since I’m using Safari and don’t know if Stylus supports Safari or not, I ended up porting your CSS code into a JavaScript code and added a feature so that the dark mode syncs with the system preferences (i.e the custom dark mode will only get applied if your system prefers dark mode, by using the window.matchMedia('(prefers-color-scheme: dark)') media query)

For those who are also interested to use the port, you can install it here:

WaniKani Basic Darkmode script

[aquasurge7]

No worries, hopefully other people that use Safari can use this too if it’s not compatible with Stylus. I’m glad you like the theme. Good luck with your studies