Skip to content

Kickstarter Dark Theme by blyad

Screenshot of Kickstarter Dark Theme
Homepage Write a review Install Get Stylus

Details

Authorblyad

LicenseCC BY-NC-SA 4.0

Categorykickstarter

Created

Updated

Size26 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Again, none of previous dark themes work, or do only partially. So.. here it is.

Notes

Update 1 | 18.01.22

  • massively corrected font colors to make it more readable
  • added transitions
  • rounded image corners to make it look better
  • replaced Cooper Light font to Poppins due to being ugly
  • added some letter spacing in project names

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Kickstarter Dark Theme
@namespace      github.com/blyad2137/kickstarter-dark-theme
@version        1.0.1
@description    `Just a dark mode for Kickstarter with a few improvements`
@author         blyad (https://github.com/blyad2137)
@license	CC BY-NC-SA 4.0
@homepageURL    https://github.com/blyad2137/kickstarter-dark-theme
@supportURL     https://github.com/blyad2137/kickstarter-dark-theme/issues
==/UserStyle== */

@-moz-document domain("kickstarter.com") {
	
	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
	
	:root {
		--bg-body: #1b1b1b;
		--bg-white: #1b1b1b;
		--bg-pledge: var(--bg-white);
		--bg-support-100: #1e1e1e;
		--bg-celebrate-100: #261d1a;
		--bg-celebrate-100_50: rgba(38, 29, 26, .5);
		--bg-pledge--all-gone: #282828;
		--bg-grey-100: #282827;
		--bg-grey-100_95: rgba(40, 40, 39, .95);
		--bg-grey-200: #242423;
		--bg-grey-300: #222;
		--bg-grey-400: #363636;
		--bg-grey-500: #3d3e3d;
		--bg-paper-300: #2b2a22;
		--bg-create-100: #26332c;
		--bg-gradient-1: #3b4251;
		--bg-gradient-2: #2d2421;
		--bg-grey-light: var(--bg-grey-300);
		--bg-soft-black: var(--soft-black);
		--bg-trust-100: #3b404a;
		--bg-solvvy-main-content: #1d1d1d;
		--bg-frame__header: rgba(38, 29, 26, .2);
		--bg-tfa-off: #1c1b19;
		--bg-handbook-header: #2b2b2b;
		--bg-green-dark: #8696ff;
		--hover-bg-grey-100: #232322;
		--hover-bg-grey-200: #242423;
		--hover-bg-grey-300: #282828;
		--border-grey-400: #3c3e3d;
		--border-grey-500: var(--border-grey-400);
		--border-input-select: var(--border-frame__header);
		--hover-border-dark-grey-400: #6b6e6e;
		--hover-border-grey-400: #383838;
		--border-dark-grey-400: #6b6e6e;
		--border-gray-hover: #e7e7f0;
		--border-gray: #8181d9;
		--border-community-section: #282828;
		--border-primary-title: #1c2227;
		--border-divider: #3b3b3b;
		--border-frame__header: #1c1b19;
		--border-label-fixed: #282828;
		--border: #4C4E4D;
		--border-ksr-select: #332f2b;
		--hover-border-soft-black: #d8d8d8;
		--hover-border-white: #1b1b1b;
		--color-gray: #bdbdea;
		--color-gray-hover: #e7e7f0;
		--color-body: #d8d8d8;
		--color-button: #fff;
		--color-figcaption: #969696;
		--color-com-loc-text: #c1c1dd;
		--color-breadcrumbs_li: #ababab;
		--color-search: #3b3b3b;
		--color-dropdown: #ccc;
		--color-longform: #d0d4ee;
		--color-btn--border-green: #00bfb6;
		--soft-black: #d8d8d8;
		--grey-dark: var(--soft-black);
		--grey-500: #3c3e3d;
		--dark-grey-400: #7e8484;
		--dark-grey-500: #a5a6a6;
		--support-400: #a6a6a6;
		--support-500: #b6b6b6;
		--navy-500: #85858c;
		--navy-600: #a5a6a6;
		--navy-700: var(--soft-black);
		--ksr-green-700: #09cfb1;
		--ksr-green-800: #0697ae;
		--blue-500_90: rgba(43, 167, 255, .9);
		--blue-600: #009dff;
		--cobalt-500: #7e91e4;
		--cobalt-600: #9caae4;
		--green-dark: #dde1fb;
		--link-blue: var(--soft-black);
		--link-blue-hover: #fff;
		--link-trust-500: #8989ff;
		--link-grey-current: #c2cbff;
		--soft-black_50: rgba(216, 216, 216, .50);
		--black: #fff;
		--black_60: rgba(255, 255, 255, .6);
		--white: #1b1b1b;
		--white-200: #ddd;
		--blue: #00a6ff;
		--hover-soft-black: var(--soft-black);
		--shadow-2: rgb(110 110 110 / 17%);
	}

			html[hide-scrollbar="true"] ::-webkit-scrollbar{display:none}
			::-webkit-scrollbar {
				 width: 10px;
				 background-color: #212121;
			}
			::-webkit-scrollbar-thumb {
				 border-radius: 0px;
				 background-color: rgb(5, 206, 120);
				 transition: all .18s ease-in-out;
			}
			::-webkit-scrollbar-thumb:hover {
				 background-color: rgba(5, 206, 120, .5);
			}
			:-webkit-scrollbar-corner {
				 background: #212121;
				 border-color: #212121;
			}

	body {
		color: var(--color-body);
		background-color: var(--bg-body);
	}
	.bg-white {
		background-color: var(--bg-white);
	}
	.border-grey-400, .border-bottom, .border-left, .border {
		border-color: var(--border-grey-400);
	}
	.border-grey-500 {
		border-color: var(--border-grey-500);
	}
	.border-dark-grey-400 {
		border-color: var(--border-dark-grey-400);
	}
	.border-top {
		border-top-color: var(--border-grey-400);
	}
	.soft-black, .NS_projects__project_nav .tabbed-nav__link, .pledge__amount, .pledge__title {
		color: var(--soft-black);
	}
	.fill-soft-black {
		fill: var(--soft-black);
	}
	button {
		color: var(--color-button);
	}
	.NS_projects__project_nav {
		border-color: var(--border-grey-400);
		background-color: var(--bg-white);
	}
	.NS_projects__project_nav .tabbed-nav__link.is-active {
		border-color: var(--soft-black);
	}
	.fill-support-500 {
		fill: var(--support-500);
	}
	.btn--border-gray:hover, .btn--border-gray:focus {
		border-color: var(--border-gray-hover);
		color: var(--color-gray-hover) !important;
	}
	.btn--border-gray {
		border-color: var(--border-gray);
		color: var(--color-gray);
	}
	.grey-dark {
		color: var(--grey-dark) !important;
	}
	.navy-500 {
		color: var(--navy-500);
	}
	.dark-grey-500 {
		color: var(--dark-grey-500);
	}
	.rte__content figcaption {
		color: var(--color-figcaption);
	}
	.pledge-selectable, .pledge-selectable-sidebar, .pledge-display {
		background-color: var(--bg-pledge);
		border-color: var(--border-grey-400);
		color: var(--dark-grey-500);
	}
	.pledge__reward-description, .pledge__reward-description .c-navy-light, .pledge__detail-label {
		color: var(--dark-grey-500);
	}
	.green-dark, .pledge__detail {
		color: var(--green-dark);
	}
	.bg-support-100 {
		background-color: var(--bg-support-100);
	}
	.support-500 {
		color: var(--support-500);
	}
	.bg-celebrate-100 {
		background-color: var(--bg-celebrate-100);
	}
	.pledge__limit--all-gone {
		background-color: var(--bg-pledge--all-gone);
		color: var(--soft-black);
	}
	.link-blue {
		color: var(--link-blue);
	}
	.link-blue:hover {
		color: var(--link-blue-hover);
	}
	.link-soft-black {
		color: var(--soft-black);
		fill: var(--soft-black);
	}
	svg.svg-icon__delta-down.icon-9.pointer-events-none.shrink0.r2.absolute, svg.svg-icon__icon--small-k.icon-large.display-none.inline-block-sm.mr2, [src="https://ksr-ugc.imgix.net/assets/034/113/479/e012c1d9fc70bd0a717d644bc49797bf_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1625518225&auto=format&frame=1&lossless=true&s=409bdff5886e0292621e3e3fa7e4bd53"], [src="https://ksr-ugc.imgix.net/assets/034/113/502/36c42ef033b1645ff15f81463fd58b57_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1625518362&auto=format&frame=1&lossless=true&s=c977ec723921c40b6fadb84b0576ce1e"], [src="https://ksr-ugc.imgix.net/assets/034/365/086/7f99ddc48683da91164fc5fac0cc8076_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1627643130&auto=format&frame=1&lossless=true&s=206e5cf3e2e5e691c8d80ccbbb00cf23"], [src="https://ksr-ugc.imgix.net/assets/034/443/717/90b1283700a1f11b271338c6757f7278_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1628281635&auto=format&frame=1&lossless=true&s=e87de67d6dfe7607b357592ad4d056e8"], [src="https://ksr-ugc.imgix.net/assets/034/546/729/a26c073a76943f7481ad802780869a74_original.png?ixlib=rb-4.0.2&w=700&fit=max&v=1629164161&auto=format&frame=1&lossless=true&s=a7714e289183b60b32376e39a80a878a"], svg.svg-icon__icon--delta-down.icon-small.relative.ml2.js-filter-arrow.inline-block, svg.svg-icon__icon--cross.icon-small.relative.ml2.js-filter-delete.ksr-popover-excluded.inline-block, svg.svg-icon__icon--cross.icon-small.relative.ml2.js-filter-delete, svg.svg-icon__icon--search.icon-large.absolute.t50p.r3.translate-y-50p, svg.svg-icon__icon--delta-down.icon-small.relative.ml2.flex-none.self-center, svg.svg-icon__icon--conversion.icon-large.ml1.pointer, svg.svg-icon__icon--calendar.icon-16.mr1, svg.svg-icon__icon--arrow-right.icon-20.fill-trust-500.ml1, svg.svg-icon__delta-down.icon-10.shrink0, [src="https://ksr-ugc.imgix.net/assets/034/260/183/9b9f35b5283374a73a12ac02e79ae550_original.gif?ixlib=rb-4.0.2&w=680&fit=max&v=1626748472&auto=format&gif-q=50&q=92&s=b14bf3b68e43a1f917888d81a27eea62"], svg.svg-icon__close.icon-9.hover-item-fill-grey-300, svg.svg-icon__icon--delta-down.icon-14.absolute.r2.t0.b0.my-auto, svg.svg-icon__icon--image.icon-large.valign-middle, svg.svg-icon__icon--video.icon-large.valign-middle, svg.svg-icon__icon--chevron-right.icon-small.fill-white.ml1, [src="https://ksr-ugc.imgix.net/assets/036/079/695/2948780f7fcd0aa2cdbf31fa3ae13923_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1642312405&auto=format&gif-q=50&lossless=true&s=e1b314ec0c79e3fd4817c319b0744262"], [src="https://ksr-ugc.imgix.net/assets/036/079/692/e643662577f6c99d4f520d11fee829c6_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1642312341&auto=format&gif-q=50&lossless=true&s=263047cd3f7cf4b45a401da70e41356d"], [src="https://ksr-ugc.imgix.net/assets/036/079/687/7185805a411b1898b07535204ae04ace_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1642312262&auto=format&gif-q=50&lossless=true&s=1ead1ade4e1eff24938eab0aa6943270"], [src="https://ksr-ugc.imgix.net/assets/036/079/661/63da60060494e1322ef4e0d259404aa4_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1642312020&auto=format&gif-q=50&lossless=true&s=51d2e23a6774013d559ce2a78099ed3c"], [src="https://ksr-ugc.imgix.net/assets/036/079/674/b1ef548b55aaa3dad09dad23a9a0380b_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1642312173&auto=format&gif-q=50&lossless=true&s=4cc8e8bfa88ba1da3d2a7781eef1814f"], [src="https://ksr-ugc.imgix.net/assets/036/079/704/115bc93fd76de67756b9d7e227d03dc5_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1642312465&auto=format&gif-q=50&lossless=true&s=a80637c139f6aba55ad98c060a0e77bb"], [src="https://ksr-ugc.imgix.net/assets/036/079/711/8dbb990081db59d763a9e08ec55c54c6_original.png?ixlib=rb-4.0.2&w=680&fit=max&v=1642312589&auto=format&gif-q=50&lossless=true&s=04fb28c4f485184e7e074ac7dc9d9a38"] {
		filter: invert(1);
	}
	input.text:focus, input.input-text:focus, input.password:focus, input[type="text"]:focus, textarea:focus, textarea.in...

Reviews

No reviews yet.