Lemmy Color Change by hdyzen

/* ==UserStyle==
@name           Lemmy Color Change
@namespace      hdyzen
@version        0.0.2
@description    lemmy change color
@author         hdyzen
@preprocessor	stylus

@var color accent 'Accent' #00bc8c
@var color baseColor 'Base Color' #000
@var checkbox alignImg 'Align Images not centered' 1
==/UserStyle== */
@-moz-document domain("lemmy.world"), domain("lemmy.ml"), domain("lemmynsfw.com"), domain("alien.top"), domain("hexbear.net"), domain("lemm.ee"), domain("beehaw.org") {
	i=!important;
	:root, [data-bs-theme="light"] {
		--bs-body-bg: baseColor i;
		--bs-border-color-translucent: alpha(baseColor, 0.175) i;
		--bs-secondary-color: lighten(baseColor, 70%) i;
		--bs-dark-rgb: lighten(baseColor, 90%) i;
		--bs-body-color-rgb: lighten(baseColor, 92%);
		--bs-highlight-bg: lighten(baseColor, 7%) i;
		--bs-link-color: accent i;
		--bs-link-hover-color: lighten(accent, 20%);
	}
	.transition {
		transition: .3s ease i;
	}
	a {
		color: accent;
		@extend .transition;
		&:hover {
			color: lighten(accent, 20%);
		}
	}
	.link-primary {
		color: accent i;
		@extend .transition;
		&:hover {
			color: lighten(accent, 20%) i;
		}
	}
	.text-bg-primary {
		@extend .transition;
		background: accent i;
		color: lighten(baseColor, 90%) i;
	}
	.border-top, .border-light {
		@extend .transition;
		border-color: alpha(lighten(baseColor, 52%), 0.1) i;
	}
	.navbar {
		@extend .transition;
		--bs-navbar-color: alpha(lighten(baseColor, 85%), 0.8) i;
		--bs-navbar-hover-color: lighten(baseColor, 90%) i;
	}
	.card {
		@extend .transition;
		--bs-card-cap-bg: lighten(baseColor, 7%) i;
		background: lighten(baseColor, 7%) i;
		border-color: lighten(baseColor, 40%) i;
	}
	.dropdown-menu {
		@extend .transition;
		--bs-dropdown-bg: baseColor i;
		--bs-dropdown-border-color: lighten(baseColor, 13%) i;
		--bs-dropdown-divider-bg: lighten(baseColor, 20%) i;
		--bs-dropdown-link-color: lighten(baseColor, 95%) i;
		--bs-dropdown-link-hover-color: lighten(baseColor, 95%) i;
		--bs-dropdown-link-hover-bg: accent i;
		--bs-dropdown-link-active-color: lighten(baseColor, 95%) i;
		--bs-dropdown-link-active-bg: accent i;
		--bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
		--bs-dropdown-item-padding-x: 1rem;
		--bs-dropdown-item-padding-y: 0.25rem;
		--bs-dropdown-header-color: #666;
		--bs-dropdown-header-padding-x: 1rem;
		--bs-dropdown-header-padding-y: 0.5rem;
	}
	.btn-outline-secondary {
		@extend .transition;
		--bs-btn-active-bg: lighten(baseColor, 40%) i;
		--bs-btn-active-border-color: lighten(baseColor, 40%) i;
		--bs-btn-color: lighten(baseColor, 40%) i;
		--bs-btn-border-color: lighten(baseColor, 40%) i;
		--bs-btn-disabled-border-color: lighten(baseColor, 30%) i;
		--bs-btn-disabled-color: lighten(baseColor, 30%) i;
	}
	.btn-secondary {
		@extend .transition;
		--bs-btn-color: lighten(baseColor, 90%) i;
		--bs-btn-bg: lighten(baseColor, 40%) i;
		--bs-btn-border-color: lighten(baseColor, 40%) i;
		--bs-btn-hover-color: lighten(baseColor, 95%) i;
		--bs-btn-hover-bg: lighten(baseColor, 34%) i;
		--bs-btn-hover-border-color: lighten(baseColor, 32%) i;
		--bs-btn-focus-shadow-rgb: 123, 123, 123;
		--bs-btn-active-color: #f3f3f3;
		--bs-btn-active-bg: lighten(baseColor, 32%) i;
		--bs-btn-active-border-color: #4d4d4d;
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		--bs-btn-disabled-color: #f3f3f3;
		--bs-btn-disabled-bg: lighten(baseColor, 40%) i;
		--bs-btn-disabled-border-color: lighten(baseColor, 40%) i;
	}
	.form-select, .form-control {
		@extend .transition;
		background: lighten(baseColor, 7%) i;
		border-color: lighten(baseColor, 13%) i;
		&:focus {
			box-shadow: 0 0 0 0.25rem alpha(accent, 0.25) i;
		}
	}
	.input-group-text {
		@extend .transition;
		background: lighten(baseColor, 13%) i;
		& svg.icon {
			color: lighten(baseColor, 85%) i;
		}
	}
	.table > :not(caption) > * > * {
		@extend .transition;
		border-color: lighten(baseColor, 20%) i;
	}
	.text-bg-secondary {
		@extend .transition;
		background: lighten(baseColor, 40%) i;
		color: lighten(baseColor, 90%) i;
	}
	h6, h5, h2, h1, p, li {
		@extend .transition;
		color: lighten(baseColor, 80%) i;
	}
	if alignImg {
		.post-listing > .my-2 {
			margin-left: 0 i;
			text-align: center i;
		}
	}
}