nhgooi.nl/colormag/SCSS/dark.scss

@import 'variables/colors';

/*--------------------------------------------------------------
Dark CSS
--------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	color: $white;
}
body {
	background-color: $dark-background;
	color: $color_gray_seven;
}

.dark-skin{
	#site-description {
		color: $white;
	}
	#page,
	#header-text-nav-container,
	.news-bar,
	#main,
	#secondary .widget {
		background-color: $dark-page-background;
	}
	.news-bar {
		background-color: $dark-news-background;
	}
	.main-small-navigation {
		li {
			background-color: $color_gray_one;
		}
		a {
			color: $white;
		}
	}
	.date-in-header {
		color: $color_gray_seven;
	}

	.breaking-news-latest {
		color: $white;
	}
	.search-form-top {
		background-color: $dark-footer-socket;
		border: 0 none;
	}

	.widget_featured_posts {
		.single-article {
			background: none;
			box-shadow: 0 0 0 0 transparent;
		}

		.article-content {
			.entry-title {
				a {
					color: $white;
				}
			}

			.below-entry-meta {
				.posted-on,
				.byline,
				.comments {
					.fa {
						color: $light-content;
					}
				}
			}
		}
	}

	.posted-on,
	.byline,
	.comments {
		a {
			color: $light-content;
		}
	}

	.comments {
		span {
			color: $light-content;
		}
	}

	.thumbnail-slider {
		border-color: $dark-page-background;
	}

	#comments {
		border-color: $color_gray_three;
	}

	#content {
		.post {
			.article-content {
				.entry-title a {
					color: $white;
				}

				.below-entry-meta {
					.byline,
					.comments,
					.tag-links,
					.edit-link,
					.posted-on,
					.post-views {
						.fa {
							color: $light-content;
						}
					}

					.post-views {
						span {
							color: $light-content;
						}
					}

					.edit-link {
						a {
							color: $light-content;
						}
					}
				}
			}
		}
	}

	.single-related-posts {
		.article-content {
			.entry-title {
				a {
					color: $white;
				}
			}

			.below-entry-meta {
				.posted-on,
				.comments {
					.fa {
						color: $light-content;
					}
				}
			}
		}
	}

	.post,
	.search {
		.entry-title {
			a {
				color: $white;
			}
		}

	}

	.random_posts_widget_inner_wrap,
	.single-related-posts {
		box-shadow: 0 0 0 0 transparent;
	}

	.footer-widgets-wrapper,
	.footer-socket-wrapper {
		border-top: 0 none;
		background-color:$dark-footer-socket;
	}

	#colophon .tg-upper-footer-widgets .widget {
		border: 0 none;
	}

	input[type="text"],
	input[type="email"],
	input[type="password"],
	textarea,
	.comment-content {
		background-color: $dark-page-background;
		color: $color_gray_seven;
		border-color: $color_gray_five;
	}
	.view-all-link {
		background :$dark-page-background;
	}

	/*--------------------------------------------------------------
	Header Clean layout CSS
	--------------------------------------------------------------*/
	#masthead {
		&.colormag-header-clean {
			.main-navigation {
				.sub-menu,
				.children {
					background-color: $news-background;
				}
			}
			.main-small-navigation {
				li {
					background-color:$news-background;
				}
			}
		}

		&.colormag-header-clean,
		&.colormag-header-classic {
			.breaking-news .newsticker a,
			.social-links i.fa {
				color: $color_gray_seven;
			}
		}

		&.colormag-header-classic {
			.is-sticky {
				#site-navigation {
					background-color: $news-background;
				}

				.main-small-navigation li {
					background-color: $news-background;
				}
			}

			#site-navigation {
				.menu-toggle {
					border-color: $color_gray_seven;
					&::before {
						color:$color_gray_seven;
					}
				}

				&.main-navigation {
					ul {
						ul.sub-menu,
						.children {
							background-color: $news-background;
							border-color: $color_gray_three;

							li {
								border-color: $color_gray_three;
							}
						}
					}
					a,
					.random-post a .fa-random,
					.home-icon .fa {
						color: $white;
					}
				}
				&.main-small-navigation .random-post a .fa-random,
				.fa.search-top {
					color: $white;
				}
			}
		}
	}
	.colormag-footer--classic {
		.footer-widgets-wrapper {
			background-color: $medium-footer-socket;
		}
		.footer-socket-wrapper {
			background-color: $dark-footer-socket;
		}
	}
	.elementor {
		.tg-module-wrapper {
			color: $color_gray_seven;

			.tg-module-title {
				color: $white;
			}
			.tg-module-meta {
				.tg-post-auther-name,
				.tg-post-date,
				.tg-module-comments {
					a,
					span {
						color: $light-content;
					}
				}
			}
		}
	}
}