Color changes for light and dark theme

Liquipedia · Dec 13, 2024 · 62b8964 · 62b8964
1 parent a5cc2b6
commit 62b8964
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/stylesheets/commons/BattleRoyale/NavigationTabs.less b/stylesheets/commons/BattleRoyale/NavigationTabs.less
@@ -36,18 +36,26 @@ Author(s): Elysienna
 			font-size: 0.75rem;
 		}
 
+		.theme--dark & {
+			border-color: var( --clr-secondary-16 );
+		}
+
 		&:not( :first-child ) {
 			margin-left: 0.5rem;
 		}
 
 		&.tab--active {
-			background-color: var( --clr-wiki-primary-container );
+			background-color: var( --clr-wiki-theme-primary, var( --clr-wiki-primary-container ) );
 			color: #ffffff;
 		}
 
 		@media ( hover: hover ) {
 			&:not( .tab--active ):hover {
 				background-color: #f5f5f5;
+
+				.theme--dark & {
+					background-color: var( --clr-secondary-9 );
+				}
 			}
 		}
 

diff --git a/stylesheets/commons/BattleRoyale/Panel.less b/stylesheets/commons/BattleRoyale/Panel.less
@@ -33,11 +33,22 @@ Author(s): Elysienna
 			font-size: 0.75rem;
 		}
 
+		.theme--dark & {
+			background-color: var( --clr-secondary-9 );
+			border-bottom-color: var( --clr-secondary-16 );
+		}
+
 		&.is--active {
-			background-color: #ffffff;
+			background-color: var( --clr-background, #ffffff );
 			color: #282828;
 			border-color: rgba( 0, 0, 0, 0.2 );
 			border-bottom-color: transparent;
+
+			.theme--dark & {
+				color: var( --clr-secondary-70 );
+				border-color: var( --clr-secondary-16 );
+				border-bottom-color: transparent;
+			}
 		}
 
 		&:not( :first-child ) {
@@ -47,6 +58,10 @@ Author(s): Elysienna
 		@media ( hover: hover ) {
 			&:hover:not( .is--active ) {
 				background-color: rgba( 0, 0, 0, 0.08 );
+
+				.theme--dark & {
+					background-color: var( --clr-secondary-16 );
+				}
 			}
 		}
 	}
@@ -69,6 +84,11 @@ Author(s): Elysienna
 		margin: 0;
 		padding: 0;
 		color: inherit;
+
+		html.theme--light &,
+		html.theme--dark & {
+			color: var( --clr-on-background );
+		}
 	}
 }
 
@@ -81,6 +101,11 @@ Author(s): Elysienna
 		font-size: 0.75rem;
 	}
 
+	.theme--dark & {
+		border-color: var( --clr-secondary-16 );
+		box-shadow: 0 -0.0625rem 0 0 var( --clr-secondary-16 );
+	}
+
 	&.is--hidden {
 		display: none;
 	}
@@ -128,6 +153,11 @@ Author(s): Elysienna
 			font-size: 0.8125rem;
 		}
 
+		html.theme--light &,
+		html.theme--dark & {
+			color: var( --clr-on-background );
+		}
+
 		&-icon {
 			margin: 0 1rem;
 			transition: transform linear 0.2s;

diff --git a/stylesheets/commons/BattleRoyale/PanelTable.less b/stylesheets/commons/BattleRoyale/PanelTable.less
@@ -49,10 +49,14 @@ Author(s): Elysienna
 
 	&__sort {
 		margin-left: 0.25rem;
-		color: var( --clr-wiki-on-primary );
+		color: var( --clr-wiki-theme-primary, var( --clr-wiki-on-primary ) );
 		cursor: pointer;
 		width: 1.25rem;
 		text-align: center;
+
+		.theme--dark & {
+			color: var( --clr-on-background );
+		}
 	}
 
 	&__navigate {