Dribbble Dark Mode

dribbble.less

@media (prefers-color-scheme: dark) {
body {
	background: #101010;
}

.psst {
	display: none;
	overflow: hidden;
	margin: -1;
}

/* HEADER */
.nav-v2 {
	.nav-v2__wrapper {
		background: #333;
		
		.nav-v2-main__item {
			color: rgba(255, 255, 255, 0.9);
		}
	}
}

.nav-v2-logo svg path {
	fill: #fff;
}

.nav-v2-search .nav-v2-search__input, .filter-subnav, #wrap-inner {
	background: #222;
	color: #fff;
	
	&:hover, &:active {
		background: #252525;
	}
}

.nav-v2-profile__wrapper {
	border-color: rgba(255, 255, 255, 0.18);
}

.filter-categories .category.active a, .filter-categories .category {
	a {
		color: rgba(255, 255, 255, 0.6);
	}
	
	&.active a {
		color: #fff;
	}
}

/* CONTENT */
.form-btn, a.form-btn, .btn-icon.tertiary {
	background: #333;
	color: #acaca5;
	
	&.outlined {
		border: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: none;
	}
	
	svg path {
		fill: #909090;
	}
	
	.label {
		color: #fff;
	}
}

.btn-icon.tertiary {
	border: none;
	box-shadow: none;
	
	svg path {
		fill: #898989;
	}
}

.shot-display-template .shot-details-container .user-information .display-name, .shot-thumbnail-container .shot-details-container .user-information .display-name {
	color: #fff;
}

.color-deep-blue-sea-light-20 {
	color: rgba(255, 255, 255, 0.7);
}

.shot-content, .nav-v2-profile__wrapper {
	background: #101010;
}

.shots-grid {
	background: #181818;
}

.shot-header-title, .shot-user-link {
	color: #fff;
}

.content-block-container {
	color: rgba(255, 255, 255, 0.9);
}

.shot-container .rebound-of-container {
	background: #202020;
	border: rgba(255,255,255,0.18);
	
	.color-deep-blue-sea-light-60 {
		color: rgba(255, 255, 255, 0.6) !important;
	}
	
	.rebound-details-container .shot-title a {
		color: #fff;
	}
}

.user-avatar-line {
	opacity: 0.12;
}

.user-details-section .user-name {
	color: #fff;
}

/* FOOTER */
#footer {
	background: #040404;
	color: rgba(255, 255, 255, 0.8);

	.footer-main-content {
		border-bottom-color: rgba(255, 255, 255, 0.18);
	}

	.shots-count {
		color: #fff;
	}

	.link {
		color: rgba(255, 255, 255, 0.8);
	}
}
}