A work-in-progress theme for Wanikani to update and upgrade your layout. Provided below are a boatload of variables and a user-style to match which allow you to manipulate your Wanikani experience to not hurt your eyes so much at night.
URLS starting with - https://www.wanikani.comstyle.css and variables.css content below.Simple as that, now edit to your hearts content.
| *, | |
| *:hover, | |
| *:focus, | |
| *:before, | |
| *:hover:before, | |
| *:focus:before, | |
| *:hover:after, | |
| *:focus:after { | |
| box-shadow: none !important; | |
| text-shadow: none !important; | |
| } | |
| body { | |
| background: var(--wk-800); | |
| color: var(--wk-foreground); | |
| } | |
| button { | |
| color: var(--wk-foreground); | |
| } | |
| .global-header { | |
| background: var(--wk-900); | |
| border: var(--wk-900); | |
| } | |
| .logo__link h1:after { | |
| filter: brightness(0) invert(1) | |
| } | |
| .navigation-shortcut a { | |
| background: var(--wk-700); | |
| color: white; | |
| } | |
| .navigation-shortcut[data-count="0"] span { | |
| background: var(--wk-background); | |
| } | |
| .sitemap__section-header { | |
| color: white; | |
| text-shadow: none; | |
| } | |
| h1, html#public-profile div.wall-of-shame div.title, h2, h3 { | |
| text-shadow: none; | |
| } | |
| .lessons-and-reviews__lessons-button--0, | |
| .lessons-and-reviews__reviews-button--0 { | |
| background-color: var(--wk-900) | |
| } | |
| .lessons-and-reviews__lessons-button--0 span, | |
| .lessons-and-reviews__button span { | |
| background-color: var(--wk-800); | |
| color: var(--wk-foreground); | |
| } | |
| .dashboard section.dashboard-progress, | |
| .dashboard section.forecast { | |
| background-color: var(--wk-900); | |
| box-shadow: none; | |
| } | |
| .review-forecast__day-header:after { | |
| border-color: var(--wk-700) | |
| } | |
| .bg-gray-300 { | |
| background-color: var(--wk-700); | |
| } | |
| .small-caps.invert { | |
| background: var(--wk-700); | |
| } | |
| #lessons-summary header nav, | |
| #reviews-summary header nav { | |
| border-color: var(--wk-700) | |
| } | |
| #lessons-summary header nav #start-session a.disabled, | |
| #reviews-summary header nav #start-session a.disabled { | |
| background: var(--wk-700) | |
| } | |
| #lessons-summary #radicals, #lessons-summary #kanji, #lessons-summary #vocabulary { | |
| background: var(--wk-700) | |
| } | |
| .forum-topics-list a.topic-title, .forum-topics-list [class*="fa-"]:before, | |
| .forum-topics-list a { | |
| color: var(--wk-foreground); | |
| } | |
| .forum-topics-list a.small-caps { | |
| background-image: none; | |
| } | |
| hr, | |
| .forum-topics-list table tbody tr:nth-child(2n) td hr { | |
| border-color: var(--wk-600) | |
| } | |
| .forum-topics-list table tbody tr:hover { | |
| background: var(--wk-600); | |
| } | |
| .border-gray-100 {border-color: var(--wk-900);} | |
| .border-gray-200 {border-color: var(--wk-800);} | |
| .border-gray-300 {border-color: var(--wk-700);} | |
| .text-black {color: var(--wk-foreground);} | |
| .text-white {color: var(--wk-background);} | |
| .bg-black {background-color: var(--wk-foreground);} | |
| .bg-white {background-color: var(--wk-background);} | |
| .radical-icon { background: var(--wk-blue); } | |
| .kanji-icon { background: var(--wk-pink); } | |
| ul.single-character-grid li[class|=vocabulary], ul.single-character-grid tr[class|=vocabulary], ul.multi-character-grid li[class|=vocabulary], ul.multi-character-grid tr[class|=vocabulary], .kotoba-table-list li[class|=vocabulary], .kotoba-table-list tr[class|=vocabulary] { | |
| background: var(--wk-purple); | |
| } | |
| ul.single-character-grid li[class|=kanji], ul.single-character-grid tr[class|=kanji], ul.multi-character-grid li[class|=kanji], ul.multi-character-grid tr[class|=kanji], .kotoba-table-list li[class|=kanji], .kotoba-table-list tr[class|=kanji] { | |
| background: var(--wk-pink); | |
| } | |
| ul.single-character-grid li[class|=radical], ul.single-character-grid tr[class|=radical], ul.multi-character-grid li[class|=radical], ul.multi-character-grid tr[class|=radical], .kotoba-table-list li[class|=radical], .kotoba-table-list tr[class|=radical] { | |
| background: var(--wk-blue); | |
| } | |
| .kotoba-table-list table tr.none-available { | |
| background: var(--wk-700); | |
| color: white; | |
| } | |
| .kotoba-table-list table tr.none-available div { | |
| border-color: white; | |
| } | |
| .logo__link:before, | |
| .logo__link:after, | |
| .logo__link h1:before { | |
| background: var(--wk-900) | |
| } | |
| .dashboard-sub-section h3, | |
| .small-caps { | |
| background: var(--wk-900); | |
| color: var(--wk-foreground); | |
| } | |
| .progress-entry .kanji-icon, | |
| .progress-entry .radical-icon { | |
| box-shadow: none; | |
| } | |
| .review-forecast__day-header:before { | |
| background-color: transparent; | |
| } | |
| .dashboard-sub-section h3.small-caps.invert { | |
| filter: none; | |
| } | |
| .forum-topics-list table tbody tr { | |
| background-color: var(--wk-700) | |
| } | |
| /** ADDITIONAL INFO **/ | |
| html#main .additional-info, | |
| html#public-profile .additional-info, | |
| #progress { | |
| background-color: var(--wk-700); | |
| color: var(--wk-foreground); | |
| } | |
| html#public-profile div.wall-of-shame { | |
| background-color: var(--wk-700); | |
| } | |
| .page-list { | |
| background-color: var(--wk-800); | |
| } | |
| section[id|=level] header { | |
| background-color: var(--wk-700); | |
| } | |
| .page-list ul>li.page-list-header>span, | |
| .page-list ul>li>a, .page-list ul>li>span { | |
| border-color: var(--wk-800); | |
| } | |
| .page-list ul>li>a, .page-list ul>li>span { | |
| background-color: var(--wk-900); | |
| } | |
| textarea, 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 { | |
| background-color: var(--wk-900); | |
| border-color: var(--wk-800); | |
| } | |
| .search-form form .search-query { | |
| background-color: var(--wk-900); | |
| border-color: var(--wk-800); | |
| color: var(--wk-foreground); | |
| } | |
| /** REVIEWS **/ | |
| #reviews-summary #review-stats [class*="pure-u-"]:first-child [id*="review-stats-"] { | |
| background-color: var(--wk-700); | |
| } | |
| #reviews-summary #review-stats [class*="pure-u-"]:first-child [id*="review-stats-"]:after { | |
| border-color: transparent transparent transparent var(--wk-700); | |
| } | |
| #reviews-summary #review-stats [id*="review-stats-"] { | |
| background-color: var(--wk-900); | |
| } | |
| #reviews-summary #incorrect, #reviews-summary #correct { | |
| background-color: var(--wk-900); | |
| } | |
| #reviews-summary #incorrect .apprentice h3 span, #reviews-summary #incorrect .guru h3 span, #reviews-summary #incorrect .master h3 span, #reviews-summary #incorrect .enlightened h3 span, #reviews-summary #incorrect .burned h3 span, #reviews-summary #correct .apprentice h3 span, #reviews-summary #correct .guru h3 span, #reviews-summary #correct .master h3 span, #reviews-summary #correct .enlightened h3 span, #reviews-summary #correct .burned h3 span { | |
| background-color: var(--wk-900); | |
| } | |
| #reviews-summary #incorrect .apprentice h3, #reviews-summary #incorrect .guru h3, #reviews-summary #incorrect .master h3, #reviews-summary #incorrect .enlightened h3, #reviews-summary #incorrect .burned h3, #reviews-summary #correct .apprentice h3, #reviews-summary #correct .guru h3, #reviews-summary #correct .master h3, #reviews-summary #correct .enlightened h3, #reviews-summary #correct .burned h3 { | |
| color: var(--wk-foreground); | |
| border-color: var(--wk-600); | |
| } | |
| #reviews-summary #incorrect .apprentice h3 strong, #reviews-summary #incorrect .guru h3 strong, #reviews-summary #incorrect .master h3 strong, #reviews-summary #incorrect .enlightened h3 strong, #reviews-summary #incorrect .burned h3 strong, #reviews-summary #correct .apprentice h3 strong, #reviews-summary #correct .guru h3 strong, #reviews-summary #correct .master h3 strong, #reviews-summary #correct .enlightened h3 strong, #reviews-summary #correct .burned h3 strong { | |
| background: var(--wk-600) | |
| } | |
| #answer-form input[type=text] { | |
| color: var(--wk-foreground); | |
| } | |
| #answer-form button { | |
| background: var(--wk-600); | |
| } | |
| #additional-content ul li span { | |
| background: var(--wk-600); | |
| color: white; | |
| } | |
| #additional-content ul li:not(#option-audio) span:hover:before { | |
| background: var(--wk-500); | |
| color: white; | |
| } | |
| #information { | |
| background: var(--wk-500); | |
| } | |
| #additional-content ul .wrap-up-selected span, | |
| #additional-content ul .wrap-up-selected span:hover:before { | |
| background-color: var(--wk-900) !important; | |
| } | |
| #additional-content ul li.active:before { | |
| border-color: transparent transparent var(--wk-500) transparent; | |
| } | |
| #additional-content ul li.active i { | |
| color: white; | |
| } | |
| #kana-chart.legacy ol li.active, | |
| #kana-chart.legacy ul li span { | |
| color: white; | |
| border-color: white; | |
| } | |
| #question #character.radical { background: var(--wk-blue) } | |
| #question #character.vocabulary { background: var(--wk-purple) } | |
| #question #character.kanji { background: var(--wk-pink) } | |
| #quiz #question-type.reading, | |
| #quiz #question-type.meaning, | |
| #question #question-type.reading, | |
| #question #question-type.meaning { | |
| border-color: var(--wk-900); | |
| background: var(--wk-900); | |
| color: var(--wk-foreground); | |
| } | |
| .progress .bar { | |
| background: var(--wk-green); | |
| } | |
| ul.single-character-grid li[class|=kanji], ul.single-character-grid tr[class|=kanji], ul.multi-character-grid li[class|=kanji], ul.multi-character-grid tr[class|=kanji], .kotoba-table-list li[class|=kanji], .kotoba-table-list tr[class|=kanji], | |
| ul.single-character-grid li[class|=radical], ul.single-character-grid tr[class|=radical], ul.multi-character-grid li[class|=radical], ul.multi-character-grid tr[class|=radical], .kotoba-table-list li[class|=radical], .kotoba-table-list tr[class|=radical], | |
| ul.single-character-grid li[class|=vocabulary], ul.single-character-grid tr[class|=vocabulary], ul.multi-character-grid li[class|=vocabulary], ul.multi-character-grid tr[class|=vocabulary], .kotoba-table-list li[class|=vocabulary], .kotoba-table-list tr[class|=vocabulary] { | |
| border: none; | |
| } | |
| #lesson #supplement-nav { | |
| background: var(--wk-700) | |
| } | |
| #lesson #supplement-nav ul li.active:before { | |
| border-color: transparent transparent var(--wk-600) transparent; | |
| } | |
| #lesson #supplement-info { | |
| background: var(--wk-700) | |
| } | |
| .sitemap__expandable-chunk { | |
| background: var(--wk-800) | |
| } | |
| .sitemap__expandable-chunk--levels, | |
| .sitemap__expandable-chunk--levels:before { | |
| background: var(--wk-600); | |
| } | |
| .progress { | |
| background: var(--wk-600) | |
| } | |
| html#public-profile .public-profile-header div.user-info { | |
| background: var(--wk-900) | |
| } | |
| .sitemap { | |
| background: var(--wk-900) | |
| } | |
| .sitemap--divider { | |
| border-top-color: var(--wk-800) | |
| } | |
| .navigation__toggle[data-expanded="true"] { | |
| background: var(--wk-600); | |
| } | |
| .navigation__toggle-lines, | |
| .navigation__toggle-lines:before, | |
| .navigation__toggle-lines:after { | |
| border-color: var(--wk-foreground); | |
| } | |
| .sitemap__section-header:before { | |
| border-color: var(--wk-500) | |
| } | |
| #loading-screen { | |
| background-color: var(--wk-900) | |
| } | |
| .dashboard section.dashboard-sub-section a.small-caps { | |
| color: var(--wk-foreground); | |
| } | |
| footer ul li { | |
| background: var(--wk-900) | |
| } | |
| #item-info h2 { | |
| color: var(--wk-foreground); | |
| border-color: var(--wk-600) | |
| } | |
| #item-info #related-items a, #item-info #related-items a:active, #item-info #related-items a:hover, #item-info #related-items a:visited { | |
| color: var(--wk-foreground); | |
| } | |
| #item-info blockquote { | |
| background: var(--wk-700); | |
| color: white; | |
| } | |
| #item-info #all-info, | |
| #item-info #all-info:hover { | |
| background: var(--wk-700); | |
| color: white; | |
| } | |
| .user-synonyms ul li.user-synonyms-add-form form button, | |
| .user-synonyms ul li.user-synonyms-add-btn:before { | |
| background: var(--wk-700); | |
| color: var(--wk-foreground); | |
| } | |
| .user-synonyms ul li.user-synonyms-add-form form button:hover, | |
| .user-synonyms ul li.user-synonyms-add-btn:hover:before { | |
| background: var(--wk-900); | |
| color: var(--wk-foreground); | |
| } | |
| .user-synonyms ul li.user-synonyms-add-form form input { | |
| border: none; | |
| } | |
| .highlight-radical { | |
| background: var(--wk-blue) | |
| } | |
| .highlight-kanji { | |
| background: var(--wk-pink) | |
| } | |
| [class^="note-"] form fieldset { | |
| background: var(--wk-800); | |
| } | |
| [class^="note-"] form fieldset button { | |
| background: var(--wk-700); | |
| } | |
| [class^="note-"] form fieldset textarea, | |
| [class^="note-"] form fieldset textarea::placeholder { | |
| color: var(--wk-foreground); | |
| -webkit-text-fill-color: var(--wk-foreground); | |
| } | |
| #kana-chart.legacy ul li:not(.empty):hover { | |
| background: var(--wk-700); | |
| } | |
| #kana-chart.legacy ol li:not(.active):not(.backspace):hover { | |
| border-color: var(--wk-700); | |
| } | |
| #kana-chart.legacy ol, | |
| #kana-chart.legacy ul li { | |
| border-color: var(--wk-600); | |
| } | |
| #answer-exception span { | |
| background: var(--wk-700); | |
| } | |
| #answer-exception span:before { | |
| border-color: transparent transparent var(--wk-700) transparent; | |
| } |
| :root { | |
| --wk-background: #000000; | |
| --wk-foreground: #ffffff; | |
| --wk-900: #19191A; | |
| --wk-800: #101111; | |
| --wk-700: #222122; | |
| --wk-600: #333233; | |
| --wk-500: #434343; | |
| --wk-blue: #0093dd; | |
| --wk-pink: #dd0093; | |
| --wk-indigo: #294ddb; | |
| --wk-purple: #882d9e; | |
| --wk-green: #71aa00; | |
| } |