diff --git a/web_src/css/base.css b/web_src/css/base.css
index b6c0b9cf49..a2837cf4f6 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -242,9 +242,10 @@ h1.error-code {
   background: var(--color-hover);
 }
 
-::selection {
-  background: var(--color-primary-light-1);
-  color: var(--color-white);
+::selection,
+relative-time::part(relative-time)::selection {
+  background: var(--color-selection-bg);
+  color: var(--color-selection-fg);
 }
 
 ::placeholder,
diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css
index 1c5466b3c8..a89666725b 100644
--- a/web_src/css/themes/theme-forgejo-dark.css
+++ b/web_src/css/themes/theme-forgejo-dark.css
@@ -276,6 +276,8 @@
   --color-highlight-fg: var(--color-primary-light-4);
   --color-highlight-bg: var(--color-primary-alpha-20);
   --color-overlay-backdrop: #080808c0;
+  --color-selection-bg: var(--steel-100);
+  --color-selection-fg: var(--color-pure-black);
   /* pattern colors for image diff */
   --checkerboard-color-1: #474747;
   --checkerboard-color-2: #313131;
@@ -338,10 +340,6 @@ i.grey.icon.icon.icon.icon {
 .ui.yellow.label.pending-label {
   color: var(--color-warning-text) !important;
 }
-::selection {
-  background: var(--steel-100) !important;
-  color: var(--color-pure-black) !important;
-}
 strong.attention-important, svg.attention-important {
   color: var(--color-violet-light);
 }
diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css
index be94290f5c..f0d7413072 100644
--- a/web_src/css/themes/theme-forgejo-light.css
+++ b/web_src/css/themes/theme-forgejo-light.css
@@ -274,6 +274,8 @@
   --color-highlight-fg: var(--color-primary-light-4);
   --color-highlight-bg: var(--color-primary-light-6);
   --color-overlay-backdrop: #080808c0;
+  --color-selection-bg: var(--steel-450);
+  --color-selection-fg: var(--color-white);
   /* pattern colors for gradient */
   --checkerboard-color-1: #ffffff;
   --checkerboard-color-2: #e5e5e5;
@@ -309,7 +311,3 @@
   background: var(--color-warning-bg) !important;
   color: var(--color-text-dark) !important;
 }
-::selection {
-  background: var(--steel-450) !important;
-  color: var(--color-white) !important;
-}
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 31cf57b7c9..983d1ce6e2 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -234,6 +234,8 @@
   --color-highlight-fg: #87651e;
   --color-highlight-bg: #352c1c;
   --color-overlay-backdrop: #080808c0;
+  --color-selection-bg: var(--color-primary-light-1);
+  --color-selection-fg: var(--color-white);
   /* pattern colors for image diff */
   --checkerboard-color-1: #313131;
   --checkerboard-color-2: #212121;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 74272c738e..8d88f5e204 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -234,6 +234,8 @@
   --color-highlight-fg: #eed200;
   --color-highlight-bg: #fffbdd;
   --color-overlay-backdrop: #080808c0;
+  --color-selection-bg: var(--color-primary-light-1);
+  --color-selection-fg: var(--color-white);
   /* pattern colors for gradient */
   --checkerboard-color-1: #ffffff;
   --checkerboard-color-2: #e5e5e5;
diff --git a/web_src/js/webcomponents/relative-time.js b/web_src/js/webcomponents/relative-time.js
index 02bf8feffb..776955623a 100644
--- a/web_src/js/webcomponents/relative-time.js
+++ b/web_src/js/webcomponents/relative-time.js
@@ -199,6 +199,7 @@ window.customElements.define('relative-time', class extends HTMLElement {
     if (!this.shadowRoot) {
       this.attachShadow({mode: 'open'});
       this.contentSpan = document.createElement('span');
+      this.contentSpan.setAttribute('part', 'relative-time');
       this.shadowRoot.append(this.contentSpan);
     }