finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[FEAT] Adds x-mode-only anchor styles to display images based if the theme is light or dark mode. (#3985)

Browse source 
Adds a feature similar to this https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/ , by adding styles to elements which `src` or `href` attribute ends with `#light-mode-only` or `#dark-mode-only`. To improve compability, the github variants with the `gh-` prefix are also contained.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3985
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
Co-committed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
This commit is contained in:
Mai-Lapyst 2024-06-09 10:50:53 +00:00 • committed by 0ko
parent 96f661e821
commit 0a7767eaaa
12 changed files with 51 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

13
web_src/css/markup/dark.css Normal file
View file

@ -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;
}

6
web_src/css/markup/light.css Normal file
View file

@ -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;
}

2
web_src/css/themes/theme-forgejo-dark.css
View file

@ -1,5 +1,7 @@
@import "../chroma/dark.css";
@import "../codemirror/dark.css";
@import "../markup/dark.css";
:root {
--steel-900: #10161d;
--steel-850: #131a21;

1
web_src/css/themes/theme-forgejo-light.css
View file

@ -1,5 +1,6 @@
@import "../chroma/light.css";
@import "../codemirror/light.css";
@import "../markup/light.css";
:root {
--steel-900: #10161d;

1
web_src/css/themes/theme-gitea-dark.css
View file

@ -1,5 +1,6 @@
@import "../chroma/dark.css";
@import "../codemirror/dark.css";
@import "../markup/dark.css";
:root {
--is-dark-theme: true;

1
web_src/css/themes/theme-gitea-light.css
View file

@ -1,5 +1,6 @@
@import "../chroma/light.css";
@import "../codemirror/light.css";
@import "../markup/light.css";
:root {
--is-dark-theme: false;