Skip to content

visualstudio.com - Dark Mode by Nick2bad4u

Imported and mirrored from https://github.com/Nick2bad4u/UserStyles/raw/refs/heads/main/VisualStudioCode-DarkMode.user.css

Screenshot of visualstudio.com - Dark Mode

Details

AuthorNick2bad4u

LicenseUnLicense

Categoryvisualstudio

Created

Updated

Size106 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark mode theme for Visual Studio

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           visualstudio.com - Dark Mode
@namespace      typpi.online
@version        1.0.3
@description    Dark mode theme for Visual Studio
@author         Nick2bad4u
@license        UnLicense
@homepageURL    https://github.com/Nick2bad4u/UserStyles
==/UserStyle== */
@-moz-document domain("visualstudio.com") {
	/* Invert colors except images and videos */
	:is(
		html:not([stylus-iframe]),
		img,
		svg,
		video,
		.upperBand,
		.upperBandContent,
		.breadcrumb
	) {
		filter: invert(1) hue-rotate(180deg) !important;
	}

	.uxservices-header,
	.right {
		background-color: #fff;
	}

	.ux-section-banner,
	.item-details-control-root .ux-item-shortdesc,
	.verified-domain-url-ssr,
	.ux-item-publisher-link,
	.ux-item-name,
	.ux-item-second-row-wrapper,
	.installHelpInfo > a {
		background-color: #fff !important;
		color: #000 !important;
	}

	.uxservices-header > div > a {
		filter: invert(1) hue-rotate(180deg) !important;
	}

	.marketplacetext-header {
		filter: invert(1) hue-rotate(180deg) !important;
	}

	.item-details-control-root
		.ux-section-details
		.itemdetails-section-header {
		padding-bottom: 16px;
		color: #555;
		font-weight: bold;
		font-size: 16px;
	}

	.item-details-control-root
		.ux-section-details
		.itemdetails-section-header.right {
		margin: 0;
		padding: 0 0 5px 0;
	}

	.item-details-control-root
		.ux-section-details
		.ux-section-details-table {
		width: 100%;
		table-layout: fixed;
	}

	.item-details-control-root
		.ux-itemdetails-left {
		vertical-align: top;
		padding-right: 20px;
		font-size: 14px;
	}

	.item-details-control-root
		.ux-itemdetails-right {
		vertical-align: top;
		padding: 0 0 0 20px;
		width: 34.45%;
	}

	@media all and (max-width: 768px) {
		.item-details-control-root
			.ux-itemdetails-left {
			float: left;
			padding-right: 0px;
			width: 100%;
		}

		.item-details-control-root
			.ux-itemdetails-right {
			float: left;
			padding-left: 0px !important;
			width: 100%;
		}
	}

	.item-details-control-root .ux-section-other {
		margin-top: 16px;
	}

	.item-details-control-root .ux-section-h2 > h2 {
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
		color: #5c2d91;
	}

	.download-dropbutton-container {
		display: inline-block;
		position: relative;
	}

	.download-dropbutton-arrow {
		display: inline-block;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		margin: 0px 0px 2px 5px;
		border: solid white;
		border-width: 0 2px 2px 0;
		padding: 3px;
	}

	.download-dropdown-content {
		display: none;
		position: absolute;
		z-index: 1;
		margin: 5px 0px 0px 16px;
		box-shadow: 0px 8px 16px 0px
			rgba(0, 0, 0, 0.2);
		padding: 0;
		min-width: 202px;
		text-align: left;
	}

	.download-dropdown-content li {
		display: block;
		cursor: pointer;
		background-color: #fafafa;
		padding: 12px 16px;
		color: black;
		text-decoration: none;
	}

	.download-dropdown-content li:hover {
		background-color: #f1f1f1;
	}

	.download-dropbutton-container:hover
		.download-dropdown-content {
		display: block;
	}

	.itemDetails .markdown {
		position: relative;
		color: #222;
		line-height: 1.6;
	}

	.itemDetails .markdown blockquote {
		color: #222 !important;
	}

	.itemDetails .markdown > *:first-child {
		margin-top: 0 !important;
	}

	.item-details-control-root .markdown {
		position: relative;
		color: #222;
		line-height: 1.6;
	}

	.item-details-control-root
		.markdown
		> *:first-child {
		margin-top: 0 !important;
	}

	.ux-section-details-tabs {
		margin-top: -20px;
	}

	.ux-section-details-tabs
		.ms-Pivot
		button:first-child {
		margin-left: -8px;
	}

	.ux-section-details-tabs .ms-Pivot {
		margin-bottom: 25px;
		border-bottom: 1px solid;
		border-bottom-color: rgba(200, 200, 200, 1);
		border-bottom-color: rgba(
			var(--palette-neutral-20, 200, 200, 200),
			1
		);
	}

	.ux-section-details-tabs .ms-Pivot-text {
		font-weight: 400;
		font-size: 16px;
	}

	.ux-section-details-tabs .ms-Pivot button:focus,
	.ux-section-details-tabs
		.ms-Pivot
		button:hover {
		color: #106ebe;
	}

	.meta-data-list-container
		.ux-section-meta-data-list
		.meta-data-list {
		margin-top: 3px;
	}

	.meta-data-list-container
		a.meta-data-list-link:hover,
	.meta-data-list-container
		a.meta-data-list-link:focus {
		cursor: pointer;
		border: 1px solid #0078d4;
		background-color: #0078d4;
		color: white;
	}

	.meta-data-list-container
		.ux-section-meta-data-list
		> div:nth-last-child(1) {
		padding-bottom: 16px;
	}

	.meta-data-list-container
		.ux-section-meta-data-list
		a,
	.meta-data-list-container
		.ux-section-meta-data-list
		span {
		display: inline-block;
		margin: 0 6px 4px 0;
		border: 1px solid #ddd;
		border-radius: 3px;
		padding: 4px 6px;
		color: #333;
		font-size: 13px;
	}

	.meta-data-list-container
		.ux-section-meta-data-list
		a:hover {
		text-decoration: none;
	}

	.meta-data-list-container
		.ux-section-meta-data-list
		a.tag {
		cursor: default;
		background-color: #eff1f3;
	}

	.meta-data-list-container .ux-section-header {
		padding-bottom: 16px;
		color: #555;
		font-weight: bold;
		font-size: 16px;
	}

	.meta-data-list-container
		.ux-section-header.right {
		margin: 0;
		padding: 0 0 5px 0;
	}

	.item-details-control-root .ux-table-metadata {
		margin-top: 0px;
		border-collapse: collapse;
		padding: 0;
		color: #666;
		font-size: 12px;
	}

	.item-details-control-root
		.ux-table-metadata
		td {
		padding: 4px 18px 4px 0;
	}

	.badges-container {
		margin-top: 14px;
	}

	.badges-container ul li {
		margin-left: 5px;
	}

	.item-details-control-root
		.ux-section-project-details {
		margin-top: 16px;
	}

	.item-details-control-root
		.ux-section-project-details
		.itemdetails-section-header.right {
		margin-bottom: 8px;
		padding: 0;
	}

	.item-details-control-root
		.ux-section-project-details-spinner
		.spinner-control-root {
		margin-top: 22px;
		width: 25px;
		height: 25px;
	}

	.item-details-control-root
		.ux-section-project-details
		ul {
		margin: 0 0 0 -3px;
		padding: 0;
		list-style-type: none;
	}

	.item-details-control-root
		.ux-section-project-details
		ul
		li {
		margin-bottom: 4px;
	}

	.item-details-control-root
		.ux-section-project-details
		ul
		li
		.api-github-response.bowtie-icon {
		color: rgba(0, 0, 0, 1);
		color: rgba(
			var(--palette-neutral-100, 0, 0, 0),
			1
		);
	}

	.item-details-control-root
		.ux-section-project-details
		ul
		li
		.api-github-response.bowtie-icon.bowtie-brand-github {
		margin-top: 2px;
		margin-right: 1px;
		margin-left: 4px;
	}

	.item-details-control-root
		.ux-section-project-details
		span {
		vertical-align: top;
		margin-left: 5px;
		text-align: center;
	}

	.item-details-control-root
		.item-share-container {
		display: inline-block;
		vertical-align: -4px;
		margin: 20px -2px;
	}

	.item-details-control-root
		.item-share-container
		a:hover {
		text-decoration: none;
	}

	.item-details-control-root
		.ux-social-icons
		span {
		margin: 10px 0;
	}

	.item-details-control-root .social-link {
		display: inline-block;
		margin: 0 2px;
		width: 23px;
		height: 23px;
	}

	.item-share-container a:focus {
		outline: none;
	}

	.item-share-container a:focus .social-link {
		outline: 1px dotted #666;
	}

	.item-details-control-root
		.ux-table-metadata
		.info-list-callout
		td {
		padding: 0 5px 0 0;
	}

	.item-details-control-root
		.ux-table-metadata
		.info-list-callout
		.info-icon {
		margin-top: 1px;
		width: 15px;
		height: 15px;
	}

	.item-details-control-root
		.ux-table-metadata
		.info-list-callout
		.info-icon
		.ms-Button-icon {
		font-size: 12px;
	}

	.row-callout .callout-container {
		margin: 10px;
		max-width: 200px;
		font-size: 12px;
	}

	.report-abuse-callout .ms-Callout-beak {
		background-color: rgba(43, 136, 216, 1);
		background-color: rgba(
			var(
				--palette-primary-tint-10,
				43,
				136,
				216
			),
			1
		);
	}

	.report-abuse-callout .callout-container {
		background-color: rgba(43, 136, 216, 1);
		background-color: rgba(
			var(
				--palette-primary-tint-10,
				43,
				136,
				216
			),
			1
		);
		padding: 20px;
		color: white;
	}

	.report-abuse-callout
		.callout-container
		.report-abuse-callout-header {
		padding-bottom: 15px;
		font-weight: 200;
		font-size: 20px;
	}

	.report-abuse-callout
		.callout-container
		.report-abuse-callout-header
		.report-abuse-heading {
		display: inline-block;
		padding-left: 10px;
	}

	.calculator-container .currency-dropdown {
		width: 200px;
	}

	.calculator-container
		.currency-container
		.currency-header {
		margin-bottom: 10px;
	}

	.calculator-container .calculator-header {
		margin-top: 0px;
		margin-bottom: 10px;
	}

	.calculator-container .quantity-price {
		display: flex;
		margin-top: 20px;
	}

	.calculator-container
		.quantity-price
		.quantity-header {
		margin-bottom: 10px;
	}

	.calculator-container
		.quantity-price
		.quantity-dropdown {
		width: 90px;
	}

	.calculator-container
		.quantity-price
		.price-section {
		margin-left: 60px;
	}

	.calculator-container
		.quantity-price
		.price-section
		.price-header {
		margin-bottom: 10px;
	}

	.ms-Dialog.gallery-dialog.oneclick-install-popup
		.ms-Dialog-main {
		width: 425px;
		max-width: 425px;
	}

	.ms-Dialog.gallery-dialog.oneclick-install-popup
		.ms-Dialog-main
		.ms-Dialog--lgHeader
		.ms-Dialog-title {
		font-size: 21px;
	}

	.ms-Dialog.gallery-dialog.oneclick-install-popup
		.ms-Dialog-main
		.ms-Dialog-inner
		.ms-Dialog-content {
		margin-top: 15px;
	}

	.ms-Dialog.gallery-dialog.oneclick-install-popup
		.ms-Dialog-main
		.ms-Dialog-inner
		.ms-Dialog-content
		.vscode-download-link {
		margin-left: 5px;
	}

	.ms-Dialog.gallery-dialog.oneclick-install-popup
		.ms-Dialog-main
		.ms-Dialog-inner
		.ms-Dialog-content
		.ms-Checkbox {
		margin-top: 20px;
	}

	.item-details-control-root
		.ux-section-resources
		ul
		li {
		margin-bottom: 4px;
	}

	.item-details-control-root
		.ux-section-resources
		ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.item-details-control-root
		.ux-section-resources
		ul
		.d...

Reviews

No reviews yet.