Gitea: Editor in dark mode can't be seen

[devster31]

• Gitea version (or commit ref): https://github.com/go-gitea/gitea/commit/3b28de7d8eff9d9500e6db5c8db7c16e5b731c7f
• Git version: N/A
• Operating system: Docker on Ubuntu 18.04.2 LTS
• Database (use [x]):
  
  
  
  • [ ] PostgreSQL
  
  
  • [ ] MySQL
  
  
  • [ ] MSSQL
  
  
  • [x] SQLite
  
  
• Can you reproduce the bug at https://try.gitea.io:
  
  
  
  • [ ] Yes (provide example URL)
  
  
  • [ ] No
  
  
  • [x] Not relevant, doesn't use dark theme
  
  

Description

When editing files in dark mode text can't be distinguished.
Theme applied for syntax highlighting seems different than the one used in browsing mode.

Screenshots

[djpbessems]

This is because Gitea uses SimpleMDE as the editor. Gitea's own dark theme, does not swap SimpleMDE to a dark theme. It should be relatively easy: see https://github.com/xcatliu/simplemde-theme-dark, though I'm not entirely sure where the change would have to be done in Gitea's templates.

[devster31]

If it helps not all syntaxes seem to be affected. My screenshots show YAML, but I recall Go and JS not being affected.

[djpbessems]

Yeah, the editor reuses classes based on highlighting mappings; anything that ends up with class .cm-s-default .cm-atom will be darkblue (#.219 (hex-value)).

[zeripath]

So, the question is whether https://cdn.rawgit.com/xcatliu/simplemde-theme-dark/master/dist/simplemde-theme-dark.min.css can be imported after https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css and if having it always there affects the rendering of non simplemde components.

If you can have the dark simplemde theme loaded after the normal and it doesn't affect anything else, then you could just add an import to it at the top of the Gitea dark theme.

[djpbessems]

I'll try later today by editing templates/base/head.tmpl

[kolaente]

Simplemde is only used for creating markdown files / editing the wiki. For all other files, Gitea uses Codemirror.

[djpbessems]

Using the DOM-inspector, you can determine that the darkblue elements are span.cm-atom (which is indeed a class coming from CodeMirror - hence the cm in its classname).

However, when checking the CSS-rules in effect for this class, you can see that color: #219 is applied to it which is declared in simplemde.min.css.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

[Cherrg]

Tried https://cdn.rawgit.com/xcatliu/simplemde-theme-dark/master/dist/simplemde-theme-dark.min.css
looks not so well either:

default

with simplemde-theme-dark.min.css

[Cherrg]

i suggest to add an additional dark theme file to gitea and switch this on dark mode via class name.

Variant A

themes could be found here: https://codemirror.net/demo/theme.html#lucario

to switch theme: load theme css + change the cm-s-default inside codemirror class name to e.g. cm-s-ambiance. This could be done on the fly in browser dev tools:

Css loading could also be done for testing on the fly in browser console:
$('head').append('<link rel="stylesheet" href="<url to css theme file.css>" type="text/css" />');
(May take a look here:https://cdnjs.com/libraries/codemirror)

Variant B

Create some gitea own dark theme via UI Theme Editor on this website:
http://tmtheme-editor.herokuapp.com

(optional) convert the XML file from theme editor to codeMirror theme css file with this tool
https://github.com/FarhadG/codeMirror-aceEditor-theme-generator

I hope this tool still works.

EDIT: Variant C

(as lunny added 3 vote buttons :)

manually write dark theme in css file, prefix codemirror classes with e.g. cm-s-giteadark

---

To create a PR to switch css classes shouln't be to hard. I would just need a appropriate theme file.

---

Does Github allow voting?

Let me know if you choose A and which theme you would prefer, I could create such PR.

If someone knows what aesthetics means (I don't know such a thing :) ) and has some luck with styling just present a screenshot and present XML or CSS file from variant B here.

[djpbessems]

I'd choose B; if we want to avoid situations like this in the future, we'd best keep control of gitea's own themes instead of hoping that eventual upstream changes won't break anything. I will try recreating the alternative color scheme I created a few weeks ago in the theme-editor you linked; but it'll have to wait until my days calm down a bit (just changed jobs).

[lunny]

@Cherrg You can vote as below

👍 A
❤️ B
😄 C