# \[Userstyle\] WaniKani Simple Dark

**URL:** https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146
**Category:** API And Third-Party Apps
**Created:** [October 10, 2017, 10:35pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146 "2017-10-10T22:35:13Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![jakeoid](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/jakeoid/32/67180_2.png) [@jakeoid](https://community.wanikani.com/u/jakeoid)
#### Post date: [October 10, 2017, 10:35pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/1 "2017-10-10T22:35:13Z")

</div>

# wanikani-simple-dark

Ever wanted to have a theme so that WaniKani didnt kill your eyes? ~~Well then head to wanikani-breeze-dark~~ (I joke). I’ve been working on a dark theme for WaniKani so that my eyes don’t get murdered when I decide to work on my Reviews at 2am!

 ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/9/6/963b0db1993a60c553a85b81c1cc311257bdceb7.png)

## Screenshots

> **Spoiler**
>
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/4/e/4eda40a8656ae81075044358a910f18ce1e10c43.png)  
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/6/a/6a9e65c56ed689749d6f535d609220a0436b6a01.png)  
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/5/5/5523a0ec49dde9e07f544b0c69860b5065b4dc63.png)  
> ![](https://global.discourse-cdn.com/wanikanicommunity/original/3X/3/0/30287a947d319fb7a02aac2cf536ceab1fa69835.png)

## Installation

This is a userstyle, so you’re going to need either..

- Firefox [Stylish](https://addons.mozilla.org/en-US/firefox/addon/2108/) [Stylus](https://addons.mozilla.org/en-US/firefox/addon/styl-us/)
- Chrome [Stylish](https://chrome.google.com/extensions/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe) [Stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)
- Opera [Stylish](https://addons.opera.com/en/extensions/details/stylish/) [Stylus](https://addons.opera.com/en-gb/extensions/details/stylus/)
- Safari [Stylish](http://sobolev.us/stylish/)

Then you can head to the [userstyles.org page](https://userstyles.org/styles/149427/wanikani-simple-dark) and press install!

## Source

[Can be found on my Github Account!](https://github.com/jakeoid/simple-dark-wanikani)

## Bugs

I’ve attempted to iron out most, but I don’t use all aspects of the WaniKani sites, if i’ve missed something let me know in this thread 🙏. (Or alternatively you can open an issue on the Github)

---

<div class="post-metadata">

### Author: ![alexbeldan](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/alexbeldan/32/63446_2.png) [@alexbeldan](https://community.wanikani.com/u/alexbeldan)
#### Post date: [October 10, 2017, 11:59pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/2 "2017-10-10T23:59:47Z")

</div>

Reminds me of…

> [@\[Userstyle\] WaniKani Breeze Dark](https://community.wanikani.com/t/userstyle-wanikani-breeze-dark/16973/):
>
> warning This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely. [[Install directly with Stylus]](https://valeth.gitlab.io/wanikani-breeze-dark/wanikani_breeze_dark.user.css) A dark user style for WaniKani, to make learning at night more pleasant. Feedback and ideas are very appreciated. Hope you like it. Installation You can install by clicking the [badge](https://valeth.gitlab.io/wanikani-breeze-dark/wanikani_breeze_dark.user.css) above (this requires the Stylus browser extension or any extension that can handle User CSS). T…

😅

Hence your joke.

What are the major differences? (It’s been forever since I used the dark theme.)

---

<div class="post-metadata">

### Author: ![jakeoid](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/jakeoid/32/67180_2.png) [@jakeoid](https://community.wanikani.com/u/jakeoid)
#### Post date: [October 11, 2017, 12:11am UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/3 "2017-10-11T00:11:28Z")

</div>

That one is more blue, based of a Unix theme (Linux junk). I liked the material colors (Google junk) and thus I remade the theme to what I wanted. Mine also has a heavier reliance on variables, if you wanted to change the colours up for whatever reason.

Its pretty cool, a little more advanced in my opinion 🙂

---

<div class="post-metadata">

### Author: ![alexbeldan](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/alexbeldan/32/63446_2.png) [@alexbeldan](https://community.wanikani.com/u/alexbeldan)
#### Post date: [October 11, 2017, 1:31am UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/4 "2017-10-11T01:31:35Z")

</div>

So “Wanikani Breeze Dark Remix”  
😅

Totally acceptable. Great work.

---

<div class="post-metadata">

### Author: ![jakeoid](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/jakeoid/32/67180_2.png) [@jakeoid](https://community.wanikani.com/u/jakeoid)
#### Post date: [October 11, 2017, 1:43am UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/5 "2017-10-11T01:43:16Z")

</div>

Well yeah, that and I flattened (removed gradient) of a few different things.

---

<div class="post-metadata">

### Author: ![anon72902257](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png) [@anon72902257](https://community.wanikani.com/u/anon72902257)
#### Post date: [October 11, 2017, 8:30am UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/6 "2017-10-11T08:30:24Z")

</div>

Looks good, though there are some missing styles: the “Your Progression” section (item info pages), lesson tabs, login page.

---

<div class="post-metadata">

### Author: ![cwulffy](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png) [@cwulffy](https://community.wanikani.com/u/cwulffy)
#### Post date: [October 18, 2017, 8:19pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/7 "2017-10-18T20:19:09Z")

</div>

This is great! The only thing is during lessons, you get a huge white band, which kills the eyes:

 ![image](https://global.discourse-cdn.com/wanikanicommunity/original/3X/3/a/3affbabe193a69c0204dea87a22445d022d623be.jpg)

Almost there!

---

<div class="post-metadata">

### Author: ![jakeoid](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/jakeoid/32/67180_2.png) [@jakeoid](https://community.wanikani.com/u/jakeoid)
#### Post date: [October 18, 2017, 8:32pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/8 "2017-10-18T20:32:24Z")

</div>

> [@anon72902257](#):
>
> Looks good, though there are some missing styles: the “Your Progression” section (item info pages), lesson tabs, login page.

Thankyou! Ill get to work on these soon!

> [@cwulffy](#):
>
> This is great! The only thing is during lessons, you get a huge white band, which kills the eyes:

This is the learning session I assume? I hadn’t had a chance to mess with that, next time I unlock some new vocab i’ll get to work on it!

---

<div class="post-metadata">

### Author: ![cwulffy](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png) [@cwulffy](https://community.wanikani.com/u/cwulffy)
#### Post date: [October 18, 2017, 8:38pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/9 "2017-10-18T20:38:17Z")

</div>

Yes, that would be awesome! You did a great job with this, it looks beautiful!

---

<div class="post-metadata">

### Author: ![anon7343572](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png) [@anon7343572](https://community.wanikani.com/u/anon7343572)
#### Post date: [October 18, 2017, 8:51pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/10 "2017-10-18T20:51:56Z")

</div>

Looks great! Seems to be missing the “recent community topics” section completely though.

---

<div class="post-metadata">

### Author: ![jakeoid](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/jakeoid/32/67180_2.png) [@jakeoid](https://community.wanikani.com/u/jakeoid)
#### Post date: [October 18, 2017, 8:53pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/11 "2017-10-18T20:53:53Z")

</div>

Oop, thats an `plugin` that I added. See the bottom of the CSS and remove the lines! Sorry, I copied this straight from my personal WaniKani settings as I dont think having that on my Dashboard helps me learn! 🙂

---

<div class="post-metadata">

### Author: ![raegefilth](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/raegefilth/32/675344_2.png) [@raegefilth](https://community.wanikani.com/u/raegefilth)
#### Post date: [October 18, 2017, 9:14pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/12 "2017-10-18T21:14:42Z")

</div>

Could you clarify which lines exactly, please? I was also wondering about where the community topics section went, haha.

---

<div class="post-metadata">

### Author: ![jakeoid](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/jakeoid/32/67180_2.png) [@jakeoid](https://community.wanikani.com/u/jakeoid)
#### Post date: [October 18, 2017, 9:54pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/13 "2017-10-18T21:54:23Z")

</div>

Of course SCSS to CSS reorganised everything, goodness.

```auto
section.blog,
section.forum-topics-list {
  display: none !important; }

```

Removing these three lines will restore the content, however its not styled still. I can probably work on this in future too… but i’m not guaranteeing support.

---

<div class="post-metadata">

### Author: ![anon7343572](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png) [@anon7343572](https://community.wanikani.com/u/anon7343572)
#### Post date: [October 19, 2017, 4:30pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/14 "2017-10-19T16:30:28Z")

</div>

Nice, thank you!  
Also something I stumbled upon, on the pages for specific radicals/kanji/vocab the SRS progress at the bottom seems to be unstyled. Not really important since I don’t check those often but thought I’d let you know.!

 ![image](https://global.discourse-cdn.com/wanikanicommunity/original/3X/6/a/6a93e88dedbf9e62fbf5d729dacfa9814b4e4c90.png)

---

<div class="post-metadata">

### Author: ![jakeoid](https://sea1.discourse-cdn.com/wanikanicommunity/user_avatar/community.wanikani.com/jakeoid/32/67180_2.png) [@jakeoid](https://community.wanikani.com/u/jakeoid)
#### Post date: [October 19, 2017, 8:48pm UTC](https://community.wanikani.com/t/userstyle-wanikani-simple-dark/20146/15 "2017-10-19T20:48:41Z")

</div>

Thanks for all the feedback guys! I’ve collocated what I need to fix…

- Lessons page
- “Your Progression” page
- Login page
- Settings page
- Community and Blog settings dashboard.
- Kanji/Radical/Vocab pages.

I’ll get to work on these ASAP.
