Epochtalk Dark Theme

[omer-jamal]

hi there,

this Simple try edit Epochtalk style (CSS) to Dark Theme

Screenshots


https://i.ibb.co/sW1m0y4/image.png                                                                    https://i.ibb.co/NT032GK/image.png



https://i.ibb.co/j5JMtXc/image.png                                                                    https://i.ibb.co/XJKGh6K/image.png


How to change appearance?

by using extensions in your browser like "Stylus"  Don't use Stylish "Stylish" browser extension steals all your internet history (thanks to TryNinja)

use Stylus extension


here to know how (GUIDE) How to easy change the appearance of Bitcointalk to dark (Dark Theme)? (written by wwzsocki)

you can test https://www.cryptos-currencies.com (First forum using Epochtalk)



Copy this style code to your stylish extension
Dark Theme Style Code

Code:

/* to hide quote from top!
--------------*/
#motd-wrap {display:none}

html, body,footer, .thread-editor-container .editor-form .editor-header,
.editor-form .editor-body .editor-preview,
.editor-form .editor-body .editor-input

{
background-color: #1c1f25;
color: #eee;
}


h1, h2, strong {color: #eee}

hr {
    color: #313133 !important;
    background-color: #313133 !important
}

table.striped {
    border-color: #191b21;
    background: #25282d;

}
table.striped thead {
    background-color: #191b21;
}

table.striped tr:nth-of-type(even), table.striped tbody:nth-of-type(even) {
    background-color: #33363c;
}

.page-header-split div:not(:first-child).moderators .label {
    color: #999;
}

label { color: #ccc }

header #motd-wrap {
    border-bottom-color: #3b3f46
}

.input-text,
.ng-modal-dialog input,

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"],
input[type="tel"], input[type="time"], input[type="url"], input[type="color"], select, textarea,
.input-text,tags-input .tags

{
	background-color: #14161b  !important;
	color: #ccc  !important;
	border-color: #373b44;
}

input[type].ng-untouched, textarea.ng-untouched { border-color: #373b44 !important }

input.toggle-switch+label:before {  background-color: #1c1f25 !important;}


/* disabled inputs!
	change background color to dark!
-------------------------------*/
input[type="text"]:disabled, input[type="text"][disabled], input[type="password"]:disabled, input[type="password"][disabled],
input[type="date"]:disabled, input[type="date"][disabled], input[type="datetime"]:disabled, input[type="datetime"][disabled],
input[type="datetime-local"]:disabled, input[type="datetime-local"][disabled], input[type="month"]:disabled,
input[type="month"][disabled],input[type="week"]:disabled, input[type="week"][disabled], input[type="email"]:disabled,
input[type="email"][disabled],input[type="number"]:disabled, input[type="number"][disabled], input[type="search"]:disabled,
input[type="search"][disabled],input[type="tel"]:disabled, input[type="tel"][disabled], input[type="time"]:disabled,
input[type="time"][disabled],input[type="url"]:disabled, input[type="url"][disabled], input[type="color"]:disabled,
input[type="color"][disabled], select:disabled,select[disabled], textarea:disabled, textarea[disabled],
.input-text:disabled, .input-text[disabled]

{
    background-color: #3e4146 !important;
}



header #menu-wrap #menu ul .search .search-input { background-color: inherit !important }


.editor-form.new-thread .editor-body .editor-input,
.editor-form.new-thread .editor-body .editor-preview
{
    	color: #ccc !important;
    	border-color: #373b44 !important;
        background-color: #1c1f25 !important;
}

.thread-editor-container {
        background-color: #1c1f25 !important;
}

input[type].ng-untouched,
textarea.ng-untouched {
    border-color: #393c42;
}

.input-info {
    background-color: #ccc;
}

body,
footer, 
.thread-controls-wrap,
.page-header-split div:first-child h4,
header #breadcrumbs-wrap #breadcrumbs ul li a,
header #breadcrumbs-wrap #breadcrumbs ul li,
.page-header-split div:first-child,
select
{
    color: #ccc !important;
}

header #breadcrumbs-wrap {
    border-bottom: 1px solid #1c1f27;
}

footer, .thread-controls-wrap,
header #breadcrumbs-wrap,
.board-controls-wrap,
header #motd-wrap {
background-color: #25282f !important;
}

.thin-underline {
 border-bottom: 1px solid #434750;
}

.thread-data .post-block.highlighted {
    background-color: HSL(223, 13%, 17%);
}

.thread-data .post-block.editing {
    background-color: rgba(95, 131, 162, 0.15);
}

.polls {
    color: #dedede;
    border: 1px solid #40444c;
 }

.polls .poll-answer .poll-select {
color: #ececec;
}


.ng-modal-dialog {
background-color: #24272c;
}

/* Style Messages */
.messages .msg-container .message.sender,
.conversations .list .cell.active {
	background-color: #181b21;
}

.messages .msg-container .message {
        border-bottom-color:  #2a2d33;

}

.messages .msg-container .message:first-child {
        border-top-color:  #2a2d33;
}


/*motd.ng-scope { display: none !important; }*/

.thread-data .post-block .post-user .user-avatar img,
.profile-content .profile-left .profile-avatar-container img.loaded{
border-radius: 8px;
-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    
    border-width: 3px !important;
}


.post-content  .post-title .username {
        border-radius: 5px;
}

.post-content .post-body {
    padding-left: 15px !important;
}

.thread-data .post-block:first-child {
    border-top: 1px solid #2d2e31  !important;
}

.thread-data .post-block {
 border-bottom: 1px solid #2d2e31  !important;
}

.thread-data .post-block .post-content .post-title .post-action li a strong {
    color: #65676d !important;
}

/*hide Post Hidden!*/
.thread-data .post-block.deleted {
    display: none !important;
}

/*change link color to blue
.post-block a {color: #476C8E}
.post-block a:hover {color: green; text-decoration: underline;
}*/

.thread-data .post-block .post-content .post-title {
margin-bottom: 8px !important;
}

/* change username font-weight
----------------------------------*/
.thread-data .post-block .post-content .post-title a.username {
    color: #fff !important;
    font-weight: 700 !important;
}


/* change online username icon
----------------------------------*/
.online .fa-circle-o:before {
content: ' ' !important;
}

.online:before {
font-family: FontAwesome;
    content: "\f111";
    display: inline-block;
    font-size: 11px;
}



/* quote style 
-------------------*/

.quoteHeader {
border:0;
margin: 0.4rem 0 0 0;
}

.quote {
border-left: 4px solid #474c56 !important;
margin: 0 0 0.6rem 0.6rem;
padding: 0 0.6rem !important;
}

.quoteHeader a {
color: #464b54 !important;
font-size: 14px !important;
}



/* #post-tools-fixed
---------------------*/
#post-tools-fixed {
    background-color: rgba(28, 31, 37, 0.9);
    border-top-color: #33363e;

}
.editor-form .editor-footer {
    background-color: #1b1e24;
    border-top-color: #33363e;
}
/*--------*/


/* editor
----------------------*/

.editor-top-bar,
.editor-container
{
    background-color: #2b2e35;
}

.editor-container {
    border-color: #32363e;
}

.editor-form .editor-body input[type], .editor-form .editor-body .editor-input, .editor-form .editor-body .editor-preview 
{
    border-top-color: #60646f;
    border-bottom-color: #60646f;
}


.inverted-button {
    border-color: #404550;
}

.editor-top-bar .editor-formatting {
    background-color: #25282f;
}

if you do not like Dark Theme and you want Default theme with Some changes
you can use this style code: https://pastebin.com/awwtxUPf


it's not completed, so you can see some page or inputs not been applied

[TryNinja]

Don't use Stylish...

For reference: "Stylish" browser extension steals all your internet history

Use "Stylus", a Stylish fork but without any tracking or analytics.

[Joel_Jantsen]

I simply hate using browser extensions or user-scripts to modify some behavior on my web-page if it is not an absolute necessity. Current bitcointalk has lot of user-scripts out of which some are useful while some are subjective. If the developers can survey the most widely used user-scripts and embed their functionality by default in the new forum, it will be helpful. For instance, a button that allows you to toggle between day-theme and night-mode.