WaniKani Basic Darkmode script

Basic Darkmode Script that syncs with your darkmode system preferences (modified from aquasurge7)
安裝腳本 ?
換行
// ==UserScript==
// @name         WaniKani Basic Darkmode script
// @namespace    http://tampermonkey.net/
// @version      2.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 = () => {
    console.log('debug: creating custom dark mode style!');
    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 handleDarkMode = (e) => {
    const headElement = document.getElementsByTagName('head')[0];
    if (e.matches) {
       if (document.getElementById(DARK_MODE_STYLE_ID)) return;
       const darkModeStyle = createCustomDarkModeStyle();
       headElement.appendChild(darkModeStyle);
    } else {
       const darkModeStyle = document.getElementById(DARK_MODE_STYLE_ID);
       if (darkModeStyle) headElement.removeChild(darkModeStyle);
    }
}

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

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

}

init();