update styles and readme

README.md

@@ -1,22 +1,27 @@
 # gogs-dark-theme
 
-An improved gogs dark theme, original from [Stylish](https://userstyles.org/styles/167730/gogs-dark-theme)
+An improved gogs dark theme, original from [Stylish](https://userstyles.org/styles/167730/gogs-dark-theme), CodeMirror theme from [here](https://codemirror.net/5/demo/theme.html#material-darker)
 
 ## Instructions
 
-- Put `dark-theme.css` under `/your/gogs/path/custom/public/themes` foler
+- Put `dark-theme.css` and `codemirror-material-darker.css` under `/your/gogs/path/custom/public/themes` foler
 - Add following HTML code in `/your/gogs/path/custom/templates/inject/head.tmpl`
- ```html
- <link rel="stylesheet" href="/css/themes/dark-theme.css">
- ```
-- If you're using Nginx to proxy ```Gogs```, upload `gogs-hero-light.png` to the site folder and add the following lines in your site config
- ```nginx
- location =/img/gogs-hero.png {
-     alias /var/www/yoursite/gogs-hero-light.png;
- }
- ```
+
+```html
+<link rel="stylesheet" href="/css/themes/dark-theme.css" />
+<link rel="stylesheet" href="/css/themes/codemirror-material-darker.css" />
+```
+
+- If you're using Nginx to proxy `Gogs`, upload `gogs-hero-light.png` to the site folder and add the following lines in your site config
+
+```nginx
+location =/img/gogs-hero.png {
+    alias /var/www/yoursite/gogs-hero-light.png;
+}
+```
+
 - Restart Nginx and Gogs
 
 ## Todo
 
-- [ ] CodeMirror themes
+- [x] CodeMirror themes

codemirror-material-darker.css

@@ -4,131 +4,131 @@
   Website:    https://material-theme.site/
 */
 
-.cm-s-paper.CodeMirror {
+.cm-s-default.CodeMirror {
   background-color: #212121;
   color: #eeffff;
 }
 
-.cm-s-paper .CodeMirror-gutters {
+.cm-s-default .CodeMirror-gutters {
   background: #212121;
   color: #545454;
   border: none;
 }
 
-.cm-s-paper .CodeMirror-guttermarker,
-.cm-s-paper .CodeMirror-guttermarker-subtle,
-.cm-s-paper .CodeMirror-linenumber {
+.cm-s-default .CodeMirror-guttermarker,
+.cm-s-default .CodeMirror-guttermarker-subtle,
+.cm-s-default .CodeMirror-linenumber {
   color: #545454;
 }
 
-.cm-s-paper .CodeMirror-cursor {
+.cm-s-default .CodeMirror-cursor {
   border-left: 1px solid #ffcc00;
 }
 
-.cm-s-paper div.CodeMirror-selected {
+.cm-s-default div.CodeMirror-selected {
   background: rgba(97, 97, 97, 0.2);
 }
 
-.cm-s-paper.CodeMirror-focused div.CodeMirror-selected {
+.cm-s-default.CodeMirror-focused div.CodeMirror-selected {
   background: rgba(97, 97, 97, 0.2);
 }
 
-.cm-s-paper .CodeMirror-line::selection,
-.cm-s-paper .CodeMirror-line > span::selection,
-.cm-s-paper .CodeMirror-line > span > span::selection {
+.cm-s-default .CodeMirror-line::selection,
+.cm-s-default .CodeMirror-line > span::selection,
+.cm-s-default .CodeMirror-line > span > span::selection {
   background: rgba(128, 203, 196, 0.2);
 }
 
-.cm-s-paper .CodeMirror-line::-moz-selection,
-.cm-s-paper .CodeMirror-line > span::-moz-selection,
-.cm-s-paper .CodeMirror-line > span > span::-moz-selection {
+.cm-s-default .CodeMirror-line::-moz-selection,
+.cm-s-default .CodeMirror-line > span::-moz-selection,
+.cm-s-default .CodeMirror-line > span > span::-moz-selection {
   background: rgba(128, 203, 196, 0.2);
 }
 
-.cm-s-paper .CodeMirror-activeline-background {
+.cm-s-default .CodeMirror-activeline-background {
   background: rgba(0, 0, 0, 0.5);
 }
 
-.cm-s-paper .cm-keyword {
+.cm-s-default .cm-keyword {
   color: #c792ea;
 }
 
-.cm-s-paper .cm-operator {
+.cm-s-default .cm-operator {
   color: #89ddff;
 }
 
-.cm-s-paper .cm-variable-2 {
+.cm-s-default .cm-variable-2 {
   color: #eeffff;
 }
 
-.cm-s-paper .cm-variable-3,
-.cm-s-paper .cm-type {
+.cm-s-default .cm-variable-3,
+.cm-s-default .cm-type {
   color: #f07178;
 }
 
-.cm-s-paper .cm-builtin {
+.cm-s-default .cm-builtin {
   color: #ffcb6b;
 }
 
-.cm-s-paper .cm-atom {
+.cm-s-default .cm-atom {
   color: #f78c6c;
 }
 
-.cm-s-paper .cm-number {
+.cm-s-default .cm-number {
   color: #ff5370;
 }
 
-.cm-s-paper .cm-def {
+.cm-s-default .cm-def {
   color: #82aaff;
 }
 
-.cm-s-paper .cm-string {
+.cm-s-default .cm-string {
   color: #c3e88d;
 }
 
-.cm-s-paper .cm-string-2 {
+.cm-s-default .cm-string-2 {
   color: #f07178;
 }
 
-.cm-s-paper .cm-comment {
+.cm-s-default .cm-comment {
   color: #545454;
 }
 
-.cm-s-paper .cm-variable {
+.cm-s-default .cm-variable {
   color: #f07178;
 }
 
-.cm-s-paper .cm-tag {
+.cm-s-default .cm-tag {
   color: #ff5370;
 }
 
-.cm-s-paper .cm-meta {
+.cm-s-default .cm-meta {
   color: #ffcb6b;
 }
 
-.cm-s-paper .cm-attribute {
+.cm-s-default .cm-attribute {
   color: #c792ea;
 }
 
-.cm-s-paper .cm-property {
+.cm-s-default .cm-property {
   color: #c792ea;
 }
 
-.cm-s-paper .cm-qualifier {
+.cm-s-default .cm-qualifier {
   color: #decb6b;
 }
 
-.cm-s-paper .cm-variable-3,
-.cm-s-paper .cm-type {
+.cm-s-default .cm-variable-3,
+.cm-s-default .cm-type {
   color: #decb6b;
 }
 
-.cm-s-paper .cm-error {
+.cm-s-default .cm-error {
   color: rgba(255, 255, 255, 1);
   background-color: #ff5370;
 }
 
-.cm-s-paper .CodeMirror-matchingbracket {
+.cm-s-default .CodeMirror-matchingbracket {
   text-decoration: underline;
   color: white !important;
 }

dark-theme.css

@@ -321,6 +321,9 @@ span.ui.basic.yellow.label {
 .repository.file.list #repo-files-table tr:hover {
   background-color: #373b41;
 }
+.repository.file.list #file-content .code-view .lines-code ol {
+  background-color: #282a2e;
+}
 .ui.breadcrumb a {
   color: #81a2be;
 }
@@ -518,6 +521,12 @@ span.ui.basic.yellow.label {
 .repository .diff-file-box .code-diff tbody tr.del-code td {
   background-color: rgba(204, 102, 102, 0.1) !important;
 }
+.repository .diff-file-box .code-diff tbody tr.del-code td.add-code {
+  background-color: rgba(204, 102, 102, 0.1) !important;
+}
+.repository .diff-file-box .code-diff tbody tr.del-code td.add-code pre {
+  background-color: rgba(204, 102, 102, 0.1) !important;
+}
 .ui.secondary.pointing.menu a.item:hover {
   background-color: #282a2e;
   color: #e0e0e0 !important;