This year is the year of "dark mode". I search for this option before buying any phone or downloading any application.
I have several scripts for night mode and I am currently using 2 of them, however, the results do not look excellent.
So I hope you can add night mode with perfect harmony.
I use "Stylus" (
https://github.com/openstyles/stylus/wiki)... it's a fork of "Stylish" extension... and a theme called: "Nex Dark Theme", which I have modded slightly to make Bitcointalk look a bit "better" (or at least, a bit more consistent).
Unfortunately, I can't find the link where I originally downloaded this theme from... but original credit to whomever the original author was!EDIT: Found the original author:
https://userstyles.org/users/655340.tborder {
border: none;
background-color: transparent;
padding: 0
}
form#quickModForm > table.bordercolor > tbody > tr > td {
padding: 0;
}
/*استثناء عناصر من الغاء الحدود*/
#frmLogin table.tborder,
#creator table.tborder,
.tborder table#smfheader+table,
.tborder table#smfheader+table+table,
div#helpmenu+div#helpmain {
border: 1px solid #373b44 !important;
}
/**/
.tborder table#smfheader+table,
.tborder table#smfheader+table+table {
border-top: none !important;
}
.tborder table#smfheader+table {
border-bottom: none !important;
}
#upshrinkHeader2 { padding-bottom: 1px; }
/*--------استثناء عناصر من الغاء الحدود نهاية--------*/
/* خانات الادخال input */
input,
input[type="text"],
textarea,
select {
outline: none;
padding: 4px;
transition: all 0.2s;
border-radius: 3px;
}
input:disabled {
background-color: #25282f;
}
input[type="button"],
input[type="submit"] {
cursor: pointer;
padding: 2px 10px !important;
transition: all 0.2s;
color: #fff;
}
input:focus, textarea:focus {
border-color: #6393bf !important;
}
input, input[type="text"], textarea {
border: 1px solid #aaa;
}
select {padding: 2px}
/* الردود منفصلة كصناديق
-----------------------*/
#bodyarea > form > table > tbody > tr > td > table {
margin-top: 10px;
}
#bodyarea > form > table > tbody > tr:first-child > td > table {
margin-top: 0;
}
#bodyarea #quickModForm .bordercolor {
background-color: transparent;
}
#quickModForm .windowbg, #quickModForm #preview_body{
background-color: #f7f7f7;
}
#quickModForm .windowbg2 { background-color: #fff; }
#quickModForm .windowbg,
#quickModForm .windowbg2 {
padding: 0;
border-radius: 5px;
}
form#quickModForm > table:first-child > tbody > tr:first-child td.windowbg:first-child {
border-radius: 0 0 5px 5px;
}
#quickModForm td.windowbg > table > tbody > tr > td+td,
#quickModForm td.windowbg2 > table > tbody > tr > td+td{
padding-right: 25px !important;
padding-left: 25px !important;
}
#quickModForm td.windowbg > table > tbody > tr > td.poster_info,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
padding-left: 10px;
width: 14%;
overflow: auto !important;
border-radius: 5px 0 0 5px;
}
#quickModForm td.windowbg > table > tbody > tr > td.poster_info {
background-color: #f3f3f3;
}
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
background-color: #f7f7f7;
}
/*-------- نهاية الردود منفصلة كصناديق --------*/
/*-------------------------
تعديلات بداخل المواضيع
--------------------------*/
.post { padding-top:5px; }
/* اخفاء Re:.. */
.subject a {display: none}
/* تغير لون الفواصل */
hr, .hrcolor {
color: #d2d2d2;
background-color: #d2d2d2;
}
/* نهاية تعديلات بداخل المواضيع */
/*-----------------------------------
الاقتباسات
------------------------------------*/
.quote {
color: inherit;
}
.quote,
.quoteheader {
background-color: transparent;
border: none;
margin-top: 0;
}
.quoteheader {
margin-right: 3px;
}
.quoteheader:before {
content: url(https://i.ibb.co/W0hX5KP/qicon.png);
opacity: 0.1;
margin: 0 5px;
}
.quoteheader,
.quote {
border-left: 4px solid #ddd;
}
/*عند مرور الماوس*/
.quote:hover {
border-left: 4px solid #ccc;
}
.quoteheader:hover,
.quoteheader:hover + .quote,
.quoteheader:hover,
.quoteheader:hover + .quote
{
border-left: 4px solid #ccc;
}
/* الاقتباس اتجاة يمين
----------------------*/
div.post[dir='rtl'] .quoteheader,
div.post[dir='rtl'] .quote{
border-right: 4px solid #ddd;
border-left: 0 !important;
}
div.post[dir='rtl'] .quote:hover {
border-right-color: #ccc;
}
/* عند مرور الماوس اتجاة يمين*/
div.post[dir='rtl'] .quote:hover
{
border-right: 4px solid #ccc;
}
div.post[dir='rtl'] .quoteheader:hover,
div.post[dir='rtl'] .quoteheader:hover + .quote {
border-right: 4px solid #ccc;
}
/*---------- نهاية الاقتباسات ------------*/
/*-----------------------------------
تنسيق عنوان الموضوع
------------------------------------*/
#bodyarea table.tborder tr.catbg3,
#bodyarea table.tborder tr.catbg3 td {
background-image: none;
background-color: #5b7e9e;
}
tr.catbg3 #top_subject {
padding-top: 5px;
padding-bottom: 5px;
}
#bodyarea table.tborder tr.catbg3 td:first-child {
border-radius: 5px 0 0 0;
}
#bodyarea table.tborder tr.catbg3 td:last-child {
border-radius: 0 5px 0 0;
}
/*---------- نهاية تنسيق عنوان الموضوع ------------*/
#bodyarea > div.tborder > table.bordercolor {
border-radius: 5px 5px 0 0;
}
.catbg, .catbg2, .catbg3 {
border-bottom: 0;
}
.catbg, tr.catbg td, .catbg3, tr.catbg3 td,
.catbg2, tr.catbg2 td {
background-image: none;
background-color: #5b7e9e;
}
tr.catbg3 #top_subject {
padding-top: 5px;
padding-bottom: 5px;
}
table.bordercolor tr td.catbg3:first-child {
border-radius: 5px 0 0 0;
}
table.bordercolor tr td.catbg3:last-child {
border-radius: 0 5px 0 0;
}
.tborder > .catbg:first-child,
table.bordercolor tr td.catbg:first-child,
.catbg2:first-child {
border-radius: 5px 5px 0 0;
}
.bordercolor {
margin-top: 0 !important;
}
/* الهيدر */
.tborder #smfheader td.catbg:first-child {
border-radius: 5px 0 0 0
}
.tborder #smfheader td.catbg:last-child {
border-radius: 0 5px 0 0
}
/* اضافة لون للمواضيع المتحكمة من صاحب الموضوع */
#bodyarea tr.catbg3+tr td.smalltext {
background-color: #fffce5;
border-bottom: 1px solid #ffde7b;
}
/*---------- نهاية موضوع متحكم ------------*/
/*-----------------------------------
تغير الصور الشخصية لدائرية
-----------------------------------*/
#quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
table > tbody > tr > td.windowbg img.avatar,
form[name=pmFolder] img.avatar {
display: inline-block;
vertical-align: middle;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
object-fit: cover;
border: 2px solid #fff;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background: no-repeat center center;
box-shadow: 2px 2px 4px 0px #aaa;
}
/* الحجم بالمنشورات */
#quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
form[name=pmFolder] img.avatar /*بصفحة الرسائل*/ {
height: 4rem;
width: 4rem;
}
/* الحجم بصفحة العضوء */
table.bordercolor > tbody > tr > td.windowbg img.avatar {
height: 5.75rem;
width: 5.75rem;
}
/* الحجم بالهيدر العلوي */
#upshrinkHeader table > tbody > tr > td.windowbg img.avatar {
height: 3.5rem;
width: 3.5rem;
}
/* من الديف الحاويoverflow اخفاء */
#quickModForm td.windowbg > table > tbody > tr > td.poster_info div[style^="overflow"],
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info div[style^="overflow"]{
overflow: unset !important;
}
/*------ نهاية تغير الصور الشخصية لدائرية ------*/
/* اخفاء حدود القائمة العلوية */
.tborder table#smfheader+table,
.tborder table#smfheader+table+table {
border: none !important;
}
div[style="border:2px solid orange; background-color:lightyellow; padding:10px; margin-bottom:5px"] {
color: black
}
div[style="border:2px solid red; background-color:#FF9696; padding:10px; margin-bottom:5px"] {
color: black
}
div[style="border:2px solid red; background-color:#FF9696; padding:10px; margin-bottom:5px"] a {
color: #666666
}
/* خانات الادخال input */
input, textarea {
border-color: #424448 !important;
background-color: #191c23;
}
input:focus, textarea:focus {
border-color:#567ee0 !important;
}
input[type="button"],
input[type="submit"] {
border: none;
background-color: #3F51B5;
border-radius: 3px;
padding: 4px 7px !important;
}
input[type="button"]:hover,
input[type="submit"]:hover {
background-color: #5265d9;
}
/* الوان القوائم الفاتحة */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
border: none;
background-image: none;
background-color: #373b44;
}
/* لون النصوص بالثيم الاسود*/
body, td, th, tr,
.nav, .nav:link, .nav:visited,
a.nav:hover,
.windowbg, #preview_body,
.quoteheader, .codeheader, .code,
.windowbg2, .windowbg3,
.titlebg2 a:link, .titlebg2 a:visited,
.titlebg, .titlebg a:link, .titlebg a:visited,
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td,
input, textarea
{
color: #ccc
}
/* لون الخلفية بالثيم الاسود */
.windowbg, #preview_body {
background-color: #25282f;
}
/* الروابط */
a:visited {
color: #939dc5;
}
a:link {
color: #939dc5;
}
a.ul[href^="https://bitcointalk.org/"]:hover {
color: #89c775 !important
}
.edited {
border-bottom-color: #d6d6d6;
}
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: #939dc5;
}
/* الوان خلفية الردود */
#quickModForm .windowbg, #quickModForm #preview_body,
#quickModForm .windowbg2 {
background-color: #23262f;
}
#quickModForm td.windowbg > table > tbody > tr > td.poster_info,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info {
background-color: #20232b;
}
/* الفواصل */
hr, .hrcolor {
color: #393c44;
background-color: #393c44;
}
/* الوان الاقتباسات
--------------------------*/
.quoteheader, .quoteheader a {
color: #737c9e;
}
.quoteheader,
.quote{
border-left: 4px solid #3d444e;
}
.quote:hover
{
border-left: 4px solid #62676f;
}
.quoteheader:hover,
.quoteheader:hover + .quote
{
border-left: 4px solid #62676f;
}
/* الاقتباس اتجاة يمين
----------------------*/
div.post[dir='rtl'] .quoteheader,
div.post[dir='rtl'] .quote{
border-right: 4px solid #3d444e;
}
div.post[dir='rtl'] .quote:hover {
border-right-color: #62676f;
}
/* عند مرور الماوس اتجاة يمين*/
div.post[dir='rtl'] .quote:hover
{
border-right: 4px solid #62676f;
}
div.post[dir='rtl'] .quoteheader:hover,
div.post[dir='rtl'] .quoteheader:hover + .quote {
border-right: 4px solid #62676f;
}
/*---------- نهاية الوان الاقتباسات ------------*/
/* الصور الشخصية */
#quickModForm td.windowbg > table > tbody > tr > td.poster_info img.avatar,
#quickModForm td.windowbg2 > table > tbody > tr > td.poster_info img.avatar,
table > tbody > tr > td.windowbg img.avatar,
form[name=pmFolder] img.avatar
{
background-color: #fff;
border-color: #323640;
box-shadow: 2px 2px 4px 0px #121c27;
}
/* الوان عنوان الموضوع */
#bodyarea table.tborder tr.catbg3,
#bodyarea table.tborder tr.catbg3 td {
background-color: #373b44;
}
.catbg, tr.catbg td, .catbg3, tr.catbg3 td,
.catbg2, tr.catbg2 td {
background-color: #3f4554;
}
#bodyarea table.tborder tr.catbg3,
#bodyarea table.tborder tr.catbg3 td {
background-color: #373b44;
}
/* اضافة لون للمواضيع المتحكمة من صاحب الموضوع */
#bodyarea tr.catbg3+tr td.smalltext {
background-color: #292d38;
border-bottom-color: #373b44;
color: #fff
}
/* ----------------
تعديل الالوان
------------------*/
[style^="color: black"], [style^="color:black"] {
color: #d6d6d6 !important;
}
[style^="color: green"], [style^="color:green"] {
color: #5bb55b !important;
}
[style^="color: red"], [style^="color:red"] {
color: #ff3434 !important;
}
[style^="color: blue"], [style^="color:blue"] {
color: #1f81ff !important;
}
/**/
[style^="background-color: yellow"], [style^="background-color:yellow"] {
color: #000;
}
/* الوان شريط الانتقال بالاسفل */
.titlebg2 {
background-image: none;
border: none;
background-color: #2d313a;
color: #d6d6d6;
}
/* ايقونات الرد و التعديل و الحذف */
img.reply_button {
/* content: url(https://i.ibb.co/d6zXLq1/brown-quote.png); */
content: url(https://talkimg.com/images/2023/11/15/zhJOD.png);
}
img.modify_button {
/* content: url(https://i.ibb.co/dLtnpKp/brown-edit.png); */
content: url(https://talkimg.com/images/2023/11/15/zhjCf.png);
}
img.remove_button {
/* content: url(https://i.ibb.co/vPDfyG9/brown-delete.png); */
content: url(https://talkimg.com/images/2023/11/15/zhrYZ.png);
}
/* ايقونة الاقتباس */
.quoteheader:before {
content: url(https://i.ibb.co/QpYLk0v/qiconw.png) !important;
opacity: 0.22;
}
/* لون الكود */
.code {
background-color: #2f323c;
border-color: #444850;
}
/*تحت التجربة*/
.windowbg2 {
background-color: #262931;
}
.bordercolor {
background-color: #363940;
}
body {
background-color: #191c23;
color: #fff
}
.windowbg3 {
background-color: #22242b;
}
/*---------------------------------
تغير خلفية القائمة العلوية مؤقتاً !!!
الافضل تخصيص الالوان اكثر حتى يكون اكثر تناسق هذا موقت
---------------------------------*/
/* delete this code If images are not displayed in the top menu*/
.maintab_back {
background-image: url('https://i.ibb.co/v1vrm0d/maintab-back.gif')
}
.maintab_first {
background-image: url('https://i.ibb.co/DKK4rrX/maintab-first.gif')
}
.maintab_last {
background-image: url('https://i.ibb.co/C9QxkDg/maintab-last.gif')
}
.maintab_active_first {
background-image: url('https://i.ibb.co/Q96FRdx/maintab-active-first.gif')
}
.maintab_active_back {
background-image: url('https://i.ibb.co/5Tk3s5j/maintab-active-back.gif')
}
.maintab_active_last {
background-image: url('https://i.ibb.co/drDZN4d/maintab-active-last.gif')
}
/* end top menu background image! code*/
/*------------------------------
شريط التمرير الجانبي
------------------------------*/
::-webkit-scrollbar {
width: 10px;
height: 8px;
}
::-webkit-scrollbar-track-piece {
background-color: #23262f; /*Global Track Peice(the slider noob.)*/
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #373b44; /* Up/Down slider background*/
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #373b44; /* Side/Side slider background*/
-webkit-border-radius: 3px;
}
/* الشريط بالكود */
/* الحجم */
.code::-webkit-scrollbar {
width: 7px;
height: 7px;
}
/*مقبض التمرير*/
.code::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #13161c; /* Up/Down slider background*/
-webkit-border-radius: 6px;
}
/*خلفية شريط التمرير*/
.code::-webkit-scrollbar-track-piece {
background-color: #23262f; /*Global Track Peice(the slider noob.)*/
-webkit-border-radius: 6px;
}
/* نهاية الشريط بالكود */
.windowbg b a {
color: white
}
/* ------ نهاية شريط التمرير الجانبي ------- */
Apologies for the non-english comments... they're not mine, that was the original script author