diff --git a/web/app/controllers/user_info_edit.php b/web/app/controllers/user_info_edit.php
index 99aed0a..07a7d47 100644
--- a/web/app/controllers/user_info_edit.php
+++ b/web/app/controllers/user_info_edit.php
@@ -299,7 +299,7 @@ if ($cur_tab == 'profile') {
 		$update_profile_form->appendHTML(<<<EOD
 			<div class="mb-3">
 				<label for="input-username_color" class="form-label">用户名颜色</label>
-				<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="棕色 - #996600" disabled>
+				<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="棕色" disabled>
 				<div id="help-username_color" class="form-text">被封禁的用户无法修改用户名颜色。</div>
 			</div>
 		EOD);
@@ -307,29 +307,22 @@ if ($cur_tab == 'profile') {
 		$update_profile_form->appendHTML(<<<EOD
 			<div class="mb-3">
 				<label for="input-username_color" class="form-label">用户名颜色</label>
-				<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="灰色 - #707070" disabled>
+				<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="灰色" disabled>
 				<div id="help-username_color" class="form-text">临时用户无法修改用户名颜色。</div>
 			</div>
 		EOD);
 	} else {
-		$additional_colors = [];
+		$username_colors = UOJUser::USERNAME_COLORS['user'];
 
 		if (isSuperUser($user)) {
-			$additional_colors['#9d3dcf'] = '紫色 - #9d3dcf';
+			$username_colors += UOJUser::USERNAME_COLORS['admin'];
 		}
 
 		$update_profile_form->addSelect('username_color', [
 			'div_class' => 'mb-3',
 			'label' => '用户名颜色',
 			'default_value' => $extra['username_color'],
-			'options' => $additional_colors + [
-				'#0d6efd' => '蓝色 - #0d6efd',
-				'#2da44e' => '绿色 - #2da44e',
-				'#e85aad' => '粉色 - #e85aad',
-				'#f32a38' => '红色 - #f32a38',
-				'#f57c00' => '橙色 - #f57c00',
-				'#00acc1' => '青色 - #00acc1',
-			],
+			'options' => $username_colors,
 		]);
 	}
 	$update_profile_form->handle = function (&$vdata) use ($user, $extra) {
diff --git a/web/app/models/HTML.php b/web/app/models/HTML.php
index b022553..7a25e2b 100644
--- a/web/app/models/HTML.php
+++ b/web/app/models/HTML.php
@@ -1,4 +1,29 @@
 <?php
+class CustomClassDef extends HTMLPurifier_AttrDef {
+	private $classes, $prefixes;
+
+	public function __construct($classes, $prefixes) {
+		$this->classes = $classes;
+		$this->prefixes = is_array($prefixes) ? join('|', $prefixes) : $prefixes;
+	}
+
+	public function validate($string, $config, $context) {
+		$classes = preg_split('/\s+/', $string);
+		$valid_classes = [];
+
+		foreach ($classes as $class) {
+			if (
+				in_array($class, $this->classes) ||
+				preg_match("/^({$this->prefixes})/i", $class)
+			) {
+
+				$valid_classes[] = $class;
+			}
+		}
+
+		return join(' ', $valid_classes);
+	}
+}
 
 class HTML {
 	public static function escape(?string $str, $cfg = []) {
@@ -454,7 +479,7 @@ class HTML {
 				'data-src' => 'URI',
 			],
 			'span' => [
-				'class' => 'Enum#uoj-username',
+				'class' => new CustomClassDef(['uoj-username'], ['uoj-username-']),
 				'data-realname' => 'Text',
 				'data-color' => 'Color',
 			],
@@ -485,7 +510,7 @@ class HTML {
 			'del' => [],
 			'br' => [],
 			'span' => [
-				'class' => 'Enum#uoj-username',
+				'class' => new CustomClassDef(['uoj-username'], ['uoj-username-']),
 				'data-realname' => 'Text',
 				'data-color' => 'Color',
 			],
diff --git a/web/app/models/UOJUser.php b/web/app/models/UOJUser.php
index b65bab9..6d1075d 100644
--- a/web/app/models/UOJUser.php
+++ b/web/app/models/UOJUser.php
@@ -11,6 +11,21 @@ class UOJUser {
 	const MAX_UA_LEN = 300;
 	const MAX_HISTORY_LEN = 20;
 
+	// Don't forget to change values in `models/HTML.php` and `css/uoj-bs5.css`
+	const USERNAME_COLORS = [
+		'user' => [
+			'blue' => 'Blue',
+			'green' => 'Green',
+			'pink' => 'Pink',
+			'red' => 'Red',
+			'orange' => 'Orange',
+			'cyan' => 'Cyan',
+		],
+		'admin' => [
+			'purple' => 'Purple',
+		],
+	];
+
 	public static $visibility_codes = [
 		'all' => [
 			'html' => '',
@@ -277,23 +292,23 @@ class UOJUser {
 
 	public static function getUserColor2($usergroup, $custom_color = null) {
 		if ($usergroup == 'B') {
-			return '#996600';
+			return 'brown';
 		}
 
 		if ($usergroup == 'T') {
-			return '#707070';
+			return 'gray';
 		}
 
 		if ($usergroup == 'S') {
-			return $custom_color ?: '#9d3dcf';
+			return $custom_color ?: 'purple';
 		}
 
 		// 前管理员设置颜色为紫色的，颜色改为蓝色
-		if ($custom_color == '#9d3dcf') {
-			return '#0d6efd';
+		if ($custom_color == 'purple') {
+			return 'blue';
 		}
 
-		return $custom_color ?: '#0d6efd';
+		return $custom_color ?: 'blue';
 	}
 
 	public static function getLink($user, $cfg = []) {
@@ -318,10 +333,12 @@ class UOJUser {
 			$realname = '';
 		}
 
+		$color = $cfg['color'] ? UOJUser::getUserColor($user) : '';
+
 		return HTML::tag('span', [
-			'class' => 'uoj-username',
-			'data-color' => $cfg['color'] ? UOJUser::getUserColor($user) : '',
+			'class' => "uoj-username uoj-username-{$color}",
 			'data-realname' => trim(HTML::escape($realname)),
+			'data-color' => $color,
 		], $user['username']);
 	}
 
diff --git a/web/app/upgrade/43_dark_mode/upgrade.php b/web/app/upgrade/43_dark_mode/upgrade.php
new file mode 100644
index 0000000..91fed71
--- /dev/null
+++ b/web/app/upgrade/43_dark_mode/upgrade.php
@@ -0,0 +1,60 @@
+<?php
+
+return function ($type) {
+	if ($type == 'up') {
+		DB::init();
+
+		function getColorName($color) {
+			switch ($color) {
+				case '#0d6efd':
+				case 'blue':
+					return 'blue';
+				case '#2da44e':
+				case 'green':
+					return 'green';
+				case '#e85aad':
+				case 'pink':
+					return 'pink';
+				case '#f32a38':
+				case 'red':
+					return 'red';
+				case '#f57c00':
+				case 'orange':
+					return 'orange';
+				case '#00acc1':
+				case 'cyan':
+					return 'cyan';
+				case '#9d3dcf':
+				case 'purple':
+					return 'purple';
+				case '#707070':
+				case 'gray':
+					return 'gray';
+				case '#996600':
+				case 'brown':
+					return 'brown';
+				default:
+					return 'blue';
+			}
+		}
+
+		$users = DB::selectAll("select * from user_info");
+
+		foreach ($users as $user) {
+			$extra = UOJUser::getExtra($user);
+			$original_color = $extra['username_color'];
+			$new_color = getColorName($original_color);
+			$extra['username_color'] = $new_color;
+			DB::update([
+				"update user_info",
+				"set", [
+					"extra" => json_encode($extra)
+				],
+				"where", [
+					"username" => $user['username']
+				],
+			]);
+			echo "{$user['username']}: {$original_color} -> {$new_color}\n";
+		}
+	}
+};
diff --git a/web/css/uoj-bs5.css b/web/css/uoj-bs5.css
index f8dcbc2..3ec4d81 100644
--- a/web/css/uoj-bs5.css
+++ b/web/css/uoj-bs5.css
@@ -541,3 +541,41 @@ form.form-horizontal {
 	grid-column: 2;
 	grid-row: 2;
 }
+
+/* Username color */
+
+.uoj-username-blue {
+	color: #0d6efd;
+}
+
+.uoj-username-green {
+	color: #2da44e;
+}
+
+.uoj-username-pink {
+	color: #e85aad;
+}
+
+.uoj-username-red {
+	color: #f32a38;
+}
+
+.uoj-username-orange {
+	color: #f57c00;
+}
+
+.uoj-username-cyan {
+	color: #00acc1;
+}
+
+.uoj-username-purple {
+	color: #9d3dcf;
+}
+
+.uoj-username-gray {
+	color: #707070;
+}
+
+.uoj-username-brown {
+	color: #996600;
+}
diff --git a/web/js/uoj.js b/web/js/uoj.js
index 7fabd88..8356ff1 100644
--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@@ -123,7 +123,7 @@ function getUserLink(username, realname, color) {
 		return '';
 	}
 	var text = username;
-	var style = '';
+	var className = 'uoj-username';
 	if (username.charAt(0) == '@') {
 		username = username.substr(1);
 	}
@@ -131,16 +131,16 @@ function getUserLink(username, realname, color) {
 		text = text + ' <span class="uoj-realname d-inline-block">(' + realname + ')</span>';
 	}
 	if (color) {
-		style += 'color: ' + color + ';';
+		className += ' uoj-username-' + color;
 	}
-	return '<a class="uoj-username" href="' + uojHome + '/user/' + username + '" ' + 'style="' + style + '">' + text + '</a>';
+	return '<a class="' + className + '" href="' + uojHome + '/user/' + username + '">' + text + '</a>';
 }
 function getUserSpan(username, realname, color) {
 	if (!username) {
 		return '';
 	}
 	var text = username;
-	var style = '';
+	var className = 'uoj-username';
 	if (username.charAt(0) == '@') {
 		username = username.substr(1);
 	}
@@ -148,9 +148,9 @@ function getUserSpan(username, realname, color) {
 		text = text + ' <span class="uoj-realname d-inline-block">(' + realname + ')</span>';
 	}
 	if (color) {
-		style += 'color: ' + color + ';';
+		className += ' uoj-username-' + color;
 	}
-	return '<span class="uoj-username" ' + 'style="' + style + '">' + text + '</span>';
+	return '<span class="' + className + '">' + text + '</span>';
 }
 
 function replaceWithHighlightUsername() {