☰

WaniKani Basic Darkmode script

Basic Darkmode Script that syncs with your darkmode system preferences (modified from aquasurge7)

Versión del día 02/01/2024. Echa un vistazo a la versión más reciente.

Cómo instalar

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Tendrás que instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Tendrás que instalar una extensión como Tampermonkey antes de poder instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Cómo instalar

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo) 

// ==UserScript==
// @name         WaniKani Basic Darkmode script
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Basic Darkmode Script that syncs with your darkmode system preferences (modified from aquasurge7)
// @author       albertusdev
// @match        https://www.wanikani.com/*
// @match        https://preview.wanikani.com/*
// @run-at       document-start
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @license      MIT
// ==/UserScript==

const darkModeCss = `
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%);
}
}
@-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
}
`;

const DARK_MODE_STYLE_ID = 'wanikani-custom-dark-mode';

const createCustomDarkModeStyle = () => {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.id = DARK_MODE_STYLE_ID;

    if (style.styleSheet) {
        style.styleSheet.cssText = darkModeCss;
    } else {
        style.appendChild(document.createTextNode(darkModeCss));
    }
    return style;
}

const darkModeStyle = createCustomDarkModeStyle();

let isAppended = false;

const handleDarkMode = (e) => {
    const headElement = document.getElementsByTagName('head')[0];
    if (e.matches && !isAppended) {
       headElement.appendChild(darkModeStyle);
       isAppended = true;
    } else {
       headElement.removeChild(darkModeStyle);
       isAppended = false;
    }
}

(function() {
    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    handleDarkMode(darkModeMediaQuery);

    if (darkModeMediaQuery.addListener) darkModeMediaQuery.addListener(handleDarkMode);
    else if (darkModeMediaQuery.addEventListener) darkModeMediaQuery.addEventListener("change", handleDarkMode);

})();