Compatibility with dark mode in K5. Closes #55

sylvainjule · sylvainjule · commit 877b24274812 · 2025-08-06T16:27:17.000+02:00
diff --git a/composer.json b/composer.json
@@ -3,7 +3,7 @@
     "description": "Matomo helpers, panel area and sections for Kirby",
     "type": "kirby-plugin",
     "license": "MIT",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "authors": [
         {
             "name": "Sylvain Julé",
diff --git a/index.css b/index.css
diff --git a/index.js b/index.js
diff --git a/src/assets/css/common/_typography.scss b/src/assets/css/common/_typography.scss
@@ -3,7 +3,7 @@
 		text-transform: uppercase;
 		font-size: 0.75rem;
 		letter-spacing: 0.15px;
-		color: lighten($grey, 10%);
+		color: light-dark(lighten($grey, 10%), rgba(255, 255, 255, .55));
 		font-weight: 400;
 	}
 	.empty {
@@ -12,6 +12,6 @@
 		text-align: center;
 		margin-top: 1rem;
 		padding: 1rem 0 1rem 0;
-		background: #fafafa;
+		background: light-dark(#fafafa, hsl(0, 0%, calc(15% + 0%)));
 	}
 }
diff --git a/src/assets/css/components/_chart.scss b/src/assets/css/components/_chart.scss
@@ -8,7 +8,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background: rgba(239, 239, 239, 0.85);
+		background: light-dark(rgba(239, 239, 239, 0.85), rgba(31, 31, 31, .85));
 		z-index: 1000;
 		display: flex;
 		justify-content: center;
@@ -21,14 +21,14 @@
 	.empty {
 		margin-top: 0;
 		padding: 1rem;
-		background: white;
+		background: light-dark(white, black);
 		span {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			width: 100%;
 			height: 100%;
-			background: #fafafa;
+			background: light-dark(#fafafa, hsl(0, 0%, calc(19% + 0%)));
 			color: #b3b3b3;
 		}
 	}
diff --git a/src/assets/css/components/_overview.scss b/src/assets/css/components/_overview.scss
@@ -8,7 +8,8 @@
 		margin-top: 1.5rem;
 		padding: 1.5rem;
 		padding-right: 1rem;
-		background: white;
+		background: light-dark(white, hsl(0, 0%, calc(19% + 0%)));
+		border-radius: var(--rounded);
 		min-height: 150px;
 		display: flex;
 		box-shadow: 0 2px 5px rgba(22,23,26,.05);
@@ -20,7 +21,7 @@
 		justify-content: space-between;
 		align-items: flex-start;
 		&:not(:last-child) {
-			border-right: 1px solid lighten(#d9d9d9, 7%);
+			border-right: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));
 			padding-right: 1rem;
 			margin-right: 1.5rem;
 		}
@@ -41,7 +42,7 @@
 				content: '';
 				width: 15px;
 				height: 1px;
-				background: lighten($grey, 20%);
+				background: light-dark(lighten($grey, 20%), rgba(255, 255, 255, .3));
 				top: 0;
 			}
 		}
@@ -63,7 +64,7 @@
 				} 
 			}
 			&.positive {
-				background: #f1faed;
+				background: light-dark(#f1faed, rgba(#405b34, .4));
 				color: #7aba4c;
 				.icon {
 					svg {
@@ -72,8 +73,8 @@
 				}
 			}
 			&.negative {
-				background: #feeaee;
-				color: #f93048;
+				background: light-dark(#feeaee, rgba(#963a4c, .3));
+				color: light-dark(#f93048, #eb475b);
 				.icon {
 					transform: rotate(90deg);
 					svg {
@@ -82,8 +83,8 @@
 				}
 			}
 			&.grey {
-				background: lighten(#efefef, 3%);
-				color: #9a9a9a;
+				background: light-dark(lighten(#efefef, 3%), rgba(255, 255, 255, .07));
+				color: light-dark(#9a9a9a, rgba(255, 255, 255, .6));
 			}
 		}
 	}
@@ -112,14 +113,14 @@
 				border-right: none;
 			}
 			&:nth-child(odd) {
-				border-right: 1px solid lighten(#d9d9d9, 7%);
+				border-right: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));
 			}
 			&:nth-child(even) {
 				padding-left: 1.5rem;
 			}
 			&:first-child, &:nth-child(2) {
 				padding-bottom: 1.5rem;
-				border-bottom: 1px solid lighten(#d9d9d9, 7%);
+				border-bottom: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));
 			}
 			&:nth-child(3), &:nth-child(4) {
 				padding-top: 1.5rem;
@@ -137,7 +138,7 @@
 			}
 			&:not(:last-child) {
 				padding-bottom: 1.5rem;
-				border-bottom: 1px solid lighten(#d9d9d9, 7%);
+				border-bottom: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));
 			}
 			&:not(:first-child) {
 				padding-top: 1.5rem;
diff --git a/src/assets/css/components/_realtime.scss b/src/assets/css/components/_realtime.scss
@@ -6,13 +6,13 @@
 		font-size: 0.75rem;
 		padding: 0.25rem 0.5rem;
 		border-radius: 4px;
-		background: darken(#fafafa, 3%);
+		background: light-dark(darken(#fafafa, 3%), hsl(0, 0%, calc(15% + 0%)));
 		letter-spacing: 0.15px;
-		color: lighten($grey, 5%);
+		color: light-dark(lighten($grey, 5%), rgba(255, 255, 255, .6));
 		cursor: pointer;
 		transition: color 0.2s ease-out;
 		&:hover {
-			color: black;
+			color: light-dark(black, white);
 		}
 	}
 	.big-number {
@@ -32,7 +32,7 @@
 			content: '';
 			width: 15px;
 			height: 1px;
-			background: lighten($grey, 20%);
+			background: light-dark(lighten($grey, 20%), rgba(255, 255, 255, .3));
 			top: 0;
 		}
 	}
diff --git a/src/assets/css/components/_visits-summary.scss b/src/assets/css/components/_visits-summary.scss
@@ -13,20 +13,20 @@
 				svg {
 					width: 100%;
 					height: 100%;
-					fill: lighten($grey, 20%);
+					fill: light-dark(lighten($grey, 20%), rgba(255, 255, 255, .5));
 				}
 			}
 			.number {
 				margin-left: auto;
 			}
 			&:not(:last-child) {
-				border-bottom: 1px solid lighten(#d9d9d9, 7%);
+				border-bottom: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));
 			}
 			&:hover {
-				background: #fafafa;
+				background: light-dark(#fafafa, hsl(0, 0%, calc(15% + 0%)));
 				.icon {
 					svg {
-						fill: $grey;
+						fill: light-dark($grey, rgba(255, 255, 255, .8));
 					}
 				}
 			}
diff --git a/src/assets/css/components/_widgets.scss b/src/assets/css/components/_widgets.scss
@@ -14,7 +14,8 @@
 		margin-top: 1.5rem;
 		padding: 1.5rem;
 		padding-bottom: 1.25rem;
-		background: white;
+		background: light-dark(white, hsl(0, 0%, calc(19% + 0%)));
+		border-radius: var(--rounded);
 		box-shadow: 0 2px 5px rgba(22,23,26,.05);
 		&:nth-child(odd) {
 			margin-right: 1.5rem;
@@ -27,22 +28,7 @@
 			font-size: 30px;
 			margin-top: 5px;
 		}
-		.details {
-			position: relative;
-			font-size: 0.875rem;
-			color: lighten($grey, 10%);
-			margin-top: 20px;
-			padding-top: 15px;
-			line-height: 1.5;
-			&:before {
-				position: absolute;
-				content: '';
-				width: 15px;
-				height: 1px;
-				background: lighten($grey, 20%);
-				top: 0;
-			}
-		}
+
 		ul {
 			margin-top: calc(20px - 0.5rem);
 			li {
@@ -58,7 +44,7 @@
 					svg {
 						width: 100%;
 						height: 100%;
-						fill: lighten($grey, 20%);
+						fill: light-dark(lighten($grey, 20%), rgba(255, 255, 255, .5));
 					}
 				}
 				.text {
@@ -76,25 +62,26 @@
 					}
 				}
 				&:not(:last-child) {
-					border-bottom: 1px solid lighten(#d9d9d9, 7%);
+					border-bottom: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));
 				}
 				&:hover {
-					background: #fafafa;
+					background: light-dark(#fafafa, hsl(0, 0%, calc(15% + 0%)));
 					.icon {
 						svg {
-							fill: $grey;
+							fill: light-dark($grey, rgba(255, 255, 255, .8));
 						}
 					}
 				}
 			}
 		}
 		.empty {
-			color: lighten($grey, 20%);
+			color: light-dark(lighten($grey, 20%), rgba(255, 255, 255, .6));
 			font-size: 0.75rem;
 			text-align: center;
 			margin-top: 1rem;
 			padding: 1rem 0 1rem 0;
-			background: #fafafa;
+			background: light-dark(#fafafa, hsl(0, 0%, calc(15% + 0%)));
+			border-radius: var(--rounded-sm);
 		}
 	}
 	@include respond-to('smaller-720') {
diff --git a/src/assets/css/sections/_main.scss b/src/assets/css/sections/_main.scss
@@ -14,7 +14,7 @@
 			opacity: 1;
 		}
 		&.active {
-			border-bottom: 1px solid black;
+			border-bottom: 1px solid light-dark(black, white);
 		}
 	}
 	@include respond-to('smaller-480') {
diff --git a/src/assets/css/sections/_page.scss b/src/assets/css/sections/_page.scss
@@ -1,16 +1,17 @@
 .matomo-page {
 	padding: 1.5rem;
 	padding-bottom: 1.25rem;
-	background: white;
+	background: light-dark(white, hsl(0, 0%, calc(19% + 0%)));
 	box-shadow: 0 2px 5px rgba(22,23,26,.05);
+	border-radius: var(--rounded);
 	margin-bottom: 3rem;
 	.code {
 		text-transform: uppercase;
 		padding: 2px 4px;
 		border-radius: 3px;
 		margin-left: 5px;
-		background: #f2f2f2;
-        color: #919191;
+		background: light-dark(#f2f2f2, rgba(white, .2));
+        color: light-dark(#919191, rgba(white, .8));
 	}
 	.loader, table {
 		margin-top: calc(20px - 0.5rem);
@@ -34,8 +35,8 @@
 						padding: 2px 4px;
 						border-radius: 3px;
 						margin-right: -4px;
-						border: 1px solid lighten(#d9d9d9, 7%);
-				        color: #919191;
+						border: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(white, .3));
+        				color: light-dark(#919191, rgba(white, .7));
 					}
 				}
 			}
@@ -51,7 +52,7 @@
 					svg {
 						width: 100%;
 						height: 100%;
-						fill: lighten($grey, 20%);
+						fill: light-dark(lighten($grey, 20%), rgba(255, 255, 255, .5));
 					}
 				}
 				&:first-child {
@@ -82,18 +83,20 @@
 				margin-left: auto;
 			}
 			&:not(:last-child) {
-				border-bottom: 1px solid lighten(#d9d9d9, 7%);
+				border-bottom: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));
 			}
 			&:hover {
-				background: #fafafa;
-				.icon {
-					svg {
-						fill: $grey;
+				&:not(:first-child) {
+					background: light-dark(#fafafa, hsl(0, 0%, calc(15% + 0%)));
+					.icon {
+						svg {
+							fill: light-dark($grey, rgba(255, 255, 255, .8));
+						}
 					}
-				}
-				td {
-					&:nth-child(3) {
-						color: $grey;
+					td {
+						&:nth-child(3) {
+							color: light-dark($grey, rgba(255, 255, 255, .8));
+						}
 					}
 				}
 			}
diff --git a/src/assets/css/sections/_sidebar.scss b/src/assets/css/sections/_sidebar.scss
@@ -2,9 +2,11 @@
     position: relative;
     display: flex;
     align-items: center;
-    background: white;
+	background: light-dark(white, hsl(0, 0%, calc(19% + 0%)));
     border-radius: 1px;
     margin-bottom: 2px;
+	border-radius: var(--rounded);
+	overflow: hidden;
     box-shadow: 0 2px 5px rgba(22,23,26,.05);
     .icon {
     	width: 38px;
@@ -32,20 +34,21 @@
 		    margin-right: 1rem;
 		    flex-grow: 1;
 		    font-size: .875rem;
-		    color: #16171a;
+		    color: light-dark(#16171a, rgba(255, 255, 255, .9));
 	    }
 	}
 }
 
 .matomo-block {
 	position: relative;
+	border-radius: var(--rounded);
 	&:not(:first-child) {
 		margin-top: 1.5rem;
 	}
 	padding: 1rem;
 	padding-bottom: 0.75em;
 	padding-top: 1.25em;
-	background: white;
+	background: light-dark(white, hsl(0, 0%, calc(19% + 0%)));
 	box-shadow: 0 2px 5px rgba(22,23,26,.05);
 	.loader {
 		font-size: 16px;
diff --git a/src/components/widgets/chart.vue b/src/components/widgets/chart.vue

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`"description": "Matomo helpers, panel area and sections for Kirby",`
`4`	`4`	`"type": "kirby-plugin",`
`5`	`5`	`"license": "MIT",`
`6`		`- "version": "2.1.0",`
	`6`	`+ "version": "2.1.1",`
`7`	`7`	`"authors": [`
`8`	`8`	`{`
`9`	`9`	`"name": "Sylvain Julé",`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`text-transform: uppercase;`
`4`	`4`	`font-size: 0.75rem;`
`5`	`5`	`letter-spacing: 0.15px;`
`6`		`- color: lighten($grey, 10%);`
	`6`	`+ color: light-dark(lighten($grey, 10%), rgba(255, 255, 255, .55));`
`7`	`7`	`font-weight: 400;`
`8`	`8`	`}`
`9`	`9`	`.empty {`
`@@ -12,6 +12,6 @@`
`12`	`12`	`text-align: center;`
`13`	`13`	`margin-top: 1rem;`
`14`	`14`	`padding: 1rem 0 1rem 0;`
`15`		`- background: #fafafa;`
	`15`	`+ background: light-dark(#fafafa, hsl(0, 0%, calc(15% + 0%)));`
`16`	`16`	`}`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,8 @@`
`8`	`8`	`margin-top: 1.5rem;`
`9`	`9`	`padding: 1.5rem;`
`10`	`10`	`padding-right: 1rem;`
`11`		`- background: white;`
	`11`	`+ background: light-dark(white, hsl(0, 0%, calc(19% + 0%)));`
	`12`	`+ border-radius: var(--rounded);`
`12`	`13`	`min-height: 150px;`
`13`	`14`	`display: flex;`
`14`	`15`	`box-shadow: 0 2px 5px rgba(22,23,26,.05);`
`@@ -20,7 +21,7 @@`
`20`	`21`	`justify-content: space-between;`
`21`	`22`	`align-items: flex-start;`
`22`	`23`	`&:not(:last-child) {`
`23`		`- border-right: 1px solid lighten(#d9d9d9, 7%);`
	`24`	`+ border-right: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));`
`24`	`25`	`padding-right: 1rem;`
`25`	`26`	`margin-right: 1.5rem;`
`26`	`27`	`}`
`@@ -41,7 +42,7 @@`
`41`	`42`	`content: '';`
`42`	`43`	`width: 15px;`
`43`	`44`	`height: 1px;`
`44`		`- background: lighten($grey, 20%);`
	`45`	`+ background: light-dark(lighten($grey, 20%), rgba(255, 255, 255, .3));`
`45`	`46`	`top: 0;`
`46`	`47`	`}`
`47`	`48`	`}`
`@@ -63,7 +64,7 @@`
`63`	`64`	`}`
`64`	`65`	`}`
`65`	`66`	`&.positive {`
`66`		`- background: #f1faed;`
	`67`	`+ background: light-dark(#f1faed, rgba(#405b34, .4));`
`67`	`68`	`color: #7aba4c;`
`68`	`69`	`.icon {`
`69`	`70`	`svg {`
`@@ -72,8 +73,8 @@`
`72`	`73`	`}`
`73`	`74`	`}`
`74`	`75`	`&.negative {`
`75`		`- background: #feeaee;`
`76`		`- color: #f93048;`
	`76`	`+ background: light-dark(#feeaee, rgba(#963a4c, .3));`
	`77`	`+ color: light-dark(#f93048, #eb475b);`
`77`	`78`	`.icon {`
`78`	`79`	`transform: rotate(90deg);`
`79`	`80`	`svg {`
`@@ -82,8 +83,8 @@`
`82`	`83`	`}`
`83`	`84`	`}`
`84`	`85`	`&.grey {`
`85`		`- background: lighten(#efefef, 3%);`
`86`		`- color: #9a9a9a;`
	`86`	`+ background: light-dark(lighten(#efefef, 3%), rgba(255, 255, 255, .07));`
	`87`	`+ color: light-dark(#9a9a9a, rgba(255, 255, 255, .6));`
`87`	`88`	`}`
`88`	`89`	`}`
`89`	`90`	`}`
`@@ -112,14 +113,14 @@`
`112`	`113`	`border-right: none;`
`113`	`114`	`}`
`114`	`115`	`&:nth-child(odd) {`
`115`		`- border-right: 1px solid lighten(#d9d9d9, 7%);`
	`116`	`+ border-right: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));`
`116`	`117`	`}`
`117`	`118`	`&:nth-child(even) {`
`118`	`119`	`padding-left: 1.5rem;`
`119`	`120`	`}`
`120`	`121`	`&:first-child, &:nth-child(2) {`
`121`	`122`	`padding-bottom: 1.5rem;`
`122`		`- border-bottom: 1px solid lighten(#d9d9d9, 7%);`
	`123`	`+ border-bottom: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));`
`123`	`124`	`}`
`124`	`125`	`&:nth-child(3), &:nth-child(4) {`
`125`	`126`	`padding-top: 1.5rem;`
`@@ -137,7 +138,7 @@`
`137`	`138`	`}`
`138`	`139`	`&:not(:last-child) {`
`139`	`140`	`padding-bottom: 1.5rem;`
`140`		`- border-bottom: 1px solid lighten(#d9d9d9, 7%);`
	`141`	`+ border-bottom: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));`
`141`	`142`	`}`
`142`	`143`	`&:not(:first-child) {`
`143`	`144`	`padding-top: 1.5rem;`
Original file line number	Diff line number	Diff line change
`@@ -13,20 +13,20 @@`
`13`	`13`	`svg {`
`14`	`14`	`width: 100%;`
`15`	`15`	`height: 100%;`
`16`		`- fill: lighten($grey, 20%);`
	`16`	`+ fill: light-dark(lighten($grey, 20%), rgba(255, 255, 255, .5));`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`	`.number {`
`20`	`20`	`margin-left: auto;`
`21`	`21`	`}`
`22`	`22`	`&:not(:last-child) {`
`23`		`- border-bottom: 1px solid lighten(#d9d9d9, 7%);`
	`23`	`+ border-bottom: 1px solid light-dark(lighten(#d9d9d9, 7%), rgba(255, 255, 255, .2));`
`24`	`24`	`}`
`25`	`25`	`&:hover {`
`26`		`- background: #fafafa;`
	`26`	`+ background: light-dark(#fafafa, hsl(0, 0%, calc(15% + 0%)));`
`27`	`27`	`.icon {`
`28`	`28`	`svg {`
`29`		`- fill: $grey;`
	`29`	`+ fill: light-dark($grey, rgba(255, 255, 255, .8));`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`opacity: 1;`
`15`	`15`	`}`
`16`	`16`	`&.active {`
`17`		`- border-bottom: 1px solid black;`
	`17`	`+ border-bottom: 1px solid light-dark(black, white);`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`	`@include respond-to('smaller-480') {`