release v3.0

This commit is contained in:
pat-s 2022-08-22 12:55:26 +02:00
parent 1bd187680f
commit aff576e893
No known key found for this signature in database
GPG key ID: 3C6318841EF78925
8 changed files with 1626 additions and 40 deletions

View file

@ -1,10 +1,12 @@
# gitea-github-theme
Opinionated GitHub-based light and dark themes for Gitea
Created and tested with Gitea v1.15.
**Opinionated** GitHub-based light and dark themes for Gitea including an automatic theme switch option.
Created and tested with Gitea v1.15 - 1.17.
The theme might work with future versions though Gitea devs might change some CSS classes in the meantime and things might potentially look odd - just try yourself :)
I might update the theme over time to fix oversights and other issues - no guarantee though.
## Installation
1. If you do not have admin access to a Gitea instance, you can use the [Stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne/related) browser extension and use the CSS provided in this repo for the Gitea URL
@ -14,16 +16,67 @@ I might update the theme over time to fix oversights and other issues - no guara
3. Now users can select this theme in their settings under "account"
4. (optional) If you want to make this theme the default of your instance, set it in `DEFAULT_THEME` in `app.ini`
## Using automatic theme switching based on system preference
To use automatic theme switching, add `theme-github-auto.css` into your respective `themes` folder as described above.
This file contains both light and dark styles and selects the respective one based on the system preference selected by the user via the `@media (prefers-color-scheme:` CSS selector (tested on macOS).
For some reasons using `@imports` does not work and hence the file contains the c/p content of both the light and dark themes together.
If this is somehow possible and I did not managed to get it configured, please let me know!
## Changes to default Gitea theme
- Aligned primary green, grey, red and blue colors with GitHub
- Aligned `border-radius` with GitHub
- Related theme by removing a lot of hover colors and dominant button background-colors
- Aligned markup background to GitHub's value
- Decreased navbar height and font size
- Many small overrides of colors and font-sizes
## Helm chart instructions
To use custom themes with the [Gitea helm chart](https://gitea.com/gitea/helm-chart):
1. Create a secret containing the CSS files (here's an example via `terraform`, plain k8s secrets will also work)
```hcl
resource "kubernetes_secret" "gitea-themes" {
metadata {
name = "gitea-themes"
namespace = "gitea"
}
data = {
"theme-github.css" = "${file("files/gitea/gitea-github-theme-light.css")}"
"theme-github-dark.css" = "${file("files/gitea/gitea-github-theme-dark.css")}"
"theme-github-auto.css" = "${file("files/gitea/gitea-github-theme-auto.css")}"
}
type = "Opaque"
}
```
2. Mount the secret via `extraVolumes` in `values.yaml`:
```yml
extraVolumes:
- name: gitea-themes
secret:
secretName: gitea-themes
```
3. Add the theme options into the config in `values.yaml`:
```yml
gitea:
config:
ui:
DEFAULT_THEME: github-auto
THEMES: auto,gitea,arc-green,github,github-dark,github-auto
```
## Screenshots
| | |
| :----------------------------: | :----------------------------: |
| ![](figs/screenshot1.png) | ![](figs/screenshot2.png) |
| ![](figs/screenshot-dark1.png) | ![](figs/screenshot-dark2.png) |
![](figs/screenshot1.png)
![](figs/screenshot-dark1.png)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 230 KiB

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

1186
theme-github-auto.css Normal file

File diff suppressed because it is too large Load diff

View file

@ -1,5 +1,6 @@
:root {
--color-primary: #347d39;
--color-secondary: #535865;
--border-radius: 6px;
--color-body: #373e47;
--color-navbar: #22272e;
@ -12,14 +13,21 @@
--color-light: #22272e;
--color-button: #22272e;
--color-input-background: #22272e;
--color-input-border-hover: #8e8c8c;
--color-input-text: #adbac7;
--color-box-header: #22272e;
--color-active: #22272e;
--color-menu: #22272e;
--color-secondary: #454a57;
--color-caret: var(--color-text);
/* allows gitea to detect dark themes and changes the monaco code editor colors to dark ones */
--is-dark-theme: true;
--color-blue: #539bf5;
--color-input-background: #22272e;
/* code editor colors are set in https://github.com/go-gitea/gitea/blob/f5b300ea77081a1b78ac044cb1c0f9225538d091/web_src/js/features/codeeditor.js#L82-L97. */
/* monaco editor dark theme is toggled via variable `--is-dark-theme` */
--color-primary-light-3: #71798e;
--color-editor-line-highlight: #71798e;
--color-code-bg: var(--color-input-background);
}
.ui.list .list > .item > .content,
@ -66,28 +74,33 @@
.ui.green.buttons .button,
.ui.green.button {
background-color: #347d39;
color: #fff !important;
color: #ffffffe6 !important;
}
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
color: #768390;
}
a,
.ui.breadcrumb a {
/* color: var(--color-text); */
color: #539bf5;
color: var(--color-blue);
}
.repo-title a {
color: #539bf5 !important;
color: var(--color-blue) !important;
}
.ui.table > thead > tr > th {
background: #636e7b1a;
color: #dbdbdb !important;
}
.repository.file.list #repo-files-table tr {
background: #22272e;
}
.repo-icon {
display: inline-block;
transform: scale(0.75);
@ -95,7 +108,7 @@ a,
}
.repository.file.list #file-buttons .ui.button {
color: #fff !important;
color: #ffffffe6 !important;
}
.ui.basic.green.button,
@ -106,24 +119,28 @@ a,
box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15) !important;
color: #dbdbdb !important;
}
.ui.basic.green.button:focus,
.ui.basic.green.buttons .button:focus,
.ui.basic.primary.button:focus,
.ui.basic.primary.buttons .button:focus {
box-shadow: inset 0 0 0 0px #808080 !important;
}
.ui.basic.green.button:hover,
.ui.basic.green.buttons .button:hover,
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover {
background-color: #22272e !important;
}
.ui.basic.green.button:hover,
.ui.basic.green.buttons .button:hover,
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover {
box-shadow: inset 0 0 0 0px #808080 !important;
}
.issue.list {
list-style: none;
margin-top: 1rem;
@ -131,22 +148,28 @@ a,
border-radius: 6px;
padding: 3px 10px 3px 10px;
}
.ui.menu .item {
background-color: #22272e;
}
.ui.horizontal.segments > .segment {
background-color: #22272e;
border-radius: 6px;
}
.ui.attached.header {
border-radius: 6px;
}
.repository.file.list .repo-description {
color: #adbac7;
}
.commit-summary a.default-link {
color: #adbac7 !important;
}
.markup h1,
.markup h2,
.markup h3,
@ -155,10 +178,12 @@ a,
.markup h6 {
color: #adbac7;
}
.markup code,
.markup tt {
color: #adbac7;
}
.markup p,
.markup blockquote,
.markup details,
@ -169,32 +194,41 @@ a,
.markup pre {
color: #adbac7;
}
.repo-list-link {
color: #539bf5 !important;
color: var(--color-blue) !important;
}
.ui.menu.two.item .item {
border: 1px solid var(--color-secondary);
}
a,
.push.news {
color: null;
}
.ui.header {
color: #a6aab5;
}
.repo-description {
color: #a6aab5 !important;
}
a.ui.label {
/* color: #adbac7 !important; */
border-color: var(--color-secondary) !important;
}
.ui.label {
border-color: var(--color-secondary) !important;
}
.ui.menu .item {
color: #adbac7;
}
.ui .sha.label {
padding: 6px 10px 6px;
}
@ -273,15 +307,11 @@ textarea,
border-color: var(--color-secondary);
}
/* right border of "find repository" field */
.ui.action.input:not([class*="left action"]) > input {
border-right-color: var(--color-light);
}
/* background color of code display */
.lines-code {
background-color: #22272e;
}
.code-diff-unified .add-code,
.code-diff-unified .add-code td,
.code-diff-split .add-code .lines-num-new,
@ -292,6 +322,7 @@ textarea,
.code-diff-split .del-code .add-code.lines-code-new {
background: #224035;
}
.tag-code,
.tag-code td {
background-color: var(--color-body);
@ -315,8 +346,9 @@ textarea,
}
.chroma .nb {
color: #539bf5;
color: var(--color-blue);
}
.chroma .nx {
color: var(--color-text);
}
@ -324,24 +356,31 @@ textarea,
.chroma .nv {
color: #08dddd;
}
.chroma .si {
color: #8ddb8c;
}
.chroma .nt {
color: #50eb75;
}
.chroma .nd {
color: #c4cfcf;
}
.chroma .o {
color: #eb3243;
}
.chroma .nc {
color: #16e9e9;
}
.chroma .nn {
color: #16e9e9;
}
.chroma .s {
color: #8ddb8c;
}
@ -357,7 +396,8 @@ textarea,
}
.repository.file.list #repo-files-table td a {
color: #7f8699 !important;
/* color: #7f8699 !important; */
color: var(--color-blue) !important;
}
/* gpg commit label */
@ -384,6 +424,7 @@ textarea,
.ui.basic.label:not(.tag):not(.image):not(.ribbon) {
color: #adbac7;
}
.repo-buttons .ui.labeled.button.disabled > .label {
color: #adbac7;
}
@ -393,10 +434,12 @@ textarea,
background-color: #22272e;
color: var(--color-text);
}
.ui.warning.message,
.ui.attached.warning.message {
box-shadow: null;
}
.ui.warning.message,
.ui.attached.warning.message {
box-shadow: 0 0 0 0px #c9ba9b inset, 0 0 #0000;
@ -414,11 +457,12 @@ textarea,
.ui.positive.message {
background-color: #22272e;
color: #fff;
color: #ffffffe6;
}
.ui.positive.message,
.ui.attached.positive.message {
box-shadow: 0 0 0 1px #2c662d inset, 0 0 #0000;
box-shadow: 0 0 0 1px #347d39 inset, 0 0 #0000;
}
/* diff color deletion */
@ -439,6 +483,7 @@ textarea,
.lines-type-marker {
background-color: var(--color-navbar);
}
a.blob-excerpt {
background: var(--color-body);
}
@ -455,6 +500,7 @@ a.blob-excerpt {
.ui.form .field .dropdown .menu > .item {
background-color: var(--color-navbar);
}
.comment-code-cloud {
background-color: var(--color-navbar);
}
@ -484,21 +530,28 @@ a.blob-excerpt {
.user.profile .ui.card #profile-avatar {
background: var(--color-navbar);
}
.ui.cards > .card > .content,
.ui.card > .content {
background: var(--color-navbar);
}
.user.profile .ui.card .extra.content ul li:not(:last-child) {
border-bottom: 1px solid var(--color-secondary);
background-color: var(--color-navbar);
}
.user.profile .ui.card .extra.content ul li {
background-color: var(--color-navbar);
}
/* right border of profile search bar */
.ui.action.input:not([class*="left action"]) > input {
border-right-color: var(--color-text);
border-right-color: var(--color-secondary);
}
.ui.action.input:not([class*="left action"]) > input:focus {
border-right-color: var(--color-secondary);
}
/* font color line numbers */
@ -519,14 +572,17 @@ a.blob-excerpt {
.ui .info.segment.top {
background-color: var(--color-navbar) !important;
}
.repository .ui.attached.isSigned.isVerified.top,
.repository .ui.attached.isSigned.isVerified.message {
border-top: 0px solid var(--color-text);
}
.repository .ui.attached.isSigned.isVerified {
border-left: 0px solid var(--color-text);
border-right: 0px solid var(--color-text);
}
.repository .ui.attached.isSigned.isVerified:last-child,
.repository .ui.attached.isSigned.isVerified.bottom {
border-bottom: 0px solid #a3c293;
@ -542,6 +598,7 @@ a.blob-excerpt {
.repository.view.issue .comment-list .timeline-item .badge .svg {
fill: black;
}
.repository.view.issue .comment-list .timeline-item .badge {
background-color: var(--color-navbar);
color: var(--color-text);
@ -549,13 +606,16 @@ a.blob-excerpt {
height: 30px;
margin-left: -31px;
}
.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
border-color: var(--color-navbar);
background: var(--color-navbar);
}
.repository.view.issue .comment-list .timeline:before {
background-color: var(--color-secondary);
}
.repository.view.issue .comment-list .timeline-item .badge .svg {
width: 20px;
height: 20px;
@ -570,6 +630,7 @@ input {
background: #b70f22;
color: var(--color-text);
}
.added-code {
background: #0d8b2c;
color: var(--color-text);
@ -586,9 +647,11 @@ input {
.bg-green {
background: var(--color-primary) !important;
}
i.green.icon.icon.icon.icon {
color: var(--color-primary);
}
span.green .svg {
color: var(--color-primary);
}
@ -599,9 +662,141 @@ span.green .svg {
border-radius: 6px;
background: #000000 !important;
}
.ui.ui.ui.ui.table tr.active,
.ui.ui.table td.active {
box-shadow: 0 0 #000000de inset;
background: #e0e0e0;
color: --var(--color-text);
}
/* navbar font size */
.ui.secondary.menu .item {
font-size: 13px;
}
#navbar .item {
margin: 0;
padding: 0.5em;
font-size: 14px;
}
.following.bar #navbar {
width: 100vw;
/* default 52px */
min-height: 40px;
padding: 0 0.5rem;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 6px var(--color-navbar);
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 0 6px var(--color-text);
}
.following.bar #navbar .brand {
margin-top: -2px;
}
/* border colors of search fields, e.g. "find repository" on main page */
input:hover,
textarea:hover,
.ui.input input:hover,
.ui.form input:not([type]):hover,
.ui.form select:hover,
.ui.form textarea:hover,
.ui.form input[type="date"]:hover,
.ui.form input[type="datetime-local"]:hover,
.ui.form input[type="email"]:hover,
.ui.form input[type="file"]:hover,
.ui.form input[type="number"]:hover,
.ui.form input[type="password"]:hover,
.ui.form input[type="search"]:hover,
.ui.form input[type="tel"]:hover,
.ui.form input[type="text"]:hover,
.ui.form input[type="time"]:hover,
.ui.form input[type="url"]:hover,
.ui.selection.dropdown:hover,
.ui.checkbox label:hover:before,
.ui.checkbox label:active:before,
.ui.radio.checkbox label:after,
.ui.radio.checkbox input:focus ~ label:before,
.ui.radio.checkbox input:checked ~ label:before {
border-color: var(--color-secondary);
}
a:hover,
a.muted:hover,
.ui.breadcrumb a:hover {
color: var(--color-blue);
}
input:focus,
textarea:focus,
.ui.input input:focus,
.ui.form input:not([type]):focus,
.ui.form select:focus,
.ui.form textarea:focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.selection.dropdown:focus,
.ui.checkbox input:focus ~ label:before,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before,
.ui.checkbox input:checked:focus ~ label:before,
.ui.radio.checkbox input:focus:checked ~ label:before {
border-color: var(--color-secondary);
}
.repo-icon {
display: none;
}
/* reduce navbar bottom margin */
.ui.ui.ui.container:not(.fluid) {
margin-bottom: -3px;
}
.ui.green.button {
padding: 5px 16px;
line-height: 20px;
}
.ui.green.labels .label,
.ui.ui.ui.green.label {
padding: 5px 16px;
line-height: 20px;
}
.ui.tabular.menu .active.item {
margin-bottom: 2px;
}
/* repository icon for directories */
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
color: #768390;
}
.ui.secondary.pointing.menu .item > .circular.label {
line-height: 10px;
}
.ui.grey.labels .label,
.ui.ui.ui.grey.label {
line-height: 10px;
}
.ui.primary.label,
.ui.primary.labels .label {
background-color: #768390 !important;
}

View file

@ -6,6 +6,7 @@
--color-markup-code-block: #f6f8fa;
--color-hover: none;
--color-purple: #8250df;
--color-green: #1a7f37;
}
.ui.label {
padding: 0.3em 0.5em;
@ -36,12 +37,12 @@
}
.ui.green.buttons .button,
.ui.green.button {
background-color: #2da44e;
background-color: #1a7f37;
color: #fff !important;
}
.ui.green.labels .label,
.ui.ui.ui.green.label {
background-color: #2da44e;
background-color: #1a7f37;
color: #fff !important;
}
.ui.label {
@ -59,10 +60,6 @@
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
color: #54aeff;
}
a,
.ui.breadcrumb a {
color: var(--color-text) !important;
}
.repo-title a {
color: var(--color-primary) !important;
}
@ -135,6 +132,7 @@ a.muted:hover,
.ui.basic.red.buttons .button,
.ui.basic.red.button {
color: #cf222e !important;
font-weight: 500;
}
* {
scrollbar-width: thin;
@ -166,23 +164,36 @@ a.ui.label {
}
.ui.basic.green.buttons .button,
.ui.basic.green.button {
color: #2da44e !important;
color: #1a7f37 !important;
}
.ui.basic.labels .label,
.ui.basic.label {
color: var(--color-text) !important;
}
.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon, .repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon, .repository #rev-list .sha.label.isSigned.isVerified .detail.icon, .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified .detail.icon {
border-left: 1px solid #2da44e;
color: #2da44e;
.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon,
.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon,
.repository #rev-list .sha.label.isSigned.isVerified .detail.icon,
.repository
.timeline-item.commits-list
.singular-commit
.sha.label.isSigned.isVerified
.detail.icon {
border-left: 1px solid #1a7f37;
color: #1a7f37;
}
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified {
border: 1px solid #2da44e;
.repository.view.issue
.comment-list
.timeline-item.commits-list
.singular-commit
.shabox
.sha.label.isSigned.isVerified {
border: 1px solid #1a7f37;
}
.ui.labeled.icon.buttons>.button>.icon, .ui.labeled.icon.button>.icon {
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
border-right: 1px solid var(--color-secondary);
}
@ -194,10 +205,12 @@ a.ui.label {
.repository .ui.attached.isSigned.isVerified.message .ui.text {
color: black;
}
.repository .ui.attached.isSigned.isVerified:last-child, .repository .ui.attached.isSigned.isVerified.bottom {
.repository .ui.attached.isSigned.isVerified:last-child,
.repository .ui.attached.isSigned.isVerified.bottom {
border-bottom: 1px solid #21ba45;
}
.repository .ui.attached.isSigned.isVerified.top, .repository .ui.attached.isSigned.isVerified.message {
.repository .ui.attached.isSigned.isVerified.top,
.repository .ui.attached.isSigned.isVerified.message {
border-top: 1px solid var(--color-secondary);
}
.repository .ui.attached.isSigned.isVerified {
@ -214,3 +227,142 @@ a.ui.label {
.ui .info.segment.top {
background-color: var(--color-navbar) !important;
}
.repo-icon {
display: none;
}
/* navbar font size */
.ui.secondary.menu .item {
font-size: 13px;
}
#navbar .item {
margin: 0;
padding: 0.5em;
font-size: 14px;
color: black !important;
}
.following.bar #navbar {
width: 100vw;
/* default 52px */
min-height: 40px;
padding: 0 0.5rem;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 6px var(--color-navbar);
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 0 6px var(--color-text);
}
.following.bar #navbar .brand {
margin-top: -2px;
}
/* reduce navbar bottom margin */
.ui.ui.ui.container:not(.fluid) {
margin-bottom: -3px;
}
/* Link color for repo breadcrumbs */
a,
.ui.breadcrumb a {
color: var(--color-primary) !important;
}
/* color for repo menu bar to overwrite link color */
.ui.tabular.menu .item {
color: var(--color-text) !important;
}
.repository .ui.segment.sub-menu .list .item a {
color: var(--color-text) !important;
}
.ui .menu:not(.vertical) .item > .button.compact {
color: var(--color-text) !important;
}
.ui.labeled.button.disabled > .button,
.ui.basic.buttons .button,
.ui.basic.button {
color: var(--color-text-light) !important;
}
#manage_topic {
font-size: 12px;
color: var(--color-text) !important;
}
.ui.menu .item {
color: var(--color-text) !important;
}
/* font weight of "danger zone" buttons in "delete repo" */
.ui.label {
background: rgba(175, 184, 193, 0.2);
}
.comment-header .actions a {
color: black !important;
}
.ui.dropdown > .text {
color: black !important;
}
.repository.compare.pull .choose.branch .svg {
color: black !important;
}
a.muted {
color: black !important;
}
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
color: #54aeff !important;
}
.repository.file.list #repo-files-table td a {
color: black !important;
}
.ui.negative.buttons .button,
.ui.negative.button {
background-color: none;
color: #db2828;
}
.ui.green.button {
padding: 5px 16px;
line-height: 20px;
}
.ui.green.labels .label,
.ui.ui.ui.green.label {
padding: 5px 16px;
line-height: 20px;
}
.ui.tabular.menu .active.item {
margin-bottom: 2px;
}
.ui.menu .item > .label:not(.floating) {
padding: 0 6px;
line-height: 18px;
}
.ui.secondary.pointing.menu .item > .circular.label {
line-height: 10px;
}
.ui.grey.labels .label,
.ui.ui.ui.grey.label {
line-height: 10px;
}