Dark Theme for Bitcointalk | Nord 🖤

[Vyrine]

Dark Theme for Bitcointalk | Nord 🖤

Based on Nord. An arctic, north-bluish color palette.

Preview
https://raw.githubusercontent.com/Flame-0/nord-bitcointalk/main/screenshot0.png

https://raw.githubusercontent.com/Flame-0/nord-bitcointalk/main/screenshot1.png

https://raw.githubusercontent.com/Flame-0/nord-bitcointalk/main/screenshot2.png

https://raw.githubusercontent.com/Flame-0/nord-bitcointalk/main/screenshot3.png

https://raw.githubusercontent.com/Flame-0/nord-bitcointalk/main/screenshot4.png

Installation
1. Install any one of these below based in your current browser,
• Stylus for Firefox
• Stylus for Chrome
• Stylus for Opera
• Cascadea for Safari
 
2. I cannot put the URL of the code here because bitcointalk is blocking it, so I will just going to put the whole code here or alternatively, here are the links of the code with an asterisk (*). Copy the entire URL, paste it on your search bar, and remove the asterisk (*).

• https://*raw.githubusercontent.com/Flame-0/nord-bitcointalk/main/nord-bitcointalk*.user*.css
• https://*userstyles.org/styles/195028/nord-bitcointalk

Code:

/* ==UserStyle==
@name         Bitcointalk Nord Theme
@namespace    nord-bitcointalk
@homepageURL  https://github.com/Flame-0/nord-bitcointalk
@version      1.0.0
@license      MIT
@description  Nord Theme for bitcointalk.org
@author       Flame-0 (https://github.com/Flame-0)
==/UserStyle== */

@-moz-document domain("bitcointalk.org") {

/* Normal, standard links. */
a:link {
    color: #81a1c1;
    text-decoration: none;
}
a:visited {
    color: #5e81ac;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Style for ignored topics in the message view */
.ignored_topic td a:link {
    color: #ACABAD;
    text-decoration: none;
    font-style: italic
}
.ignored_topic td a:visited {
    color: #ACABAD;
    text-decoration: none;
    font-style: italic
}
.ignored_topic td {
    color: #ACABAD;
    font-size: smaller;
    padding-top: 0;
    padding-bottom: 0
}
.ignored_topic .leftimg img {
    display: none
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited {
    color: #eceff4;
    text-decoration: none;
}
a.nav:hover {
    color: #eceff4;
    text-decoration: underline;
}

/* Tables should show empty cells. */
table {
    empty-cells: show;
}

/* By default (td, body..) use verdana in #2e3440. */
body, td, th, tr {
    color: #eceff4;
    font-size: 13px;
    font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body {
    background-color: #242933;
    margin: 0px;
    padding: 12px 30px 4px 30px;
    font: 13px verdana, helvetica, sans-serif;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button {
    background-color: #3b4252;
    color: #eceff4;
    font-family: verdana, sans-serif;
    border-color: #81a1c1;
}
input, button {
    font-size: 100%;
}

textarea {
    font-size: 100%;
    color: #eceff4;
    font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check {}

/* Selects are a bit smaller, because it makes them look even better 8). */
select {
    font-size: 90%;
    font-weight: normal;
    color: #eceff4;
    font-family: verdana, sans-serif;
    background-color: #3b4252;
    border-color: #81a1c1;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor {
    height: 1px;
    border: 0;
    color: #666666;
    background-color: #666666;
}

/* No image should have a border when linked */
a img {
    border: 0;
}

/* A quote, perhaps from another post. */
.quote {
    color: #eceff4;
    background-color: #3b4252;
    border: 1px solid #4c566a;
    padding: 5px;
    margin: 1px 3px 6px 6px;
    font-size: 11px;
    line-height: 1.4em;
}


/* A code block - maybe even PHP ;). */
.code {
    color: #eceff4;
    background-color: #434c5e;
    font-family: "courier new", "times new roman", monospace;
    font-size: 12px;
    line-height: 1.3em;
    /* Put a nice border around it. */
    border: 1px solid #4c566a;
    padding: 5px;
    margin: 1px 3px 4px 6px;
    width: 93%;
    /* Don't wrap its contents, and show scrollbars. */
    white-space: nowrap;
    overflow: auto;
    /* Stop after about 24 lines, and just show a scrollbar. */
    max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader {
    color: #81a1c1;
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
    font-size: 10px;
    line-height: 1.2em;
    margin-left: 6px;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help {
    cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction {
    color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor {
    width: 96%;
    height: 350px;
}

/* Highlighted text - such as search results. */
.highlight {
    background-color: #ebcb8b;
    font-weight: bold;
    color: #2e3440;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body {
    color: #eceff4;
    background-color: #2e3440;
}
.windowbg2 {
    color: #eceff4;
    background-color: #2e3440;
}
.windowbg3 {
    color: #eceff4;
    background-color: #2e3440;
}
/* the today container in calendar */
.calendar_today {
    background-color: #2e3440;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td {
    color: #eceff4;
    font-style: normal;
    background: none;
    background-color: #2e3440;
    border: none !important;
    padding-left: 10px;
    padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited {
    font-weight: bold;
    color: #eceff4;
    font-style: normal;
}

.titlebg a:hover {
    color: #eceff4;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited {
    color: #a3be8c;
    font-style: normal;
    text-decoration: underline;
}

.titlebg2 a:hover {
    text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg, tr.catbg td, .catbg3, tr.catbg3 td {
    background: none;
    background-color: #2e3440;
    color: #ebcb8b;
    padding-left: 10px;
    padding-right: 10px;
}
.catbg2, tr.catbg2 td {
    background: none;
    background-color: #2e3440;
    color: #eceff4;
    padding-left: 10px;
    padding-right: 10px;
}
.catbg, .catbg2, .catbg3 {
    border: none !important;
}
.catbg, .catbg2 {
    font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited {
    font-size: 95%;
    color: #eceff4;
    text-decoration: none;
}
.catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited {
    color: #eceff4;
    text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover {
    color: #e0e0ff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor {
    background-color: #4c566a;
}

/* This is used on tables that should just have a border around them. */
.tborder {

    padding: 1em;
    box-shadow: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
    background-color: rgb(46, 52, 64);
    border: 0px;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext {
    font-size: x-small;
    font-family: verdana, sans-serif;
}
.middletext {
    font-size: 90%;
}
.normaltext {
    font-size: small;
}
.largetext {
    font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage {
    width: 100%;
    overflow: auto;
    line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature {
    max-height: 4em;
    width: 100%;
    overflow: hidden;
    padding-bottom: 3px;
    line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error {
    color: #bf616a;
}

/* The AJAX notifier */
#ajax_in_progress {
    background: #a3be8c;
    color: #eceff4;
    text-align: center;
    font-weight: bold;
    font-size: 18pt;
    padding: 3px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}




/* Standard SMF tabs */
/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last {
    color: #eceff4;
    text-align: center;
    text-transform: uppercase;
    vertical-align: top;
    position: relative;
    left: -10px;
    bottom: -7px;
}
.maintab_back, .maintab_active_back {
    color: #eceff4;
    text-decoration: none;
    font-size: 10px;
    vertical-align: top;
    padding: 1em;
    background-color: rgb(46, 52, 64);
    border: 0px;
}

.maintab_first {
    background: none;
    background-color: #2e3440;
}
.maintab_back {
    background: none;
    background-color: #2e3440;
}
.maintab_last {
    background: none;
    background-color: #2e3440;
}
.maintab_active_first {
    background: none;
    background-color: #3b4252;
}
.maintab_active_back {
    background: none;
    background-color: #3b4252;
}
.maintab_active_last {
    background: none;
    background-color: #3b4252;
}



/* Custom tabs for message area */
/* definitions for the main and mirror tabs, active means the tab reflects which page is displayed */
div#bodyarea .maintab_first, div#bodyarea .maintab_back, div#bodyarea .maintab_last, div#bodyarea .maintab_active_first, div#bodyarea .maintab_active_back, div#bodyarea .maintab_active_last,
div#bodyarea .mirrortab_first, div#bodyarea .mirrortab_back, div#bodyarea .mirrortab_last, div#bodyarea .mirrortab_active_first, div#bodyarea .mirrortab_active_back, div#bodyarea .mirrortab_active_last {
    color: #a1a1a1;
    text-transform: lowercase;
    vertical-align: top;
}
div#bodyarea .maintab_back, div#bodyarea .maintab_active_back,
div#bodyarea .mirrortab_back, div#bodyarea .mirrortab_active_back {
    color: #a1a1a1;
    text-decoration: none;
    font-size: 11px;
    vertical-align: top;
    padding: 6px;
    padding-top: 4px;
    font-family: verdana, sans-serif;
    font-weight: bold;
}

div#bodyarea .maintab_first,
div#bodyarea .mirrortab_first {
    display: none;
}
div#bodyarea .maintab_back,
div#bodyarea .mirrortab_back {
    background: none;
}
div#bodyarea .maintab_last,
div#bodyarea .mirrortab_last {
    display: none;
}
div#bodyarea .maintab_active_first,
div#bodyarea .mirrortab_active_first {
    display: none;
}
div#bodyarea .maintab_active_back,
div#bodyarea .mirrortab_active_back {
    background: none;
    background-color: #2e3440;
}
div#bodyarea .maintab_active_last,
div#bodyarea .mirrortab_active_last {
    display: none;
}

/* how links behave in main tab. */
div#bodyarea .maintab_back a:link, div#bodyarea .maintab_back a:visited,
div#bodyarea .mirrortab_back a:link, div#bodyarea .mirrortab_back a:visited {
    color: #81a1c1;
    text-decoration: none;
}
div#bodyarea .maintab_active_back a:link, div#bodyarea .maintab_active_back a:visited,
div#bodyarea .mirrortab_active_back a:link, div#bodyarea .mirrortab_active_back a:visited {
    color: #eceff4;
    text-decoration: none;
}

div#bodyarea .maintab_back a:hover, div#bodyarea .maintab_active_back a:hover,
div#bodyarea .mirrortab_back a:hover, div#bodyarea .mirrortab_active_back a:hover {
    text-decoration: underline;
}

.nav {
    font-size: 13px;
    font-weight: normal;
}

div.nav b:last-child a {
    font-weight: bold;
    text-decoration: none;
    cursor: default;
}

.post {
    font-size: 13px;
}

.smalltext {
    font-size: 11px;
}

/* valign the first column icons on main page */
div div.tborder table.bordercolor td.windowbg {
    vertical-align: middle;
}

/* valign the reply, modify etc icons with their button text */
table.bordercolor td.windowbg td a img,
table.bordercolor td.windowbg2 td a img {
    vertical-align: middle;
    margin-left: 4px;
}

/* hide the ip logged icon */
table.bordercolor td.windowbg td.smalltext td.smalltext img,
table.bordercolor td.windowbg2 td.smalltext td.smalltext img {
    display: none;
}

/* prevent gap between post icon and subject */
div#bodyarea table.bordercolor td td td.td_headerandpost td:first-child {
    width: 26px;
}

/* offline indicator: hide it, only show when online */
div#bodyarea table.bordercolor td td td.poster_info div.smalltext img[src*="useroff.gif"] {
    vertical-align: middle;
    display: none;
}
div#bodyarea table.bordercolor td td td.poster_info div.smalltext img[src*="useroff.gif"] + span.smalltext,
div#bodyarea div.smalltext > a[title*="(Offline)"] + span.smalltext {
    vertical-align: middle;
    display: none;
}

/* online indicator: get icon aligned with text and bold it */
div#bodyarea table.bordercolor td td td.poster_info div.smalltext img[src*="useron.gif"] {
    vertical-align: middle;
    margin-top: 2px;
    margin-bottom: 2px;
}
div#bodyarea table.bordercolor td td td.poster_info div.smalltext img[src*="useron.gif"] + span.smalltext,
div#bodyarea div.smalltext > a[title*="(Online)"] + span.smalltext {
    vertical-align: middle;
    font-weight: bold;
    line-height: 28px;
}

/* widen the details column on the forums directory */
div.tborder table.bordercolor td.windowbg[width="6%"] + td + td + td.windowbg2[width="22%"] {
    min-width: 230px;
}

/* widen the details column on the topics list */
div.tborder table.bordercolor td.windowbg[width="4%"] + td.windowbg2[width="22%"] {
    min-width: 230px;
}

/* hide the "logged" text/image -- CSS by ryepdx */
td.smalltext[id^="modified_"] + td.smalltext[align="right"][valign="bottom"] {
    display: block !important;
}
td.smalltext[id^="modified_"] + td.smalltext[align="right"][valign="bottom"] img,
td.smalltext[id^="modified_"] + td.smalltext[align="right"][valign="bottom"] .help {
    display: none !important;
}

/* get rid of some of the spacing left over from the empty table */
table[cellpadding="3"] table[cellpadding="5"] td.smalltext[valign="bottom"][width="85%"] {
    padding: 0px;
}

/* check the checkbox to hide email address on the registration form */
input#hideEmail {
    checked: checked;
}

.hiddenlink:link {
    color: lightgray;
}
.hiddenlink:visited {
    color: lightgray;
}
.hiddenlink:hover {
    color: lightgray;
}
.hiddenlink:active {
    color: lightgray;
}

@font-face {
    font-family: 'ChopinScript';
    src: url('/Themes/ChopinScript.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BTC';
    src: url('/Themes/BTC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.BTC {
    font-family: "BTC";
}

.edited {
    border-bottom: 1px dotted #2e3440;
    cursor: help;
}

img.userimg {
    max-width: 100%
}
.trustscore {
    white-space: nowrap;
    color: #eceff4 !important;
}
.nohover:hover {
    text-decoration: none
}

a.ul[href^="https://bitcointalk.org/"]:hover {
    color: #a3be8c !important
}
a.ul[href^="http://bitcointalk.org/"]:hover {
    color: #a3be8c !important
}
img.unloaded[alt=""] {
    background-image: url("https://bitcointalk.org/Themes/throb.gif");
    background-repeat: no-repeat;
    min-width: 8px;
    min-height: 8px;
    display: inline-block
}
.editplain {
    display: none
}
@media(pointer:none) {
    .editplain {
        display: inline
    }
}
@media(pointer:coarse) {
    .editplain {
        display: inline
    }
}
.utusers {
    color: gray;
    font-size: smaller
}
.utusers a:link {
    color: gray;
    font-style: italic;
}
.utusers a:visited {
    color: gray;
}
.utusers a:hover {
    text-decoration: none;
    color: gray;
}
}

References:
• https://github.com/Flame-0/nord-bitcointalk - Repository of Nord Bitcointalk
• https://bitcointalk.org/index.php?topic=4738016.0 - screenshot4.png
• https://www.nordtheme.com/ - An arctic, north-bluish color palette.

[1715314159]

1715314159

[1715314159]

1715314159

[1715314159]

1715314159

[1715314159]

1715314159

[tranthidung]

I welcome you to the forum Vyrine and thank your for the Nord Theme for Bitcointalk.

• You should spend a little time to write a description and how to use it (on this thread and on Github as well).
• List of Bitcointalk.org Userscripts/ Add-ons

Some other dark themes

• Dark theme for Bitcointalk(CSS only)
• Bitcointalk Dark Theme
• Dark Reader (Bitcointalk Dark Theme)

[LoyceV]

Quoting images:

Preview

[ibminer]

Doesn't look too bad. I'm not fond of the additional padding you have added to the header, since it off-centers some elements and takes up more vertical space, but overall not too bad.

Some other dark themes
--snip--

Don't forget:
Bitcointalk Themes (CSS-Based): Dark Silver, Dark Purple

There are also two other regular/non-dark themes (Neutral & Enhanced) included in the BPIP Extension!

[Vyrine]

tranthidung, LoyceV, and ibminer, thank you for noticing this small work and for the recommendations too! I will try to improve the documentation and the code also.

[Lorence.xD]

Is the theme usable now? I really love dark mode when it comes to websites. Hopefully, you will drop the instructions on this thread because I am wary of links although I know it is github link, I still have to take measure.

Preview

[Stalker22]

I'm really a fan of dark themes for forums and blogs, because I think dark mode helps minimize eye strain. Especially in low-light conditions. I really like what I'm seeing here.

I think the browser extension "Stylish" is one of the most popular ways to customize the color scheme of web pages. @Vyrine, maybe you should consider making your theme compatible with that extension, making it easier for users to install and apply on the website.

[OcTradism]

Bitcointalk Extension - All In One - Available on Chrome store - Version 2.5

That user was unfortunately autobanned so that no chance to see any update for that extension. The idea and that extension are great and I will support if other members in the forum can build up another one and expand it more.

If you want to have full dark mode (theme and background), there is a script from @DroomieChikito Script to Change Bitcointalk Background Color

[Stalker22]

Bitcointalk Extension - All In One - Available on Chrome store - Version 2.5

That user was unfortunately autobanned so that no chance to see any update for that extension. The idea and that extension are great and I will support if other members in the forum can build up another one and expand it more.

I didn't know about "Bitcointalk Extension - All In One" before. I'll have to test it first if it's still available in the Chrome store.
Since many of us already use BPIP Extension it might be a good idea to ask suchmoon to add such functionality as well.

[Vyrine]

Is the theme usable now? I really love dark mode when it comes to websites. Hopefully, you will drop the instructions on this thread because I am wary of links although I know it is github link, I still have to take measure.

Hello, Lorence.xD. Yes it is usable, perfectly! And I've updated the thread on how to install. Thank you!

[Vyrine]

I'm really a fan of dark themes for forums and blogs, because I think dark mode helps minimize eye strain. Especially in low-light conditions. I really like what I'm seeing here.

I think the browser extension "Stylish" is one of the most popular ways to customize the color scheme of web pages. @Vyrine, maybe you should consider making your theme compatible with that extension, making it easier for users to install and apply on the website.

Hello, Stalker22! This small work is Stylish-compatible. I've updated the thread on how to install it with Stylish Extension (Addon). Thank you!

[Stalker22]

Hello, Stalker22! This small work is Stylish-compatible. I've updated the thread on how to install it with Stylish Extension (Addon). Thank you!

Yes, I've just tried that. It seems to be working perfectly. Thank you!

I think this will be my default style for the bitcointalk forum from now on. 

[Insanerman]

I didn't know about "Bitcointalk Extension - All In One" before. I'll have to test it first if it's still available in the Chrome store.
Since many of us already use BPIP Extension it might be a good idea to ask suchmoon to add such functionality as well.

AFAIK, if suchmoon would configure his current script with the BPIP extension to add this kind of feature, he would and might have a hard time replacing variables such as the elements placed by his extension to be appropriate in the dark theme. The current lists of dark theme extensions are already enough and had being used together with the BPIP extension by some users (I guess). So you can simply download the existing dark theme extensions for the forum made by other users and still use BPIP extension simultaneously. 

[Vyrine]

Hello, Stalker22! This small work is Stylish-compatible. I've updated the thread on how to install it with Stylish Extension (Addon). Thank you!

Yes, I've just tried that. It seems to be working perfectly. Thank you!

Thank you, Stalker22, for the feedback! I really appreciate it!

[Pmalek]

This thread was posted before and deleted for some reason.
I like your dark theme. The only thing that I would like to see changed are the trust ratings that are in black. I feel like white or blue would fit better. Is there a reason why you choose to make only that part in black?

[Vyrine]

This thread was posted before and deleted for some reason.
I like your dark theme. The only thing that I would like to see changed are the trust ratings that are in black. I feel like white or blue would fit better. Is there a reason why you choose to make only that part in black?

Hello, Pmalek! The first thread was deleted because the URL was marked as spam by system. By the way, thank you for noticing that black font. It is fixed now. Thank you!

[Thanos01]

Great topic OP , i really loved the blue theme and my eyes feel much better now than with the white theme .

also if you could make some edits to code and make the color of the pins topics section different than the other sections, this will help us more the recognize them which if find it really hard with the current theme , thanks .

[Vyrine]

Great topic OP , i really loved the blue theme and my eyes feel much better now than with the white theme .

also if you could make some edits to code and make the color of the pins topics section different than the other sections, this will help us more the recognize them which if find it really hard with the current theme , thanks .

Hello, Thanos01! I've added it to the backlog and I will mention you as soon as I start working on it. Thank you!

[Mitchell]

This is a dope theme! Thank you for sharing

[jamyr]

Found this:

https://bitcointalk.org/index.php?topic=1269619.msg13102703#msg13102703

It was a discussion in 2015,

edit:

Another by Cyrus. . . .

https://bitcointalk.org/index.php?topic=580171.msg6338422#msg6338422