Dark Mode

Hi – just checked your page, looks like you’ve fixed it yourself?

Yes, but I’m not sure if I made the correct changes in dark.css. Can you tell me if everything is correct?

These are the changes made:

body { background: #111; }
.main { background: #222!important; }

.entry dt,
.entry,
.main,
.header,
.main-menu,
.main-inner,
.post-tags,
.content,
.pre,
.post-date,
.pad,
.group,
span,
.grid,
.one-half,
.site-title a,
.site-title a:hover, profile-name,

h1, h2, h3, h4, h5, h6,
.page-title h1,
.page-title h2,
.page-title h4,
.alx-tab .tab-item-title a,
.alx-tab .tab-item-comment a,
.alx-posts .post-item-title a,
.alx-tabs-nav li a:hover,
.author-bio .bio-name,
.post-nav li a span, footer-bottom .social-links a:hover, footer-bottom a:hover,

.widget a:hover,
.widget > h3 a,
.widget > h3 a:hover,
.commentlist .fn,
.pinglist .ping-link { color: #f4f4f4 !important; }

body,
strong,
span,
.entry blockquote,
.author-bio .bio-desc,
.wp-pagenavi a:hover,
.wp-pagenavi a:active,
.wp-pagenavi span.current, footer-bottom #back-to-top:hover, footer-bottom .social-links a,

.one-half, copyright, credit,

.grid, footer-bottom a, flexslider-featured .flex-direction-nav a:before,

.widget_rss ul li span.rss-date,
.themeform label { color: #f4f4f4 !important; }

a:hover, profile-description,

.site-description,
.page-title span,
.post-list .entry,
.post-title a, footer-bottom #back-to-top, footer-bottom #copyright, footer-bottom #credit,

.notebox,
.widget,
.widget a,
.commentlist .comment-body p { color: #f4f4f4 !important; }

.single .post-title {color:#198cff !important;}

.post-date,
.alx-tab .tab-item-date,
.alx-tab .tab-item-name,
.alx-posts .post-item-date,
.post-category,
.post-tags,
.post-nav li a strong,
.wp-pagenavi a,
.wp-pagenavi span,
.widget > ul li:before,
.widget > ul li a:before,
.widget > div > ul li a:before,
.widget_calendar caption:before,
.widget_archive ul li,
.widget_categories ul li,
.widget_links ul li,
.widget_recent_comments ul li,
.widget_recent_entries ul li,
.format-circle .fa:before,
.commentlist .comment-meta a,
.pinglist .ping-meta,
.commentlist .comment-meta:before,
.pinglist .ping-meta:before { color: #f4f4f4; }
.post-grid .post-row { color: #f4f4f4; } flexslider-featured { border-color: #198cff; } flexslider-featured .flex-control-nav li a { background: #555; } flexslider-featured .flex-direction-nav a { background: #181818; }

.alx-tabs-nav li a { border-bottom-color: #198cff; } footer-bottom #back-to-top { background: #222; } profile-curve, footer:before { background-image: url(img/dark/curve-color-dark.png); }

.main-inner:before {
background: -webkit-linear-gradient(top, rgba(26,26,26,1) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(26,26,26,1) 0%,rgba(0,0,0,0) 100%); }

.page-title,
.pad-top,
.sidebar .widget { border-color: #198cff; }

.col-2cl .main-inner { background-image: url(img/dark/sidebar/s-right.png); }
.col-2cr .main-inner { background-image: url(img/dark/sidebar/s-left.png); }

.comment-tabs,
.comment-tabs li a { border-bottom-color: #198cff; }
.comment-tabs li a:hover { color: #f4f4f4; border-bottom-color: #198cff; }
.comment-tabs li span { background-color: #1a1a1a; } footer-widgets { border-color: #198cff;} footer,

.author-bio,
.sharrre .count,
.format-circle, commentform,

.entry code,
.post-tags a,
.entry .wp-caption { background: #1a1a1a; color: #f4f4f4; }

.entry ins,
hr { background: #333; }

.search-expand .themeform input { background: #1a1a1a; border-color: #198cff; }
.search-expand .themeform input:focus { border-color: #198cff; color: #f4f4f4; }

.alx-tab .tab-item-category a:hover,
.alx-posts .post-item-category a:hover { color: #f4f4f4!important; }

.related-posts,
.sidebar .post-nav li.previous a,
.sidebar .post-nav li.next a { border-color: #198cff; }

.content .post-nav { border-top: 1px solid #198cff; border-bottom: 1px solid #198cff; }
.content .post-nav li.next { -webkit-box-shadow: -1px 0 0 #198cff, inset 1px 0 0 #198cff; box-shadow: -1px 0 0 #198cff, inset 1px 0 0 #198cff; }
.content .post-nav li.previous { float: left; -webkit-box-shadow: 1px 0 0 #198cff, inset -1px 0 0 #198cff; box-shadow: 1px 0 0 #198cff, inset -1px 0 0 #198cff; }

.sharrre .count:after { border-left-color: #198cff; }
.sharrre#twitter .box:hover { background: #222f35; }
.sharrre#facebook .box:hover { background: #25282e; }
.sharrre#pinterest .box:hover { background: #332223; }
.sharrre#linkedin .box:hover { background: #1f2b31; }

.themeform input[type="text"],
.themeform input[type="password"],
.themeform input[type="email"],
.themeform input[type="url"],
.themeform input[type="tel"],
.themeform input[type="number"],
.themeform select,
.themeform textarea { background: #1a1a1a; border: 2px solid #198cff; color: #f4f4f4; }
.themeform input[type="text"]:focus,
.themeform input[type="password"]:focus,
.themeform input[type="email"]:focus,
.themeform input[type="url"]:focus,
.themeform input[type="tel"]:focus,
.themeform input[type="number"]:focus,
.themeform select:focus,
.themeform textarea:focus { border-color: #198cff; color: #f4f4f4; }

.entry pre { background-image: url(img/dark/pre.png); border: 1px solid #198cff; }

.entry table tr.alt { background: #2d2d2d; }
.entry table td { border-bottom: 1px solid #198cff; }
.entry table th { border-top: 1px solid #198cff; border-bottom: 1px solid #198cff; }

.wp-pagenavi a { border-bottom: 3px solid #198cff; border-top: 1px solid #198cff; }
.wp-pagenavi a:hover,
.wp-pagenavi a:active,
.wp-pagenavi span.current { border-top: 1px solid #198cff; }

.widget_calendar a:hover { color: #f4f4f4!important; }
.widget_calendar caption { color: #f4f4f4; }
.widget_calendar thead { background: #2d2d2d; -webkit-box-shadow: none; box-shadow: none; }
.widget_calendar th,
.widget_calendar td { border: 1px solid #198cff; }

@media only screen and (min-width: 480px) and (max-width: 960px) {
.s1 { border-top: 1px solid #198cff; }
}
@media only screen and (max-width: 719px) {
.content .post-nav li.previous { border-top: 1px solid #198cff; }
}
@media only screen and (max-width: 479px) {
.post-grid .post,
.post-grid .page,
.blog .post-list,
.single .post-list,
.archive .post-list,
.search .post-list { border-bottom: 1px solid #198cff; }
}

.child-menu a { color: #f4f4f4; }
.child-menu > li > a { border: 1px solid #198cff; }
.child-menu > li > ul { border-top: 1px solid #198cff; border-bottom: 1px solid #198cff; }
.child-menu > li > ul > li > a { border-bottom: 1px solid #198cff; border-left: 1px solid #198cff; border-right: 1px solid #198cff; }
.child-menu > li ul ul { border-left: 10px solid #198cff; border-right: 1px solid #198cff; border-bottom: 1px solid #198cff; }
.child-menu > li ul ul a:hover,
.child-menu > li ul ul li.current_page_item > a { background: #2d2d2d; } btn-mode { color: #f4f4f4; }

/* menu header styling */ header .nav-menu:not(.mobile) { background: #222; border-bottom: 1px solid #198cff; } header .nav-menu:not(.mobile) { border-top-color: #198cff; } header .nav-menu:not(.mobile) li.current_page_item > span > a, header .nav-menu:not(.mobile) li.current-menu-item > span > a, header .nav-menu:not(.mobile) li.current-menu-ancestor > span > a, header .nav-menu:not(.mobile) li.current-post-parent > span > a { color: #f4f4f4; } header .nav-menu:not(.mobile) ul ul li.current_page_item > span > a, header .nav-menu:not(.mobile) ul ul li.current-menu-item > span > a, header .nav-menu:not(.mobile) ul ul li.current-menu-ancestor > span > a, header .nav-menu:not(.mobile) ul ul li.current-post-parent > span > a { color: #f4f4f4; } header .nav-menu:not(.mobile) button.active { background: rgba(255,255,255,0.1); color: #f4f4f4; } header .nav-menu:not(.mobile) button .svg-icon { fill: rgba(255,255,255,0.3); } header .nav-menu:not(.mobile) a { color: #f4f4f4; } header .nav-menu:not(.mobile) a:hover { color: #f4f4f4; } header .nav-menu:not(.mobile) ul ul > li:hover > span { background: transparent; } header .nav-menu:not(.mobile) .menu ul { background: #222; box-shadow: 0 2px 2px #f4f4f4; color: #f4f4f4; } header .nav-menu:not(.mobile) .menu ul:after { border-bottom-color: #198cff; } header .nav-menu:not(.mobile) .menu ul ul:after { border-bottom-color: #198cff; } header .nav-menu:not(.mobile) .menu ul ul:after { border-right-color: #198cff; } header .nav-menu-dropdown-left .nav-menu:not(.mobile) .menu ul ul:after { border-left-color: #198cff; } header .nav-menu:not(.mobile) .menu ul a { font-size: 13px; color: #f4f4f4; } header .nav-menu:not(.mobile) .menu ul span { border-bottom: 1px solid #198cff; } header .nav-menu:not(.mobile) .menu ul li:last-child a { border-bottom: 0; } header .nav-menu:not(.mobile) ul ul a { transition: all 0.3s ease; } header .nav-menu:not(.mobile) ul ul a:hover { background: transparent; color: #fff; } header .nav-menu:not(.mobile) ul ul button.active { background: rgba(255,255,255,0.1); color: #f4f4f4; } header .menu-toggle-icon span { background: #fff; } header .nav-menu.mobile { background: transparent; border-top: none; position: relative; z-index: 3; border-top: 1px solid #198cff; border-bottom: 1px solid #198cff; } header .nav-menu.mobile .svg-icon { fill: #fff; } header .nav-menu.mobile button.active .svg-icon { fill: #fff; } header .nav-menu.mobile ul ul { background: #f4f4f4; } header .nav-menu.mobile ul li .menu-item-wrapper, header .nav-menu.mobile ul ul li .menu-item-wrapper { border-bottom: 1px solid #198cff; } header .nav-menu.mobile ul li a { color: #f4f4f4; } header .nav-menu.mobile ul button, header .nav-menu.mobile ul ul button { border-left: 1px solid #198cff; } header .nav-menu.mobile > div > ul { border-top: 1px solid #198cff; }

/* menu footer styling */ footer .menu-toggle-icon span { background: #fff; } footer .nav-menu:not(.mobile) { background: transparent; border-bottom: 1px solid #198cff; } footer .nav-menu:not(.mobile) a { color: #f4f4f4; } footer .nav-menu:not(.mobile) a:hover { color: #f4f4f4; } footer .nav-menu:not(.mobile) .menu ul { background: #222; box-shadow: 0 4px 10px rgba(0,0,0,0.06); } footer .nav-menu:not(.mobile) .menu ul span { border-bottom: 1px solid #198cff; } footer .nav-menu:not(.mobile) .menu ul:after { border-bottom-color: #198cff; border-top-color: #198cff; } footer .nav-menu:not(.mobile) .menu ul ul:after { border-right-color: #198cff; border-top-color: #198cff; } footer .nav-menu:not(.mobile) li.current_page_item > span > a, footer .nav-menu:not(.mobile) li.current-menu-item > span > a, footer .nav-menu:not(.mobile) li.current-menu-ancestor > span > a, footer .nav-menu:not(.mobile) li.current-post-parent > span > a { color: #f4f4f4; } footer .nav-menu:not(.mobile) button .svg-icon { fill: rgba(255,255,255,0.3); } footer .nav-menu:not(.mobile) button.active { background: rgba(255,255,255,0.1); } footer .nav-menu:not(.mobile) ul ul > li:hover > span { background: none; } footer .nav-menu.mobile { border-bottom: 1px solid #198cff; } footer .nav-menu.mobile .svg-icon { fill: #fff; } footer .nav-menu.mobile button.active .svg-icon { fill: #fff; } footer .nav-menu.mobile ul ul { background: rgba(255,255,255,0.03); } footer .nav-menu.mobile ul li .menu-item-wrapper, footer .nav-menu.mobile ul ul li .menu-item-wrapper { border-bottom: 1px solid #198cff; } footer .nav-menu.mobile ul li a { color: #f4f4f4; } footer .nav-menu.mobile ul button, footer .nav-menu.mobile ul ul button { border-left: 1px solid #198cff; } footer .nav-menu.mobile > div > ul { border-top: 1px solid #198cff; }