cssportal.com - Dark Mode by Nick2bad4u

/* ==UserStyle==
@name           cssportal.com - Dark Mode
@namespace      typpi.online
@version        1.0.2
@description    Dark theme for CSS Portal
@author         Nick2bad4u
@license        UnLicense
@homepageURL    https://github.com/Nick2bad4u/UserStyles
==/UserStyle== */
@-moz-document domain("cssportal.com") {
	/* Invert colors except images and videos */
	html,
	img,
	svg,
	video,
	iframe {
		filter: invert(1) hue-rotate(180deg) !important;
	}

	:root [data-topbar='dark'],
	[data-bs-theme='light'] [data-topbar='dark'] {
		--bs-header-bg: #cdc5e5 !important;
		--bs-header-item-color: #f8f9fa;
		--bs-header-item-sub-color: #8795ab;
	}

	:root,
	[data-bs-theme='light'] {
		--bs-blue: #5156be;
		--bs-indigo: #564ab1;
		--bs-purple: #6f42c1;
		--bs-pink: #e83e8c;
		--bs-red: #fd625e;
		--bs-orange: #f1734f;
		--bs-yellow: #ffbf53;
		--bs-green: #2ab57d;
		--bs-teal: #050505;
		--bs-cyan: #4ba6ef;
		--bs-black: #000;
		--bs-white: #fff;
		--bs-gray: #74788d;
		--bs-gray-dark: #2c302e;
		--bs-gray-100: #f8f9fa;
		--bs-gray-200: #e9e9ef;
		--bs-gray-300: #f6f6f6;
		--bs-gray-400: #ced4da;
		--bs-gray-500: #adb5bd;
		--bs-gray-600: #74788d;
		--bs-gray-700: #313533;
		--bs-gray-800: #2c302e;
		--bs-gray-900: #212529;
		--bs-primary: #5156be;
		--bs-secondary: #74788d;
		--bs-success: #2ab57d;
		--bs-info: #4ba6ef;
		--bs-warning: #ffbf53;
		--bs-danger: #fd625e;
		--bs-light: #e9e9ef;
		--bs-dark: #2c302e;
		--bs-primary-rgb: 81, 86, 190;
		--bs-secondary-rgb: 116, 120, 141;
		--bs-success-rgb: 42, 181, 125;
		--bs-info-rgb: 75, 166, 239;
		--bs-warning-rgb: 255, 191, 83;
		--bs-danger-rgb: 253, 98, 94;
		--bs-pink-rgb: 232, 62, 140;
		--bs-light-rgb: 233, 233, 239;
		--bs-dark-rgb: 44, 48, 46;
		--bs-primary-text: #393c85;
		--bs-secondary-text: #313533;
		--bs-success-text: #196d4b;
		--bs-info-text: #2d648f;
		--bs-warning-text: #997332;
		--bs-danger-text: #ca4e4b;
		--bs-light-text: #74788d;
		--bs-dark-text: #2c302e;
		--bs-primary-bg-subtle: #b9bbe5;
		--bs-secondary-bg-subtle: #ced4da;
		--bs-success-bg-subtle: #aae1cb;
		--bs-info-bg-subtle: #b7dbf9;
		--bs-warning-bg-subtle: #ffe5ba;
		--bs-danger-bg-subtle: #fec0bf;
		--bs-light-bg-subtle: #fbfbfb;
		--bs-dark-bg-subtle: #adb5bd;
		--bs-primary-border-subtle: #a8abdf;
		--bs-secondary-border-subtle: #ced4da;
		--bs-success-border-subtle: #7fd3b1;
		--bs-info-border-subtle: #93caf5;
		--bs-warning-border-subtle: #ffd998;
		--bs-danger-border-subtle: #fea19e;
		--bs-light-border-subtle: #f6f6f6;
		--bs-dark-border-subtle: #adb5bd;
		--bs-white-rgb: 255, 255, 255;
		--bs-black-rgb: 0, 0, 0;
		--bs-body-color-rgb: 49, 53, 51;
		--bs-font-sans-serif: 'Poppins', sans-serif;
		--bs-font-monospace: sfmono-regular, menlo,
			monaco, consolas, 'Liberation Mono',
			'Courier New', monospace;
		--bs-gradient: linear-gradient(
			180deg,
			rgb(255 255 255 / 15%),
			rgb(255 255 255 / 0%)
		);
		--bs-body-font-family: var(
			--bs-font-sans-serif
		);
		--bs-body-font-size: 0.875rem;
		--bs-body-font-weight: 400;
		--bs-body-line-height: 1.5;
		--bs-body-color: #313533;
		--bs-emphasis-color: #000;
		--bs-emphasis-color-rgb: 0, 0, 0;
		--bs-secondary-color: #2c302e;
		--bs-secondary-color-rgb: 44, 48, 46;
		--bs-secondary-bg: #fff;
		--bs-secondary-bg-rgb: 255, 255, 255;
		--bs-tertiary-color: #878a99;
		--bs-tertiary-color-rgb: 135, 138, 153;
		--bs-tertiary-bg: #f8f9fa;
		--bs-tertiary-bg-rgb: 248, 249, 250;
		--bs-body-bg: #fff;
		--bs-body-bg-rgb: 255, 255, 255;
		--bs-link-color: #5156be;
		--bs-link-color-rgb: 81, 86, 190;
		--bs-link-decoration: none;
		--bs-link-hover-color: #414598;
		--bs-link-hover-color-rgb: 65, 69, 152;
		--bs-link-hover-decoration: underline;
		--bs-code-color: #e83e8c;
		--bs-border-width: 1px;
		--bs-border-style: solid;
		--bs-border-color: #e9e9ef;
		--bs-border-color-translucent: #ced4da;
		--bs-border-radius: 0.25rem;
		--bs-border-radius-sm: 0.2rem;
		--bs-border-radius-lg: 0.4rem;
		--bs-border-radius-xl: 1rem;
		--bs-border-radius-2xl: 2rem;
		--bs-border-radius-pill: 50rem;
		--bs-box-shadow: rgb(116 120 141 / 10%) 0
			5px 20px -6px;
		--bs-box-shadow-sm: 0 0.125rem 0.25rem
			rgba(var(--bs-body-color-rgb), 0.075);
		--bs-box-shadow-lg: 0 1rem 3rem
			rgba(var(--bs-body-color-rgb), 0.175);
		--bs-box-shadow-inset: inset 0 1px 2px
			rgba(var(--bs-body-color-rgb), 0.075);
		--bs-form-control-bg: var(--bs-body-bg);
		--bs-form-control-disabled-bg: var(
			--bs-secondary-bg
		);
		--bs-highlight-bg: #fcf8e3;
		--bs-breakpoint-xs: 0;
		--bs-breakpoint-sm: 576px;
		--bs-breakpoint-md: 768px;
		--bs-breakpoint-lg: 992px;
		--bs-breakpoint-xl: 1200px;
		--bs-breakpoint-xxl: 1400px;
	}

	.list-group {
		--bs-list-group-color: var(
			--bs-secondary-color
		);
		--bs-list-group-bg: var(--bs-secondary-bg);
		--bs-list-group-border-color: var(
			--bs-border-color
		);
		--bs-list-group-border-width: 1px;
		--bs-list-group-border-radius: 0.25rem;
		--bs-list-group-item-padding-x: 1.25rem;
		--bs-list-group-item-padding-y: 0.75rem;
		--bs-list-group-action-color: var(
			--bs-secondary-color
		);
		--bs-list-group-action-hover-color: var(
			--bs-secondary-color
		);
		--bs-list-group-action-hover-bg: var(
			--bs-tertiary-bg
		);
		--bs-list-group-action-active-color: var(
			--bs-secondary-color
		);
		--bs-list-group-action-active-bg: var(
			--bs-list-group-hover-bg
		);
		--bs-list-group-disabled-color: #74788d;
		--bs-list-group-disabled-bg: var(
			--bs-secondary-bg
		);
		--bs-list-group-active-color: #000;
		--bs-list-group-active-bg: #cdc5e5;
		--bs-list-group-active-border-color: #5156be;
		display: -webkit-box;
		display: flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		margin-bottom: 0;
		border-radius: var(
			--bs-list-group-border-radius
		);
		padding-left: 0;
	}

	.rightbar-overlay {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 9998;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
		background-color: #ac9dc778;
	}

	body[data-topbar='dark'] .navbar-brand-box {
		box-shadow: 0 0 2px var(--bs-header-bg);
		border-color: var(
			--bs-list-group-active-border-color
		);
		background-color: var(
			--bs-list-group-active-bg
		);
	}

	.logo-txt {
		color: black;
	}
}