2 Commits

Author SHA1 Message Date
pat-s
b0f4f6a4f6 add dark theme 2021-08-30 20:20:52 +02:00
pat-s
610a3e8dab fix font color in issue labels 2021-08-30 08:51:51 +02:00
5 changed files with 186 additions and 40 deletions

View File

@@ -1,5 +1,5 @@
# gitea-github-theme
An opinionated GitHub-based theme for Gitea
Opinionated GitHub-based light and dark themes for Gitea
Created and tested with Gitea v1.15.
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 :)
@@ -26,4 +26,4 @@ I might update the theme over time to fix oversights and other issues - no guara
| | |
| :-----------------------: | :-----------------------: |
| ![](figs/screenshot1.png) | ![](figs/screenshot2.png) |
| | |
| ![](figs/screenshot-dark1.png) | ![](figs/screenshot-dark2.png) ||

BIN
figs/screenshot-dark1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
figs/screenshot-dark2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

143
theme-github-dark.css Normal file
View File

@@ -0,0 +1,143 @@
:root {
--color-primary: #347d39;
--border-radius: 6px;
--color-body: #373e47;
--color-navbar: #22272e;
--color-footer: #22272e;
--color-text-light-2: #adbac7;
--color-text: #768390;
--color-box-body: #22272e;
--color-markup-code-block: #636e7b66;
--color-light: #22272e;
--color-button: #22272e;
--color-input-background: #22272e;
--color-box-header: #22272e;
--color-active: #22272e;
}
.ui.green.buttons .button,
.ui.green.button {
background-color: #347d39;
color: #fff !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) !important;
}
.repo-title a {
color: #539bf5 !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);
margin-right: -0.05rem !important;
}
.repository.file.list #file-buttons .ui.button {
color: #fff !important;
}
.ui.basic.green.button,
.ui.basic.green.buttons .button,
.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
background-color: #22272e !important;
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;
background-color: #22272e;
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,
.markup h4,
.markup h5,
.markup h6 {
color: #adbac7;
}
.markup code,
.markup tt {
color: #adbac7;
}
.markup p,
.markup blockquote,
.markup details,
.markup ul,
.markup ol,
.markup dl,
.markup table,
.markup pre {
color: #adbac7;
}
.repo-list-link {
color: #539bf5 !important;
}
.ui.menu.two.item .item {
border: 1px solid var(--color-secondary);
}
a,
.push.news {
color: #a6aab5 !important;
}
.ui.header {
color: #a6aab5;
}
.repo-description {
color: #a6aab5 !important;
}
a.ui.label {
color: #adbac7 !important;
}
.ui.menu .item {
color: #adbac7;
}

View File

@@ -8,7 +8,7 @@
--color-purple: #8250df;
}
.ui.label {
padding: .3em .5em;
padding: 0.3em 0.5em;
background: var(--color-light);
color: var(--color-text-light);
border-radius: 6px;
@@ -17,35 +17,35 @@
.ui.blue.labels .label,
.ui.primary.label,
.ui.primary.labels .label {
border-color: var(--color-light)!important;
background-color: #afb8c133!important;
border-color: var(--color-light) !important;
background-color: #afb8c133 !important;
border-radius: 6px;
color: #24292f!important;
color: #24292f !important;
}
.ui.blue.button,
.ui.blue.buttons .button,
.ui.primary.button,
.ui.primary.buttons .button {
background-color: #f6f8fa!important;
color: #24292f!important;
background-color: #f6f8fa !important;
color: #24292f !important;
}
.repo-icon {
display: inline-block;
transform: scale(0.75);
margin-right: -0.05rem!important;
margin-right: -0.05rem !important;
}
.ui.green.buttons .button,
.ui.green.button {
background-color: #2da44e;
color: #fff!important
color: #fff !important;
}
.ui.green.labels .label,
.ui.ui.ui.green.label {
background-color: #2da44e;
color: #fff!important
color: #fff !important;
}
.ui.label {
padding: .5em .5em;
padding: 0.5em 0.5em;
}
.ui.basic.green.buttons .button,
.ui.basic.green.button {
@@ -60,100 +60,103 @@
}
a,
.ui.breadcrumb a {
color: var(--color-text)!important;
color: var(--color-text) !important;
}
.repo-title a {
color: var(--color-primary)!important
color: var(--color-primary) !important;
}
.ui.basic.blue.button,
.ui.basic.blue.buttons .button,
.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
background-color: #fff!important;
box-shadow: inset 0 0 0 1px rgba(34, 36, 38, .15)!important;
color: var(--color-text)!important;
}
background-color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(34, 36, 38, 0.15) !important;
color: var(--color-text) !important;
}
.ui.basic.blue.button:focus,
.ui.basic.blue.buttons .button:focus,
.ui.basic.primary.button:focus,
.ui.basic.primary.buttons .button:focus {
box-shadow: inset 0 0 0 0px #808080!important;
box-shadow: inset 0 0 0 0px #808080 !important;
}
.ui.basic.blue.button:hover,
.ui.basic.blue.buttons .button:hover,
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover {
background-color: #fff!important;
background-color: #fff !important;
}
ui.basic.blue.button:hover,
.ui.basic.blue.buttons .button:hover,
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover {
box-shadow: inset 0 0 0 0px #808080!important;
box-shadow: inset 0 0 0 0px #808080 !important;
}
a:hover,
a.muted:hover,
.ui.breadcrumb a:hover {
color: none;
color: none;
}
.ui.tabular.menu .item:hover {
color: none;
color: none;
}
.ui.basic.labels .label,
.ui.basic.label {
background-color: #fff;
background-color: #fff;
}
.ui.labeled.button.disabled > .button,
.ui.basic.buttons .button,
.ui.basic.button {
background-color: #f6f8fa;
background-color: #f6f8fa;
}
.ui.blue.button:hover,
.ui.blue.buttons .button:hover,
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
background-color: var(--color-hover)!important;
background-color: var(--color-hover) !important;
}
.repository .ui.segment.sub-menu .list .item a:hover {
color: var(--color-text)!important;
color: var(--color-text) !important;
}
.repo-buttons .ui.labeled.button > .label:hover {
color: var(--color-text)!important;
color: var(--color-text) !important;
}
.repository.file.list #repo-files-table tr:hover {
background-color: #f6f8fa!important
background-color: #f6f8fa !important;
}
.ui .error.header {
background-color: #cf222e!important;
color: #fff!important;
background-color: #cf222e !important;
color: #fff !important;
}
.ui.red.buttons .button,
.ui.red.button {
color: #fff!important;
color: #fff !important;
}
.ui.basic.red.buttons .button,
.ui.basic.red.button {
color: #cf222e!important;
color: #cf222e !important;
}
* {
scrollbar-width: thin;
scrollbar-color: #f6f8fa transparent !important;
scrollbar-width: thin;
scrollbar-color: #f6f8fa transparent !important;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 6px #808080 !important;
box-shadow: inset 0 0 0 6px #808080 !important;
}
.ui.purple.labels .label,
.ui.ui.ui.purple.label {
background-color: #8250df!important;
background-color: #8250df !important;
}
.repository #clone-panel input {
background-color: #f6f8fa
background-color: #f6f8fa;
}
.ui.basic.green.buttons .button,
.ui.basic.green.button {
color: var(--color-text)!important;
color: var(--color-text) !important;
}
ul.repo-owner-name-list {
font-size: 13px;
font-size: 13px;
}
a.ui.label {
cursor: pointer;
color: #fff !important;
}