Custom username colors

You have to add the code to your custom CSS.

You have to replace ______ with your username and _COLOR_ with the color you want.

Code

/* Custom username colors */
a[href$=":______"],
a[href$="/______"] {
	color: _COLOR_ !important;
}

Usernames with spaces

If a username has spaces, you have to write it two different ways. For example, the username "Example Person" has a space which becomes both an underscore and a %20.

/* Custom username colors */
a[href$=":Example_Person"],
a[href$="/Example_Person"],
a[href$=":Example%20Person"],
a[href$="/Example%20Person"] {
	color: _COLOR_ !important;
}

For the first two, replace the spaces with underscores. For the second two, replace the spaces with "%20".

Note that replacing the spaces with "%20" only affects the username in comments, while replacing the spaces with underscores would only affect the links in contributions, logs etc. In order for the username to be affected in all of those, you would have to use both methods, only for the main profile link, while for other pages like the talk page, you would only need to do the underscore method.

/* Custom username colors */
a[href$="wiki/User:Example_Person"],
a[href$="wiki/User:Example%20Person"],
a[href$="wiki/User_talk:Example_Person"],
a[href$="wiki/Special:Contributions/Example_Person"] {
	color: _COLOR_ !important;
}

Other Properties

Bold

You can also set other properties like font-weight: bold; to make the username stand out more.

/* Custom username colors */
a[href$=":Example_Person"],
a[href$="/Example_Person"],
a[href$=":Example%20Person"],
a[href$="/Example%20Person"] {
	color: _COLOR_ !important;
    font-weight: bold;
}

Animated Rainbow

To make a username rainbow and animated, the following code can be used.

a[href$=":Example_Person"],
a[href$=":Example%20Person"],
a[href$="/Example_Person"],
a[href$="/Example%20Person"] {
	-webkit-text-fill-color: transparent;
	animation: gradientName 10s cubic-bezier(0, 0, 1, 0.99) infinite;
	background-clip: text;
	background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple, red, orange, green, blue, purple);
	background-size: 400%;
	font-weight: bold;
}
@keyframes gradientName {
	0% {
		background-position: 0 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

Notes

Over customizing names via sitewide CSS is discouraged, as it can present readability issues, especially to those that are visually impaired or have vision issues.