Ok, got another one. This has turned into one of my all-time favourites, so I'll also be doing it as an installable custom theme on the Theme Site. IOW, the whole kaboodle, with templates and language files and all the usual stuff that themes have. I'm thinking I'll make it a three variant dark theme: this one (Blue Steel) + Chocolate Curvaceous (the dark brown one I posted earlier) + Prince of Darkness, all updated to the style of this variant.
In the meantime it's CSS only, on this site's markup, so it can be dropped into Stylus or Stylem for browsing on smf.org. It handles the non-forum areas as well as the forum. In other words, it works fairly well with everything in the site menu (at the top right of the forum header).
Do note that this is a pile of overrides for this site's code and should not, this means NOT, be taken as a guide for how to write good CSS in general. Lots of it is seriously horrible, because it had to be to work on top of what is in this site's files. If being done from scratch, as a pure custom theme, it could be done a lot cleaner and simpler.
The CSS file has been minified, so formatting is not particularly friendly, but it all works AFAICT. Code allows for basic responsiveness, but I can't guarantee how that will behave with this site's lack of the usual viewport meta tag.
I have implemented pure CSS "New" icons because I hated the old new.gif. This means it can't pick up the default language strings, so if you don't want it to say "New" in English you'll have to edit the CSS to your preferred language. I have put this at the end of the file so it's easy to find and edit.
/* Pure CSS "New" icons: board index, message index, unread. */
/* English default. Examples provided for French and German. */
/* Edit content text to suit your preferred language. */
/*
content:'nouveau';
content:'neu';
*/
.children .new_posts+a::after,.topic_table a[id*=newicon]::after{content:'new';background:#55677b;color:#ffe3ad;font-weight:700;font-size:1rem;padding:0 4px;text-transform:uppercase;text-shadow:0 0 1px #000}.children .new_posts+a:hover,.topic_table a[id*=newicon]:hover{text-decoration:none;border-color:#55677b;transition:border-color .1s step-end}}
The only part you have to change if you do not want English is where it says content;'new';
The screenshots show how the theme looks when running live in Pale Moon with the Stylem add-on. Do note that at this stage there is no support for RTL languages.