Should be fixed in 0.3.8! I overlooked it because I hadn’t done any lessons with hints recently, thank you for telling me the class 
1 Like
速い！
Yeah looks like vocab doesn’t have those
1 Like
Hello! So I noticed a few small things to address so I took some time fixing them myself. Actually, I was on version 0.3.5 which didn’t yet have the styling fixes for the Level, Radical, Kanji and Vocabulary pages and finished fixing everything there when it occurred to me I hadn’t checked for an update before doing that. And wouldn’t you know it, you had already gotten to it! Still, there are a couple minor things I noticed.
This first fix actually applies to the item pages too I believe. I added the box-shadow property to the existing .progress-bar__label rule to get rid of the green box-shadow and added .progress-bar__label:before to the .progress-bar__label:after rule so its border color would also not be green.
.progress-bar__label {
color: var(--color-text-dark);
background-color: var(--color-tertiary);
box-shadow: none;
}
.progress-bar__label:before,
.progress-bar__label:after {
border-top-color: var(--color-tertiary);
}
I noticed the badges in the legend still used the original item colors, so these will need to be added somewhere.
.subject-legend__item-badge--all,
.subject-legend__item-badge--radicals {
background-color: var(--color-radical);
}
.subject-legend__item-badge--kanji {
background-color: var(--color-kanji);
}
.subject-legend__item-badge--vocabulary {
background-color: var(--color-vocabulary);
}
.subject-legend__item-badge--burned {
background-color: var(--color-burned);
}
Lastly, we need to go all the way down into the “Info - Components” section and add
.character-item--locked {
background-image: url(https://assets.wanikani.com/assets/stripes-b1fe3954592c3890ba1c7f411696ba17e267470fee29b9eafd83a4b50950a66f.png);
background-repeat: repeat;
}
after .character-item--burned to fix the locked item styling so it actually matches what’s shown in the legend. After fixing the locked items styling with this, I felt like that striped background makes them too light, so you probably want to figure out a different way of styling locked items than this.
Oh, and I’m gonna share the styling I’ve been using for Dashboard Progress Plus (because that script got fixed) and Lesson Hover Details.
CSS and comments
The first rule with the brightness filter can probably be removed. I only have it here because that’s what the old Breeze Dark did. Dashboard Progress Plus actually has its own way of handling the styling of items that are at Guru or later (it gives them different, progressively darker colors), but since those colors are hard coded into the script’s styling they won’t match the color variables chosen by us in Breeze Dark. So, I edit DPP’s code to remove those lines of CSS and use this filter rule to style the Guru and beyond items. Obviously this isn’t a solution that works for everyone, so you’ll probably have to figure out your own way of handling the SRS 5+ styling that doesn’t involve needing to edit DPP code directly.
The var(--color-popover-background) is a variable I added. --color-popover-background: var(--settings-color-menu);, right under the declaration for --color-menu.
I don’t actually know if all these !importants are necessary, they were just present in original Breeze Dark.
/* Dashboard Progress Plus */
.level-progress-dashboard__content .level-progress-dashboard__item[data-srs-lvl="5"] > a,
.level-progress-dashboard__content .level-progress-dashboard__item[data-srs-lvl="6"] > a,
.level-progress-dashboard__content .level-progress-dashboard__item[data-srs-lvl="7"] > a,
.level-progress-dashboard__content .level-progress-dashboard__item[data-srs-lvl="8"] > a,
.level-progress-dashboard__content .level-progress-dashboard__item[data-srs-lvl="9"] > a,
.level-progress-dashboard__content .level-progress-dashboard__item[data-srs-lvl="10"] > a {
filter: brightness(0.5) !important;
}
.level-progress-dashboard__items .popover {
color: var(--color-text);
}
.level-progress-dashboard__items .popover.left .arrow,
.level-progress-dashboard__items .popover.left .arrow::after {
border-left-color: var(--color-popover-background);
}
.level-progress-dashboard__items .popover.right .arrow,
.level-progress-dashboard__items .popover.right .arrow::after {
border-right-color: var(--color-popover-background);
}
.level-progress-dashboard__items .level-progress-dashboard__item.pct90 {
background-color: var(--color-popover-background);
}
/* Lesson Hover Details */
.popover {
background-color: var(--color-popover-background) !important;
border-color: var(--color-popover-background) !important;
border-radius: 5px !important;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
.popover.bottom .arrow,
.popover.bottom .arrow:after {
border-bottom-color: var(--color-popover-background) !important;
}
I’ll have a look as soon as I can at everything you’ve mentioned get it all added in! Unfortunately I’ve got some irl stuff to do tomorrow so it might take a couple of days. I appreciate all the CSS you’ve given me - it should definitely make it a bit faster to work through!
Hey, sorry if I’m just blind and missing something, but the original style had an option to swap the character and background colours for each item in reviews, to make the character grey and the background the item type colour. It would be awesome if that could be added to this too - thanks for all the work on it though, looking great!
1 Like
0.3.9 released with some small improvements, and BD2 now also has options to move around the Extra study, Recent Mistakes, and Level progress UI, in case you for example want Level Progress at the top rather than Recent Mistakes. Just make sure there aren’t two set to the same location! There’s also the option to hide them but currently that’s not perfect because of some margins.
@LupoMikti I’ve started implementing your suggestions, where are the badges in the legend you mention? I don’t remember the last time I saw them lol
I’ve already made the other changes in that message, and I’ll add the Dashboard progress plus and lesson hover details in a few hours 
1 Like
These are the legend badges, on the Level, Radical, Kanji, and Vocabulary pages. (I removed the box shadow around them on my local copy because I don’t like it).
.subject-legend__item-badge--all is the class of the locked and active badges on the Level page. It is styled to be the same color as the radicals so that is why in my suggestion I have that rule covering both it and the radical badge color.
1 Like
Added in 0.4.0! It’s a toggle in the settings and should change exactly what it changes in the old Breeze Dark. Let me know if I’ve overlooked anything with it - it’s a slightly weird implementation as I’m using a different preprocessor so there could be a mistake somewhere 
1 Like
Awesome, thanks for the work
1 Like
Ah - I hadn’t even noticed those colours were the radical / kanji / vocab ones lol
Updated with that, I’ve also got rid of the box shadow because as you mentioned, it looks better without. I’ll get the styling for Dashboard Progress Plus and Lesson Hover Details in later today!
Would it also be possible to customise the review and reading banner colours under the items in reviews? I used to have it darker for reading and lighter for meaning, and having it the other way around is surprisingly confusing to me
1 Like
0.4.2 released. @souperman9 there’s now settings to customize meaning and reading colours. @LupoMikti I’ve added in the styling for Lesson Hover Details and Dashboard Progress Plus, for now it sets the BD2 colours for the radicals and kanji in DPPlus and then lowers their brightness in two increments at higher SRS levels (without needing to edit the script), let me know if you think it’s good enough like that.
1 Like
The change in brightness is fine, although I prefer if the locked items remain the locked color. Actually, while testing it out I noticed that the rules you have for styling the locked items don’t set background-image to none so the linear gradient that wanikani puts on them still makes them gray in color. So to fix this I make these changes
[data-type="kanji"] .dpp-progress .subject-character--locked .subject-character__characters {
background-color: var(--color-locked) !important;
background-image: none;
}
[data-type="radical"] .dpp-progress .subject-character--locked .subject-character__characters {
background-color: var(--color-locked) !important;
background-image: none;
}
Also, I prefer how DPP makes burned items a dark gray color, so I make another change to fix that (but most won’t even have burned items showing in the first place so I don’t think it’s a big deal).
Other small tweaks:
The popover arrows still have a light border to them; this is because only the ::after psuedo-element is styled when the arrow needs to be styled the same way.
.level-progress-dashboard__content .popover.left .arrow,,.level-progress-dashboard__content .popover.right .arrow,, and.popover.bottom .arrow,just need to be added to the corresponding rules.
The character badges outside of the legend (the ones on the actual items) still have the box shadow, so a rule is needed to remove that (
.character-item__badge { box-shadow: none; }).
For some reason the add synonym button on lessons is full width and I don’t like it (see image). So I add a rule to fix this.
#user_synonyms .wk-button { width: auto; }
Oh and I like what you did for the locked items on the item list pages! They look much better now.
1 Like
I’ve made all the changes you mentioned, thanks!
Is the DPP srs level 10 ([data-srs-lvl="10"])? If so I can change it to use the --color-burned variable like all the other burned things.
It’s level 9 actually. I actually had just noticed that for some reason there is a 10, but burned is level 9. I am not sure why 10 was there in the original Breeze Dark.
1 Like
I figured out why 10 is there. In DPP, there is a setting to move locked items to be last in the sorted list instead of first. Normally they have an SRS value of -1, which puts them first when you are sorting by SRS level. The script assigns the data attribute a value of 10 so they come last in the sorting if the user has the setting for locked items to come last on.
1 Like
Thank you for all of your work on this. The theme looks great. I am so happy that you are so quick to fix things as well. One of the biggest downsides with the old theme is that it wasn’t really being supported anymore. So thank you so much for doing this.
I love how you can customize colors as well. One request I have (and you are not obliged to fulfill it, obviously), would be to remove the color border around the SRS level popup that shows after you have completed a review, e.g. “Guru” or “Burned”. Is that something that would even be possible? Perhaps it is something I could just go into the CSS and delete? Regardless, it’s not a huge deal and I am more than happy with everything. Thank you!
1 Like
I’m glad you like it! Sorry, I’m not sure I understand what you mean about the SRS border, it doesn’t have a border as far as I can tell? Or am I misunderstanding?
Or are you referring to a different popup?
EDIT: Or do you mean you’d like to have the word without the coloured background?
This script looks great! I’m mainly after a script that’ll let me hide the level progress panel, so I’m excited to find one that can do that! However, I’m a light mode user, so the rest of the script’s functionality isn’t really something that I need . Is there any way you could release a version of this script that just allows for the panels to be rearranged/hidden without changing any of the colors? Thank you for all of your work on this!