Adjust more colors when more contrast needed

Related: #518
ScratchAddons · Jan 21, 2025 · 12a9a40 · 12a9a40
1 parent 8684a23
commit 12a9a40
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 18 deletions.
diff --git a/assets/assets/css/base.scss b/assets/assets/css/base.scss
@@ -276,8 +276,12 @@ body {
 	--navbar-height: 59.5px;
 
 	@media (prefers-contrast: more) {
+		color: black;
 		--header-bg: #{darken($scratch-orange, 30%)};
 		--intro-heading-bg: #{darken($scratch-orange, 30%)};
+		--footer-cnt: black;
+		--footer-cnt-2: black;
+		--secondary-border: black;
 	}
 
 }
@@ -300,6 +304,12 @@ body.dark {
 	--secondary-cnt: white;
 	--secondary-border: #{$dark-dp-16};
 
+	@media (prefers-contrast: more) {
+		--footer-cnt: white;
+		--footer-cnt-2: white;
+		--secondary-border: white;
+	}
+
 }
 
 body.extension-styled {
@@ -344,13 +354,9 @@ body.dark {
 
 	textarea, input {
 		background-color: $dark-dp-1;
-		border-color: $dark-dp-16;
-		color: white;
 
 		&:focus, &:active {
 			background-color: $dark-dp-1;
-			border-color: $dark-dp-16;
-			color: white;
 		}
 
 		&::placeholder {
@@ -364,7 +370,11 @@ body.dark {
 	}
 
 	.text-muted {
-		color: $dark-low-emphasis !important
+		color: $dark-low-emphasis !important;
+
+		@media (prefers-contrast: more) {
+			color: var(--content-cnt) !important
+		}
 	}
 
 	// #dark-toggle {
@@ -434,13 +444,9 @@ body.dark.extension-styled {
 
 	textarea, input {
 		background-color: $dark-dp-1;
-		border-color: black;
-		color: white;
 
 		&:focus, &:active {
 			background-color: $dark-dp-1;
-			border-color: black;
-			color: white;
 		}
 
 		&::placeholder {
@@ -468,11 +474,11 @@ hr {
 	background-color: var(--secondary-bg-2);
 }
 
-.text-body {
+.text-body, .text-muted {
 	color: var(--content-cnt) !important
 }
 
-.border-top {
+.border-top, .card-footer {
 	border-top-color: var(--secondary-border) !important
 }
 
@@ -492,6 +498,17 @@ hr {
 	border-color: var(--secondary-border) !important
 }
 
+textarea, input {
+	border-color: var(--secondary-border) !important;
+	color: var(--content-cnt);
+
+	&:focus, &:active {
+		border-color: var(--secondary-border) !important;
+		color: var(--content-cnt);
+	}
+
+}
+
 
 // =============================================================
 //               OTHER STUFF RELATED TO THEMEING

diff --git a/assets/assets/css/docs.scss b/assets/assets/css/docs.scss
@@ -25,12 +25,20 @@ article {
 	transform: rotate(90deg);
 }
 
+.collapse-button svg g {
+	fill: currentColor
+}
+
 #docs-toc nav {
 
 	a.active {
 		@media (min-width: $bs-breakpoint-xl) {
 			font-weight: 600;
-			color: rgba(0,0,0,0.85) !important;	
+			color: rgba(0,0,0,0.85) !important;
+
+			@media (prefers-contrast: more) {
+				color: var(--content-cnt) !important;
+			}
 		}
 	}
 
@@ -41,6 +49,10 @@ article {
 	a.active {
 		font-weight: 600;
 		color: rgba(0,0,0,0.85) !important;	
+
+		@media (prefers-contrast: more) {
+			color: var(--content-cnt) !important;
+		}
 	}
 
 	.docs-nav-section span .docs-nav-page {
@@ -93,7 +105,7 @@ article {
 		> ul {
 			margin-left: 0.55rem;
 			padding-left: calc(0.45rem - 1px) !important;
-			border-left: solid 1px rgba(0, 0, 0, 0.25);
+			border-left: solid 1px var(--secondary-border);
 		}
 
 	}
@@ -107,6 +119,10 @@ article {
 		// 	color: darken($bs-muted, 25%) !important;
 		// }
 
+		@media (prefers-contrast: more) {
+			color: var(--content-cnt) !important
+		}
+
 		code {
 			font: inherit;
 		}
@@ -298,10 +314,6 @@ article {
 // =============================================================
 
 body.dark {
-
-	.collapse-button svg g {
-		fill: #9d9d9d
-	}
 
 	#docs-toc nav, 
 	#docs-nav {
@@ -326,6 +338,11 @@ body.dark {
 
 		a {
 			color: $dark-low-emphasis !important;
+
+			@media (prefers-contrast: more) {
+				color: var(--content-cnt) !important
+			}
+
 		} 
 
 	}
@@ -334,7 +351,11 @@ body.dark {
 		a.active {
 			@media (min-width: $bs-breakpoint-xl) {
 				font-weight: 600;
-				color: $dark-high-emphasis !important;	
+				color: $dark-high-emphasis !important;
+
+				@media (prefers-contrast: more) {
+					color: var(--content-cnt) !important
+				}
 			}
 		}
 	}

diff --git a/assets/assets/css/landing.scss b/assets/assets/css/landing.scss
@@ -171,6 +171,10 @@
 		background: $scratch-orange;
 		color: white;
 		border-radius: 50%;
+
+		@media (prefers-contrast: more) {
+			background: #{darken($scratch-orange, 30%)};
+		}
 	}
 
 	.features-icon .iconify {