refactor: replace hardcoded link colors with --color-link CSS variable

josecelano · josecelano · commit 1693e3c37e8a · 2026-02-28T08:06:14.000Z
diff --git a/src/lib/components/atoms/TableOfContents.svelte b/src/lib/components/atoms/TableOfContents.svelte
@@ -97,13 +97,13 @@
 				word-break: keep-all;
 
 				&:hover {
-					color: rgba(255, 49, 0, 0.96) !important;
+					color: var(--color-link) !important;
 				}
 			}
 
 			&.active a {
 				font-weight: bold;
-				color: rgba(255, 49, 0, 0.96) !important;
+				color: var(--color-link) !important;
 			}
 		}
 	}
diff --git a/src/lib/components/atoms/Tag.svelte b/src/lib/components/atoms/Tag.svelte
@@ -33,7 +33,7 @@
 		text-transform: uppercase;
 		font-size: 12px;
 		&:hover {
-			color: rgba(254, 13, 0, 1);
+			color: var(--color-link);
 		}
 	}
 </style>
diff --git a/src/lib/components/atoms/Tree.svelte b/src/lib/components/atoms/Tree.svelte
@@ -21,7 +21,7 @@
 					href="#{heading.id}"
 					use:melt={$item(heading.id)}
 					class="inline-flex items-start justify-start gap-1 text-sm text-gray-400 no-underline transition-colors
-		 hover:text-gray-100 data-[active]:text-red-400 break-keep leading-snug"
+		 hover:text-gray-100 data-[active]:[color:var(--color-link)] break-keep leading-snug"
 				>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 					{@html heading.node.innerHTML}
diff --git a/src/lib/components/molecules/BlogPostCard.svelte b/src/lib/components/molecules/BlogPostCard.svelte
@@ -42,7 +42,7 @@
 	}
 
 	a:hover {
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.grid {
@@ -82,7 +82,7 @@
 	}
 
 	.text-container:hover {
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.text-container h2 {
diff --git a/src/lib/components/molecules/BlogPreview.svelte b/src/lib/components/molecules/BlogPreview.svelte
@@ -72,7 +72,7 @@
 	}
 
 	.text-container:hover {
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.text-container h2 {
diff --git a/src/lib/components/organisms/Post.svelte b/src/lib/components/organisms/Post.svelte
@@ -117,7 +117,7 @@
 		}
 
 		.author:hover {
-			color: rgba(255, 49, 0, 0.96);
+			color: var(--color-link);
 		}
 	}
 
diff --git a/src/lib/components/singletons/PrevNextPost.svelte b/src/lib/components/singletons/PrevNextPost.svelte
@@ -97,7 +97,7 @@
 	}
 
 	.arrow a:hover {
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.arrowNext {
diff --git a/src/lib/components/singletons/ShareButton.svelte b/src/lib/components/singletons/ShareButton.svelte
@@ -139,7 +139,7 @@
 	}
 
 	.dropdown-menu a:hover {
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	/* When the dropdown is hidden */
diff --git a/src/lib/components/singletons/ShareUrl.svelte b/src/lib/components/singletons/ShareUrl.svelte
@@ -36,6 +36,6 @@
 	button:hover {
 		cursor: pointer;
 		text-decoration: underline;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 </style>
diff --git a/src/lib/components/singletons/TorrustIndexPost.svelte b/src/lib/components/singletons/TorrustIndexPost.svelte
@@ -259,7 +259,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/lib/components/singletons/TorrustTrackerPost.svelte b/src/lib/components/singletons/TorrustTrackerPost.svelte
@@ -277,7 +277,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/lib/scss/_markdown.scss b/src/lib/scss/_markdown.scss
@@ -1,7 +1,7 @@
 #article-content {
 	.content {
 		a {
-			color: rgba(255, 49, 0, 0.96);
+			color: var(--color-link);
 			word-break: keep-all;
 		}
 
diff --git a/src/lib/scss/_typography.scss b/src/lib/scss/_typography.scss
@@ -9,12 +9,12 @@ a {
 
 	&:hover {
 		text-decoration: underline;
-		color: rgba(255, 49, 0, 0.96);
+		color: var(--color-link);
 	}
 }
 
 .active a {
-	color: rgba(255, 49, 0, 0.96);
+	color: var(--color-link);
 }
 
 ::selection {
@@ -34,7 +34,7 @@ i {
 }
 
 ul li::marker {
-	color: rgba(255, 49, 0, 0.96) !important;
+	color: var(--color-link) !important;
 }
 
 // #region Titles
diff --git a/src/lib/scss/_variables.scss b/src/lib/scss/_variables.scss
@@ -1,4 +1,6 @@
 :root {
+	--color-link: rgba(255, 49, 0, 0.96);
+
 	// Fonts
 	--font--default: 'Roboto Slab Variable', sans-serif;
 	--font--title: 'Roboto Slab Variable', sans-serif;
diff --git a/src/lib/scss/global.scss b/src/lib/scss/global.scss
@@ -31,7 +31,7 @@ body {
 }
 
 a {
-	color: rgba(255, 49, 0, 0.96);
+	color: var(--color-link);
 	overflow-wrap: break-word;
 	white-space: normal;
 }
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
@@ -94,6 +94,6 @@
 	}
 
 	a:hover {
-		color: rgba(255, 49, 0, 0.96);
+		color: var(--color-link);
 	}
 </style>
diff --git a/src/routes/(pages)/about/+page.svelte b/src/routes/(pages)/about/+page.svelte
@@ -372,7 +372,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/(pages)/community/+page.svelte b/src/routes/(pages)/community/+page.svelte
@@ -256,7 +256,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/(pages)/self-host/+page.svelte b/src/routes/(pages)/self-host/+page.svelte
@@ -137,7 +137,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/(pages)/torrent-index/+page.svelte b/src/routes/(pages)/torrent-index/+page.svelte
@@ -148,7 +148,7 @@
 
 		a {
 			word-break: keep-all;
-			color: rgba(254, 13, 0, 1);
+			color: var(--color-link);
 		}
 	}
 
diff --git a/src/routes/(pages)/torrent-tracker/+page.svelte b/src/routes/(pages)/torrent-tracker/+page.svelte
@@ -195,7 +195,7 @@
 	}
 
 	a {
-		color: rgba(255, 49, 0, 0.96);
+		color: var(--color-link);
 	}
 
 	@include bp.for-tablet-portrait-up {
diff --git a/src/routes/blog/benchmarking-the-torrust-bittorrent-tracker/+page.svelte b/src/routes/blog/benchmarking-the-torrust-bittorrent-tracker/+page.svelte
@@ -816,7 +816,7 @@ Estimated duration: 0 hours, 44 minutes
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/bencode-to-json-converter-in-rust/+page.svelte b/src/routes/blog/bencode-to-json-converter-in-rust/+page.svelte
@@ -243,7 +243,7 @@ println!("{output}"); // It prints the JSON string: "spam"`}
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.content-preview > p,
diff --git a/src/routes/blog/building-with-ai-agents-building-for-ai-agents/+page.svelte b/src/routes/blog/building-with-ai-agents-building-for-ai-agents/+page.svelte
@@ -771,7 +771,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul,
diff --git a/src/routes/blog/containerizing-rust-applications-best-practices/+page.svelte b/src/routes/blog/containerizing-rust-applications-best-practices/+page.svelte
@@ -1285,7 +1285,7 @@ CMD ["/usr/bin/full-example"]`}
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/contributor-path/+page.svelte b/src/routes/blog/contributor-path/+page.svelte
@@ -418,7 +418,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/deploying-torrust-to-production/+page.svelte b/src/routes/blog/deploying-torrust-to-production/+page.svelte
@@ -1449,7 +1449,7 @@ port = 1025`}
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/hash2torrent-retrieve-torrent-files-effortlessly/+page.svelte b/src/routes/blog/hash2torrent-retrieve-torrent-files-effortlessly/+page.svelte
@@ -235,7 +235,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/help-shape-the-torrust-2025-roadmap/+page.svelte b/src/routes/blog/help-shape-the-torrust-2025-roadmap/+page.svelte
@@ -224,7 +224,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.content-preview > p,
diff --git a/src/routes/blog/how-to-contribute-to-this-site/+page.svelte b/src/routes/blog/how-to-contribute-to-this-site/+page.svelte
@@ -179,7 +179,7 @@ tags:
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.content-preview > p,
diff --git a/src/routes/blog/how-to-run-a-local-demo/+page.svelte b/src/routes/blog/how-to-run-a-local-demo/+page.svelte
@@ -245,7 +245,7 @@ c10ad938b283   dockage/mailcatcher:0.8.2   "entrypoint mailcatcher"   5 seconds
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.content-preview > p,
diff --git a/src/routes/blog/how-to-setup-the-development-environment/+page.svelte b/src/routes/blog/how-to-setup-the-development-environment/+page.svelte
@@ -494,7 +494,7 @@ Loading configuration from file: \`./storage/tracker/etc/tracker.toml\` ...
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/introducing-the-new-sample-torrent-migration-tool/+page.svelte b/src/routes/blog/introducing-the-new-sample-torrent-migration-tool/+page.svelte
@@ -251,7 +251,7 @@ Uploaded torrents:  1`}
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/introducing-the-torrust-tracker-deployer/+page.svelte b/src/routes/blog/introducing-the-torrust-tracker-deployer/+page.svelte
@@ -1013,7 +1013,7 @@ SUM:                           541          11223           9820          46624
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/live-demo-beta-v3/+page.svelte b/src/routes/blog/live-demo-beta-v3/+page.svelte
@@ -143,7 +143,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.content-preview > p,
diff --git a/src/routes/blog/profiling-the-torrust-bittorrent-udp-tracker/+page.svelte b/src/routes/blog/profiling-the-torrust-bittorrent-udp-tracker/+page.svelte
@@ -289,7 +289,7 @@ add_one_torrent/RwLockTokioMutexTokio
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/released-v3-0-0-beta/+page.svelte b/src/routes/blog/released-v3-0-0-beta/+page.svelte
@@ -104,7 +104,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	.content-preview > p,
diff --git a/src/routes/blog/released-v3-0-0/+page.svelte b/src/routes/blog/released-v3-0-0/+page.svelte
@@ -166,7 +166,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/review-and-setup-guide-for-unit3d/+page.svelte b/src/routes/blog/review-and-setup-guide-for-unit3d/+page.svelte
@@ -537,7 +537,7 @@ Killed`}
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/setting-up-torrust-with-claude-code/+page.svelte b/src/routes/blog/setting-up-torrust-with-claude-code/+page.svelte
@@ -338,7 +338,7 @@ cp .env.local .env`}
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/the-enigmatic-torrent-source-field/+page.svelte b/src/routes/blog/the-enigmatic-torrent-source-field/+page.svelte
@@ -418,7 +418,7 @@
 
 	a {
 		word-break: keep-all;
-		color: rgba(254, 13, 0, 1);
+		color: var(--color-link);
 	}
 
 	ul {
diff --git a/src/routes/blog/torrust-enhancing-the-bittorrent-ecosystem/+page.svelte b/src/routes/blog/torrust-enhancing-the-bittorrent-ecosystem/+page.svelte
diff --git a/src/routes/blog/trackers-implemented-in-rust/+page.svelte b/src/routes/blog/trackers-implemented-in-rust/+page.svelte
diff --git a/src/routes/blog/visualize-tracker-metrics-prometheus-grafana/+page.svelte b/src/routes/blog/visualize-tracker-metrics-prometheus-grafana/+page.svelte
diff --git a/src/routes/blog/vortex-rust-bittorrent-client-review/+page.svelte b/src/routes/blog/vortex-rust-bittorrent-client-review/+page.svelte
diff --git a/src/routes/blog/what-is-a-bittorent-tracker/+page.svelte b/src/routes/blog/what-is-a-bittorent-tracker/+page.svelte

Original file line number	Diff line number	Diff line change
`@@ -97,13 +97,13 @@`
`97`	`97`	`word-break: keep-all;`
`98`	`98`
`99`	`99`	`&:hover {`
`100`		`- color: rgba(255, 49, 0, 0.96) !important;`
	`100`	`+ color: var(--color-link) !important;`
`101`	`101`	`}`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`&.active a {`
`105`	`105`	`font-weight: bold;`
`106`		`- color: rgba(255, 49, 0, 0.96) !important;`
	`106`	`+ color: var(--color-link) !important;`
`107`	`107`	`}`
`108`	`108`	`}`
`109`	`109`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@`
`33`	`33`	`text-transform: uppercase;`
`34`	`34`	`font-size: 12px;`
`35`	`35`	`&:hover {`
`36`		`- color: rgba(254, 13, 0, 1);`
	`36`	`+ color: var(--color-link);`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`href="#{heading.id}"`
`22`	`22`	`use:melt={$item(heading.id)}`
`23`	`23`	`class="inline-flex items-start justify-start gap-1 text-sm text-gray-400 no-underline transition-colors`
`24`		`- hover:text-gray-100 data-[active]:text-red-400 break-keep leading-snug"`
	`24`	`+ hover:text-gray-100 data-[active]:[color:var(--color-link)] break-keep leading-snug"`
`25`	`25`	`>`
`26`	`26`	`<!-- eslint-disable-next-line svelte/no-at-html-tags -->`
`27`	`27`	`{@html heading.node.innerHTML}`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`a:hover {`
`45`		`- color: rgba(254, 13, 0, 1);`
	`45`	`+ color: var(--color-link);`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`.grid {`
`@@ -82,7 +82,7 @@`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`.text-container:hover {`
`85`		`- color: rgba(254, 13, 0, 1);`
	`85`	`+ color: var(--color-link);`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`.text-container h2 {`
Original file line number	Diff line number	Diff line change
`@@ -72,7 +72,7 @@`
`72`	`72`	`}`
`73`	`73`
`74`	`74`	`.text-container:hover {`
`75`		`- color: rgba(254, 13, 0, 1);`
	`75`	`+ color: var(--color-link);`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`.text-container h2 {`
Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`.author:hover {`
`120`		`- color: rgba(255, 49, 0, 0.96);`
	`120`	`+ color: var(--color-link);`
`121`	`121`	`}`
`122`	`122`	`}`
`123`	`123`
Original file line number	Diff line number	Diff line change
`@@ -97,7 +97,7 @@`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`.arrow a:hover {`
`100`		`- color: rgba(254, 13, 0, 1);`
	`100`	`+ color: var(--color-link);`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`.arrowNext {`
Original file line number	Diff line number	Diff line change
`@@ -139,7 +139,7 @@`
`139`	`139`	`}`
`140`	`140`
`141`	`141`	`.dropdown-menu a:hover {`
`142`		`- color: rgba(254, 13, 0, 1);`
	`142`	`+ color: var(--color-link);`
`143`	`143`	`}`
`144`	`144`
`145`	`145`	`/* When the dropdown is hidden */`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,6 @@`
`36`	`36`	`button:hover {`
`37`	`37`	`cursor: pointer;`
`38`	`38`	`text-decoration: underline;`
`39`		`- color: rgba(254, 13, 0, 1);`
	`39`	`+ color: var(--color-link);`
`40`	`40`	`}`
`41`	`41`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -259,7 +259,7 @@`
`259`	`259`
`260`	`260`	`a {`
`261`	`261`	`word-break: keep-all;`
`262`		`- color: rgba(254, 13, 0, 1);`
	`262`	`+ color: var(--color-link);`
`263`	`263`	`}`
`264`	`264`
`265`	`265`	`ul {`