☰

Dark Mode for DeepSeek [Customizable]

Apply dark mode to the DeepSeek website

/* ==UserStyle==
@name           Dark Mode for DeepSeek [Customizable]
@namespace      typpi.online
@version        1.0.3
@description    Apply dark mode to the DeepSeek website
@author         Nick2bad4u
@license        UnLicense
@homepageURL    https://github.com/Nick2bad4u/UserStyles
@supportURL     https://github.com/Nick2bad4u/UserStyles/issues

@var color white "White" #ffffff
@var color black "Black" #000000
@var color red "Red" #f35a5a
@var color light-white "Light White" #f8faff
@var color light-gray "Light Gray" #d4d4d4
@var color light-gray2 "Light Gray 2" #404040
@var color light-gray3 "Light Gray 3" #353535
@var color dark-gray "Dark Gray" #131313

@var color transparent "Transparent" #212327

==/UserStyle== */
@-moz-document domain("chat.deepseek.com") {
	:root {
		--white: var(white);
		--black: var(black);
		--red: var(red);
		--light-white: var(light-white);
		--light-gray: var(light-gray);
		--light-gray2: var(light-gray2);
		--light-gray3: var(light-gray3);
		--dark-gray: var(dark-gray);
		--transparent: var(transparent);
		--chatwidth: var(chatwidth);
	}

	.dad65929,
	.aaff8b8f,
	.a2f8e4bb,
	.aaff8b8f.eb830e32 {
		max-width: 100%;
	}

	body {
		--dsr-main: var(--white);
		--dsr-main-2: #ffffff66;
		--dsr-main-3: #ffffff33;
	}

	body[data-ds-dark-theme] {
		--ds-rgb-red-500: #ef4444;
		--ds-rgb-red-550: #e53535;
		--dsr-delete-button-bg: rgb(
			var(--ds-rgb-red-500) / 85%
		);
		--dsr-delete-button-bg-hover: rgb(
			var(--ds-rgb-red-550) / 45%
		);

		--ds-rgb-neutral-300: var(--light-gray);
		--ds-rgb-neutral-700: var(--light-gray2);
		--dsr-bg: var(--black);
		--dsr-text-0: var(--black);
		--dsr-text-1: var(--white);
		--dsr-text-2: var(--white);
		--dsr-text-3: rgb(var(--ds-rgb-neutral-300));
		--dsr-text-4: var(--white);
		--dsr-border-1: var(--black);
		--dsr-border-2: var(--black);
		--dsr-input-border: var(--black);
		--dsr-input-bg: var(--black);
		--dsr-button-main-bg: var(--black);
		--dsr-button-main-bg-hover: var(--black);
		--dsr-button-second-bg: #00000066;
		--dsr-button-grey-0: var(--black);
		--dsr-button-grey-1: var(--black);
		--dsr-button-grey-2: var(--black);
		--dsr-tooltip-fg: var(--black);
		--dsr-tooltip-bg: var(--black);
		--dsr-side-bg: var(--transparent);
		--dsr-side-hover-bg-rgb: 51, 51, 51;
		--dsr-side-hover-bg: var(--black);
		--dsr-icon-fg-1: var(--black);
		--dsr-icon-hover-0: var(--black);
		--dsr-icon-hover-1: rgb(var(--ds-rgb-neutral-700));
		--dsr-side-icon-hover: var(--black);
		/* --dsr-error-fg: var(--black); */
		--dsr-error-fg: var(--red);
	}

	.cdfc1683 {
		background-color: var(--black);
		color: var(--white);
	}

	.b8812f16 {
		background-color: var(--black);
	}

	[data-ds-dark-theme] .a8ac7a80 {
		--local-button: var(--black);
		--local-button-hover: var(--black);
		--local-button-text: var(--white);
	}

	.f9edaa3c {
		background-color: var(--black);
	}

	[data-ds-dark-theme] .be88ba8a {
		display: none;
	}

	[data-ds-dark-theme] .fbb737a4 {
		background-color: var(--black);
	}

	[data-ds-dark-theme] .e214291b {
		color: var(--light-white);
		background-color: var(--black);
	}

	.ds-textarea.ds-textarea--focused {
		background-color: var(--black);
	}

	.dc04ec1d.a02af2e6 .a7f3a288 {
		background-color: var(--black);
	}

	.md-code-block {
		background: var(--black);
	}

	.f9edaa3c .f8773756 {
		background: linear-gradient(
			90deg,
			#21232700 0%,
			#2807451f 50%,
			var(--transparent) 100%
		);
	}

	/* Scrollbar styling */
	::-webkit-scrollbar {
		width: 12px;
	}

	::-webkit-scrollbar-track {
		background: var(--black);
	}

	::-webkit-scrollbar-thumb {
		background: var(--dark-gray);
		border-radius: 3px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--white0);
	}
}