diff --git a/models/fixtures/comment.yml b/models/fixtures/comment.yml
index 74fc716180..fdf8908206 100644
--- a/models/fixtures/comment.yml
+++ b/models/fixtures/comment.yml
@@ -83,3 +83,12 @@
issue_id: 2 # in repo_id 1
review_id: 20
created_unix: 946684810
+
+-
+ id: 10
+ type: 0
+ poster_id: 1
+ issue_id: 1 # in repo_id 1
+ content: "test markup light/dark-mode-only "
+ created_unix: 946684813
+ updated_unix: 946684813
diff --git a/models/fixtures/issue.yml b/models/fixtures/issue.yml
index ca5b1c6cd1..adb407f9c0 100644
--- a/models/fixtures/issue.yml
+++ b/models/fixtures/issue.yml
@@ -10,7 +10,7 @@
priority: 0
is_closed: false
is_pull: false
- num_comments: 2
+ num_comments: 3
created_unix: 946684800
updated_unix: 978307200
is_locked: false
diff --git a/release-notes/8.0.0/feat/3985.md b/release-notes/8.0.0/feat/3985.md
new file mode 100644
index 0000000000..31274c2d91
--- /dev/null
+++ b/release-notes/8.0.0/feat/3985.md
@@ -0,0 +1 @@
+Added support for displaying images based on the users current color code by using an anchor of `#dark-mode-only` or `#light-mode-only` respectively. Also supporting the github variants (e.g. `#gh-dark-mode-only`).
\ No newline at end of file
diff --git a/tests/e2e/markup.test.e2e.js b/tests/e2e/markup.test.e2e.js
new file mode 100644
index 0000000000..7bc6d2b6ca
--- /dev/null
+++ b/tests/e2e/markup.test.e2e.js
@@ -0,0 +1,13 @@
+// @ts-check
+import {test, expect} from '@playwright/test';
+
+test('Test markup with #xyz-mode-only', async ({page}) => {
+ const response = await page.goto('/user2/repo1/issues/1');
+ await expect(response?.status()).toBe(200);
+ await page.waitForLoadState('networkidle');
+
+ const comment = page.locator('.comment-body>.markup', {hasText: 'test markup light/dark-mode-only'});
+ await expect(comment).toBeVisible();
+ await expect(comment.locator('[src$="#gh-light-mode-only"]')).toBeVisible();
+ await expect(comment.locator('[src$="#gh-dark-mode-only"]')).not.toBeVisible();
+});
diff --git a/tests/integration/api_comment_test.go b/tests/integration/api_comment_test.go
index 221a6ba5ce..daa7b5b910 100644
--- a/tests/integration/api_comment_test.go
+++ b/tests/integration/api_comment_test.go
@@ -39,7 +39,7 @@ func TestAPIListRepoComments(t *testing.T) {
var apiComments []*api.Comment
DecodeJSON(t, resp, &apiComments)
- assert.Len(t, apiComments, 2)
+ assert.Len(t, apiComments, 3)
for _, apiComment := range apiComments {
c := &issues_model.Comment{ID: apiComment.ID}
unittest.AssertExistsAndLoadBean(t, c,
@@ -65,7 +65,7 @@ func TestAPIListRepoComments(t *testing.T) {
req = NewRequest(t, "GET", link.String())
resp = MakeRequest(t, req, http.StatusOK)
DecodeJSON(t, resp, &apiComments)
- assert.Len(t, apiComments, 1)
+ assert.Len(t, apiComments, 2)
assert.EqualValues(t, 3, apiComments[0].ID)
}
diff --git a/tests/integration/api_nodeinfo_test.go b/tests/integration/api_nodeinfo_test.go
index 598d38fb64..33d06ed1b4 100644
--- a/tests/integration/api_nodeinfo_test.go
+++ b/tests/integration/api_nodeinfo_test.go
@@ -34,6 +34,6 @@ func TestNodeinfo(t *testing.T) {
assert.Equal(t, "forgejo", nodeinfo.Software.Name)
assert.Equal(t, 29, nodeinfo.Usage.Users.Total)
assert.Equal(t, 22, nodeinfo.Usage.LocalPosts)
- assert.Equal(t, 3, nodeinfo.Usage.LocalComments)
+ assert.Equal(t, 4, nodeinfo.Usage.LocalComments)
})
}
diff --git a/web_src/css/markup/dark.css b/web_src/css/markup/dark.css
new file mode 100644
index 0000000000..700a48518e
--- /dev/null
+++ b/web_src/css/markup/dark.css
@@ -0,0 +1,13 @@
+.markup [src$="#gh-light-mode-only"],
+.markup [src$="#light-mode-only"],
+.markup [href$="#gh-light-mode-only"],
+.markup [href$="#light-mode-only"] {
+ display: none;
+}
+
+.markup [src$="#gh-dark-mode-only"],
+.markup [src$="#dark-mode-only"],
+.markup [href$="#gh-dark-mode-only"],
+.markup [href$="#dark-mode-only"] {
+ display: unset;
+}
diff --git a/web_src/css/markup/light.css b/web_src/css/markup/light.css
new file mode 100644
index 0000000000..88fc4b748c
--- /dev/null
+++ b/web_src/css/markup/light.css
@@ -0,0 +1,6 @@
+.markup [src$="#gh-dark-mode-only"],
+.markup [src$="#dark-mode-only"],
+.markup [href$="#gh-dark-mode-only"],
+.markup [href$="#dark-mode-only"] {
+ display: none;
+}
diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css
index b0fb7c22e1..c4d7287ff9 100644
--- a/web_src/css/themes/theme-forgejo-dark.css
+++ b/web_src/css/themes/theme-forgejo-dark.css
@@ -1,5 +1,7 @@
@import "../chroma/dark.css";
@import "../codemirror/dark.css";
+@import "../markup/dark.css";
+
:root {
--steel-900: #10161d;
--steel-850: #131a21;
diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css
index f2bafc148b..9ad58879ab 100644
--- a/web_src/css/themes/theme-forgejo-light.css
+++ b/web_src/css/themes/theme-forgejo-light.css
@@ -1,5 +1,6 @@
@import "../chroma/light.css";
@import "../codemirror/light.css";
+@import "../markup/light.css";
:root {
--steel-900: #10161d;
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 1763f236cf..6ad6efe748 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -1,5 +1,6 @@
@import "../chroma/dark.css";
@import "../codemirror/dark.css";
+@import "../markup/dark.css";
:root {
--is-dark-theme: true;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index fd348dfdc2..830b96febe 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -1,5 +1,6 @@
@import "../chroma/light.css";
@import "../codemirror/light.css";
+@import "../markup/light.css";
:root {
--is-dark-theme: false;