Nsane Dark 2.0

[Alanon]

 

 

At the behest of @Karlston, this is going to be a mini overview on theming Nsane through some basic CSS in order to customise the look and feel of our favourite website. As previously noted, the colour palette was originally posted on Nsane by a different user, and I have kept using and improving it. This here is a full revision due to the IPS 4.5 upgrade, which makes it much easier for anyone to theme websites and/or alter existing themes. (Here is an image album with some screenshots of what everything looks like.) Basically, you can freely download my version and use just that, or keep on reading and try to mod and tweak it to your liking.

 

All modifications were done with the default IPS theme set to active. I've attached two formats – a common userscript file, suitable for Tampermonkey and the like, and an Ad Guard script file (because that's what I use). I haven't used Styler or such tools for a very long time, so I can't speak to what corrections have to be made to the file in order for it to work. If I remember correctly, Styler makes alterations depending on the browser used, etc. while the userscript should be cross-browser compatible. Just delete the .txt extension and the file should be easily importable. Still, if anyone converts the file to Styler, I will gladly add it to this post.

 

In the file we can see lots of code, but the most important bits are these:

 

Spoiler

:root {
    --positive-dark: #507642;
    --informational-dark: #507642;
    --theme-header: 80, 118, 66;
    --theme-link: 80, 118, 66;
    --theme-tag: 80, 118, 66;
    --theme-item_status: 80, 118, 66;
    --theme-active_input_border: 80, 118, 66;
    --theme-area_background_dark: 80, 118, 66;
    --theme-light_button: 80, 118, 66;
    --theme-important_button: 80, 118, 66;
    --theme-brand_primary: 80, 118, 66;
    --theme-area_background: 56, 56, 59;
    --theme-area_background_reset: 56, 56, 59;
    --theme-area_background_light: 74, 74, 79;
    --theme-tab_background: 74, 74, 79;
    --theme-main_nav_tab: 74, 74, 79;
    --theme-page_background: 74, 74, 79;
    --theme-notification_bubble: 193, 34, 0;
    --theme-comment_count_font: 193, 34, 0;
    --theme-text_dark: 178, 178, 178;
    --theme-link_button: 178, 178, 178;
    --theme-text_color: 178, 178, 178;
    --theme-text_light: 178, 178, 178;
    --theme-footer_text: 178, 178, 178;
    --theme-header_text: 178, 178, 178;
    --theme-widget_title_font: 178, 178, 178;
    --theme-section_title_font: 178, 178, 178;
    --theme-main_nav_tab_font: 255, 255, 255;
    --theme-main_nav_font: 255, 255, 255;
    --theme-light_button_font: 255, 255, 255;
    --theme-important_button_font: 255, 255, 255;
    --theme-tag_font: 255, 255, 255;
    --theme-main_nav: 42, 42, 46;
    --theme-selected: 42, 42, 46;
    --theme-timeline_color: 42, 42, 46;
    --theme-section_title: 42, 42, 46;
    --theme-widget_title_bar: 42, 42, 46;
}

 

These are the new colour variables that are applied universally to various elements of the theme. Previously, most theme elements had to be selected and detected manually, which was a huge pain, but this process greatly simplifies theming. These are not all of the variables, just the ones I used. Some are self-explanatory, others are not. Regardless, I wouldn't try and interpret the variable's significance based on its name alone. In the file, I've grouped the variables I altered by colour, so you can use my files as a template for your own theme. I've also annotated the remaining elements so you can get a sense of what's what (it's mostly about ensuring the input editor and share-code window, and other tiny elements are properly darkened – the inversions make the icon images the same off-white as the text. Another filter makes the share-code icon colourless, etc.).

 

All you really need to start making changes are half a dozen or so compatible and well-thought out colours. In this case, 2 or 3 shades of gray form the backgrounds for the site canvas, the input fields, and the post rectangles. Then we have an accent colour, text colour, and optional things like link and link hover colour, notification/reply number colour, etc. You can go further and deeper with a more diverse palette, but I wouldn't. It can get complicated very quickly. If you change the colours "in bulk" as I have distributed then, you'll retain the same effect, only with the colours you've chosen. This should make it easier for anyone to create a theme of their own, provided that the colours mesh well together, which is a lot trickier than it sounds. Also note that most of the variables are input in RGB, without the proper syntax, as that's how it works, for some reason. Other places demand HEX values.

 

That's basically it as far as a starting point goes. Of course, if you like it, you can just apply the theme as-is, or tweak one or two fields/colours if something just doesn't fit right for you. Also, keep in mind that this is a work in progress – there will probably be ill-fitting elements or glitches that I haven't seen yet. In that case, please let me know so I can try and fix it.

 

Thanks for reading!

 

 

Nsane Dark 2.0.user.js.txt [AG]Nsane Dark 2.0.user.js.txt

[Karlston]

Just tried it, added the TM script to Firefox/TamperMonkey.

 

I like it, thanks for your effort posting it here. It'll also serve as an educational resource for CSS. 👍

 

Might just make some of the greys a little darker. Gotta change something

 

Will first try using the Stylus addon for any changes, so as to keep your script vanilla. Not sure which will take precedence, Stylus or your TM script. One way to find out...

[Alanon]

17 minutes ago, Karlston said:

Just tried it, added the TM script to Firefox/TamperMonkey.

 

I like it, thanks for your effort posting it here. It'll also serve as an educational resource for CSS. 👍

 

Might just make some of the greys a little darker. Gotta change something

 

Will first try using the Stylus addon for any changes, so as to keep your script vanilla. Not sure which will take precedence, Stylus or your TM script. One way to find out...

 

Happy tweaking! 😁

Be sure to put it through the ringer, I checked everywhere I thought to look, but mistakes are likely to be hiding somewhere. Good luck with Stylus too, I tried to use it before posting, it's changed so much since I've used it last that I couldn't get it to work easily.