For all Dark Reader users who had issues with the new Dashboard design in terms of strange colored images and inaccurate button colors: After struggling two weeks in trying to fix these, I eventually got it partly working (and procrastinated a lot by doing this). Because it took a lot of time, I want to share the result, so that you don’t have to go through all this too, and maybe you can build a better solution based on this foundation.
Before:
After:
To achieve this color fixing you can just go to:
Extension Settings > Dark Reader > More > All Settings > Advanced > Dev Tools > Dynamic Theme Editor > Per Site Editor > search wanikani > replace the text with the following > Apply
The following
INVERT
[data-question-type=“meaning”]
.quiz-progress__bar
.logoCSS
.wk-hint,
.wk-hint__title,
.subject-character__meaning {
text-shadow: None;
}
.extra-study-single-button-widget__image-wrapper {
/visibility: hidden;/
}
.reviews-widget__content-wrapper .wk-button__content {
color: #0088CC !important;
background: white !important;
}.todays-lessons-widget__buttons .wk-button__content {
color: #CC0088 !important;
background: white !important;
}.todays-lessons-widget__title .count-bubble {
color: #CC0088 !important;
background: white !important;
border: 0px
}.reviews-widget__title .count-bubble {
color: #0088CC !important;
background: white !important;
border: 0px
}/* sets review image to grayscale again*/
#mountain*.cls-1 {
fill:* #a7a8ab !important;
}
#durtle_dent*.cls-2 {
fill:* #fff !important;
}
#cloudy_fill*.cls-2 {
fill:* #fff !important;
}
#durtle_head*.cls-3 {
fill:* #808285 !important;
}
#durtle_body*.cls-4 {
fill:* #f1f2f2 !important;
}
#foot_shadow*.cls-5 {
fill:* #bcbec0 !important;
}
#flag*.cls-6 {
fill:* #6d6e71 !important;
}
#durtle_shell*.cls-7 {
fill:* #a7a9ac !important;
}/* correct-percentage */
[id=“empty-segments”] { fill: #D9D9D9 !important; }
[id=“filled-segments-background”] {
background: conic-gradient(#FF00AA*,* #AA00FF*,* #009BFF*,* #FF00AA*) !important;
background-size: cover !important;
}
[id=“target-zone-outer-border-background”] {
background: conic-gradient(from 90deg,*#AA00FF 0deg,#009BFF 336.081deg,#AA00FF 360deg) !important;
background-size: cover !important;
}
[id=“target-zone-inner-border-background”] {
background: conic-gradient(from 90deg,#FF00AA 0deg,#009BFF 336.081deg,#FF00AA 360deg) !important;
background-size: cover !important;
}
[id=“target-zone”] { fill: #FFD4F1 !important; }
[id=“bubble”] { fill: #D9D9D9 !important; }
[id=“bubble-text”] { fill: #333333 !important; color: #333333 !important; }
[id=“skin”] { fill: #FFFFFF !important; }
[id=“neck-shadow”] { fill: #FF363F !important; }
[id=“coat”] { fill: #0074E9 !important; }
[id=“coat-stripe”] { fill: #FFFFFF !important; }
[id=“pants”] { fill: #FF363F !important; }
[id=“shirt”] { fill: #00A141 !important; }
[id=“hair”] { fill: #000000 !important; }
[id=“outline”] { fill: #000000 !important; stroke: #000000 !important; }
[id=“halo”] { fill: #FF363F !important; }
[id=“sparkle”] { fill: #FFC900 !important; }/* community-banner /
[id=“coat”] { fill: #FF363F !important; } / duplicate OK /
[id=“coat_stripe”] { fill: #FFFFFF !important; }
[id=“hair”] { fill: #000000 !important; } / duplicate OK /
[id=“hair_2”] { fill: #068433 !important; }
[id=“halo”] { fill: #FFC900 !important; } / duplicate OK /
[id=“outline”] { fill: #000000 !important; stroke: #000000 !important; }
[id=“pants”] { fill: #0074E9 !important; } / note: pants used elsewhere /
[id=“sculpture”] { fill: #C1C1C1 !important; }
[id=“sculpture_detail”] { fill: #E5E5E5 !important; }
[id=“shirt”] { fill: #000000 !important; } / overrides previous if same id used /
[id=“shoes”] { fill: #727272 !important; }
[id=“skin”] { fill: #FFFFFF !important; } / duplicate OK */
[id=“stripes”] { fill: #FF363F !important; }/* days-studied spaceship /
[id=“bottom-stripe”] { fill: #0074E9 !important; }
[id=“chair”] { fill: #0074E9 !important; }
[id=“engine-detail”] { fill: #CAE45F !important; }
[id=“engine-panel”] { fill: #00764B !important; }
[id=“engine-shadow”] { fill: #414042 !important; }
[id=“gloves”] { fill: #FFFFFF !important; }
[id=“hair”] { fill: #FF363F !important; } / may override other hair entries /
[id=“helmet”] { fill: #CAE45F !important; }
[id=“helmet-bottom”] { fill: #E6E7E8 !important; }
[id=“helmet-detail”] { fill: #FFFFFF !important; }
[id=“helmet-shadow”] { fill: #00A141 !important; }
[id=“helmet-top”] { fill: #00A141 !important; }
[id=“middle-stripe”] { fill: #FFC900 !important; }
[id=“outline”] { fill: #000000 !important; stroke: #000000 !important; } / duplicate /
[id=“screws”] { fill: #CAE45F !important; }
[id=“shadow”] { fill: #414042 !important; }
[id=“shirt”] { fill: #808285 !important; } / may override other shirt entries /
[id=“skin”] { fill: #FFFFFF !important; } / duplicate */
[id=“spaceship”] { fill: #00A141 !important; }
[id=“spacesuit”] { fill: #CAE45F !important; }
[id=“spacesuit-detail”] { fill: #00A141 !important; }
[id=“speed-lines”] { fill: #FF363F !important; }
[id=“top-stripe”] { fill: #FF363F !important; }
[id=“window”] { fill: #FFFFFF !important; }/* review-forecast /
[id=“cloud_fill”] { fill: #97C7F6 !important; }
[id=“cloud_outline”] { fill: #0074E9 !important; }
[id=“durtle_beak”] { fill: #FAED69 !important; }
[id=“durtle_body”] { fill: #CAE45F !important; }
[id=“durtle_dent”] { fill: #FFFFFF !important; }
[id=“durtle_head”] { fill: #00A141 !important; }
[id=“juice”] { fill: #FF363F !important; }
[id=“juice_glass”] { fill: #FFFFFF !important; }
[id=“outline”] { fill: #000000 !important; stroke: #000000 !important; } / duplicate /
[id=“sparkle”] { fill: #FF363F !important; } / duplicate */
[id=“sun_fill”] { fill: #FFF4E6 !important; }
[id=“suns”] { fill: #FFC900 !important; }/* extra-study single button (both style blocks merged) /
[id=“coals”] { fill: #FF7539 !important; }
[id=“durtle_beak”] { fill: #FAED69 !important; } / duplicate /
[id=“durtle_body”] { fill: #CAE45F !important; } / duplicate /
[id=“durtle_dent”] { fill: #FFFFFF !important; } / duplicate /
[id=“durtle_head”] { fill: #00A141 !important; } / duplicate /
[id=“durtle_shell_3”] { fill: #00764B !important; }
[id=“inner_flame”] { fill: #FF7539 !important; }
[id=“outer_flame”] { fill: #FFC900 !important; }
[id=“outline”] { fill: #000000 !important; stroke: #000000 !important; } / duplicate */
[id=“pile”] { fill: #777777 !important; }
[id=“shovel”] { fill: #BCBEC0 !important; }
[id=“sparkle_2”] { fill: #FF363F !important; }
[id=“stripes_4”] { fill: #0074E9 !important; }[id=“cloud”] { fill: #0074E9 !important; }
[id=“face_detail”] { fill: #FF363F !important; }
[id=“grass”] { fill: #CAE45F !important; }
[id=“ground”] { fill: #006838 !important; }
[id=“hair”] { fill: #000000 !important; } /* duplicate /
[id=“jumper”] { fill: #0074E9 !important; }
[id=“jumper_detail”] { fill: #FFFFFF !important; }
[id=“neck_shadow”] { fill: #FF363F !important; }
[id=“pants_2”] { fill: #2E3192 !important; }
[id=“skin”] { fill: #FFFFFF !important; } / duplicate */
[id=“stripes_2”] { fill: #FF363F !important; }
[id=“turtle_body”] { fill: #E5F3B2 !important; }
[id=“turtle_shell”] { fill: #CAE45F !important; }/* small safety: prefer fill attribute if possible (forces inline fill as well) /
svg [id] {
/ ensure !important has highest priority for style property /
/ no generic fill override here to avoid clobbering unexpected ids */
}
This was made for the blood and matcha color Theme from the Dashboard. Because dark reader overwrites the CSS of the website, you can not change the colors as usual in the dashboard settings. To do this, you would have to change the CSS in the Dark Reader Snippet (or let an AI do this). You can get the colors from inspecting the website elements (hit F12).
If you’re not fond of the new images then you could also hide them by appending a CSS like:
.extra-study-single-button-widget__image-wrapper {
visibility: hidden;
}
Unfortunately it works not all the time and I can not tell why this is the case. Dark reader behaves a little odd in my eyes, but that may be an issue caused by a lack of experienced, that I couldn’t fill albeit checking various GitHub- and other pages as well as consulting ChatGPT (which was only useful for searching the color codes out of the html I copied and not very helpful for the other stuff).
It exists a Dark Reader tag “IGNORE IMAGE ANALYSIS“, but I wasn’t able to get it working. The Stylus extension not helped either for fixing the inverted SVG while Dark Reader is active.
I hope that this is helpful in some way. You can also check out Basic Dark Mode Theme, I think it’s going to be fixed completely soon, but because I generally prefer the Dark Reader coloring, I’d like to have this fixed.
If you have a solution to share — I would be very happy to see it too, because mine is only working part time.