git clone github.com/sb-child/gitea-theme-github-dark

This commit is contained in:
scriptos 2024-03-23 20:40:55 +01:00
parent 6257c9d987
commit fe26f49310
2 changed files with 716 additions and 7 deletions

View File

@ -1,15 +1,44 @@
# template_repository # gitea-theme-github-dark
## This is a Fork of [sb-child](https://github.com/sb-child/gitea-theme-github-dark)
This Gitea theme mimics the appearance of GitHub's dark theme for a familiar and visually pleasing experience.
## Preview
Wichtig: Link für Lizenz anpassen. ![图片](https://github.com/sb-child/gitea-theme-github-dark/assets/55868015/2dd4033f-ebcd-4fdf-af2f-fcd16cce3740)
## How to use
<p align="center">
<img src="https://assets.media-techport.de/f1/git/graphics/gray0-catonline.svg" alt=""> 1. Copy the theme-ghdark.css file to /path/to/gitea/custom/public/assets/css/theme-ghdark.css.
2. Modify the Gitea configuration file located at /path/to/gitea/custom/conf/app.ini.
```ini
[ui]
THEMES = auto,gitea,arc-green,ghdark ; <- Add "ghdark" here
DEFAULT_THEME = ghdark ; <- Change the default theme to "ghdark"
```
3. Restart Gitea.
4. Select the "ghdark" theme from your preferences.
5. Enjoy the GitHub-like experience!
<p align="center">
<img src="https://assets.media-techport.de/f1/git/graphics/gray0-catonline.svg" alt="">
</p> </p>
<p align="center">
<img src="https://assets.media-techport.de/f1/logos/small/license.png" alt="License" width="15" height="15"> <a href="./template_repository/src/branch/main/LICENSE">License</a> | <img src="https://assets.media-techport.de/f1/logos/small/matrix2.svg" alt="Matrix" width="15" height="15"> <a href="https://matrix.to/#/#community:matrix.media-techport.de">Matrix</a> | <img src="https://assets.media-techport.de/f1/logos/small/mastodon2.svg" alt="Matrix" width="15" height="15"> <a href="https://social.media-techport.de/@donnerwolke">Mastodon</a>
</p> <p align="center">
<img src="https://assets.media-techport.de/f1/logos/small/license.png" alt="License" width="15" height="15"> <a href="./scriptos/gitea-theme-techport-dark/src/branch/main/LICENSE">License</a> | <img src="https://assets.media-techport.de/f1/logos/small/matrix2.svg" alt="Matrix" width="15" height="15"> <a href="https://matrix.to/#/#community:matrix.media-techport.de">Matrix</a> | <img src="https://assets.media-techport.de/f1/logos/small/mastodon2.svg" alt="Matrix" width="15" height="15"> <a href="https://social.media-techport.de/@donnerwolke">Mastodon</a>
</p>

680
theme-ghdark.css Normal file
View File

@ -0,0 +1,680 @@
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInFromLeft {
from {
transform: translateX(-50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInFromRight {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInFromBottom {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.following.bar.light {
background: var(--color-menu) none repeat scroll 0% 0%;
border-color: var(--black-color);
}
footer {
opacity: 0.5;
transition: opacity 0.1s ease 0s;
}
footer:hover {
opacity: 0.9;
}
.dashboard.feeds .right.stackable.menu > .item.active,
.dashboard.issues .right.stackable.menu > .item.active {
color: var(--color-primary);
}
.repository.file.list #repo-files-table tr {
background: var(--color-box-header);
}
.repository #clone-panel input {
text-overflow: ellipsis;
overflow: hidden;
}
.repository.file.list #repo-files-table thead th {
background-color: var(--color-box-body);
}
:root {
color-scheme: dark;
--is-dark-theme: true;
--black-color: #000000;
--color-body: #0d1117;
--color-card: #0d1117;
--color-box-header: #0d1117;
--color-box-body: #161b22;
--color-active: #30363b;
--color-menu: #010409;
--color-navbar: #010409;
--color-nav-bg: #010409;
--color-footer: #0d1117;
--color-header-wrapper: #010409;
--color-input-background: #010409;
--color-diff-removed-row-bg: rgba(248, 81, 73, 0.15);
--color-diff-added-row-bg: rgba(46, 160, 67, 0.15);
--color-expand-button: rgba(56, 139, 253, 0.4);
--color-diff-inactive: rgba(24, 24, 26, 0.1);
--color-primary: #58a6ff;
--color-primary-dark-1: #3392ff;
--color-primary-dark-2: #6db1ff;
--color-primary-dark-3: #81bcff;
--color-primary-dark-4: #a4ceff;
--color-primary-dark-5: #bddcff;
--color-primary-dark-6: #d8eaff;
--color-primary-dark-7: #f8fbff;
--color-primary-light-1: #4f94e3;
--color-primary-light-2: #4483ca;
--color-primary-light-3: #3669a4;
--color-primary-light-4: #274b75;
--color-primary-light-5: #203c5b;
--color-primary-light-6: #101f2f;
--color-primary-light-7: #08101a;
--color-primary-light-extra: #1f6feb;
--color-primary-alpha-10: #58a6ff19;
--color-primary-alpha-20: #58a6ff33;
--color-primary-alpha-30: #58a6ff4b;
--color-primary-alpha-40: #58a6ff66;
--color-primary-alpha-50: #58a6ff80;
--color-primary-alpha-60: #58a6ff99;
--color-primary-alpha-70: #58a6ffb3;
--color-primary-alpha-80: #58a6ffcc;
--color-primary-alpha-90: #58a6ffe1;
--color-secondary: #30363d;
--color-text-muted: #7d8590;
--color-text: rgb(230, 237, 243);
--color-text-light: rgb(230, 237, 243);
--color-input-text: rgb(230, 237, 243);
--color-error-text: rgb(248, 81, 73);
--color-error-border: rgba(248, 81, 73, 0.5);
--color-nav-hover-bg: rgba(177, 186, 196, 0.12);
--color-hover: rgba(177, 186, 196, 0.12);
--color-button: #21262d;
--color-secondary-alpha-60: #161b22;
--color-secondary-alpha-50: #21262d;
--color-label-bg: rgb(33, 38, 45);
--color-label-hover-bg: rgba(177, 186, 196, 0.12);
--color-label-text: rgb(230, 237, 243);
--color-caret: rgb(230, 237, 243);
--color-active-line: #222c40;
--color-button-red: #d23636;
--color-button-hover: #e35353;
--color-green-label: #238636;
--color-green-label-hover: #2ea043;
}
.ui.menu {
margin: 0px;
}
.navbar-left {
flex: 1 1 auto;
}
#navbar {
min-height: 64px;
}
.navbar-right {
flex: 0 1 auto;
padding-right: 11px;
}
.ui.secondary.menu {
margin-left: 0;
margin-right: 0;
}
.labels > .ui.label {
height: 20px;
line-height: 0.6;
border-radius: 10px !important;
background-color: transparent;
border: 1px solid var(--color-secondary);
color: var(--color-text-muted);
}
.tippy-box {
color: var(--color-text);
background-color: var(--color-text-muted) !important;
}
/* .tippy-svg-arrow-outer {
fill:var(--color-text-muted) !important;
} */
.tippy-svg-arrow-inner {
fill: var(--color-text-muted) !important;
}
.ui.segment,
.ui.segments,
.ui.attached.segment {
background: var(--color-box-header);
}
.repository.file.list #repo-files-table tr:hover {
background-color: var(--color-box-body);
}
.repository.new.issue .comment.form .content::after {
border-right-color: var(--color-body);
}
.ui.segment .ui.tabular.menu .active.item,
.ui.segment .ui.tabular.menu .active.item:hover {
background: var(--color-body);
}
markdown-toolbar svg {
color: var(--color-text-muted);
}
markdown-toolbar svg:hover {
color: var(--color-primary);
}
.ui.tabular.menu .active.item {
margin-bottom: -1px;
}
.ui.grey.labels .label,
.ui.ui.ui.grey.label {
background-color: rgb(45, 45, 45);
}
.ui.red.labels .label,
.ui.ui.ui.red.label {
background-color: var(--color-error-text);
}
.ui.secondary.menu .item {
transition: color, background 0.1s ease 0s;
}
.feeds .list ul li.private {
background: var(--color-input-background) none repeat scroll 0% 0%;
}
.ui.green.button,
.ui.green.buttons .button {
background-color: var(--color-green-label);
}
.ui.green.button:hover,
.ui.green.buttons .button:hover {
background-color: var(--color-green-label-hover);
}
.ui.red.button,
.ui.red.buttons .button {
background-color: var(--color-button-red);
}
.ui.red.button:hover,
.ui.red.buttons .button:hover {
background-color: var(--color-button-hover);
}
.ui.green.label,
.ui.green.labels .label,
.ui.basic.green.label {
background-color: var(--color-green-label);
}
.tag-code,
.tag-code td {
background: rgba(56, 139, 253, 0.15) !important;
}
.tag-code td.lines-num {
background-color: rgba(56, 139, 253, 0.4) !important;
}
table.chroma > tbody {
background-color: var(--color-footer);
}
tr.same-code {
background-color: var(--color-footer);
}
.lines-code {
background-color: var(--color-diff-inactive);
}
tr.add-code > td:nth-child(1) {
background-color: rgba(63, 185, 80, 0.3);
}
tr.add-code > td:nth-child(2) {
background-color: rgba(63, 185, 80, 0.3);
}
tr.del-code > td:nth-child(1) {
background-color: rgba(248, 81, 73, 0.3);
}
tr.del-code > td:nth-child(2) {
background-color: rgba(248, 81, 73, 0.3);
}
.ui.primary.sha.label {
background-color: var(--color-primary-alpha-30) !important;
}
.lines-num.lines-num-old.del-code,
.lines-type-marker.lines-type-marker-old.del-code,
.lines-num.lines-num-old,
.lines-type-marker.lines-type-marker-old {
background-color: rgba(248, 81, 73, 0.3) !important;
}
.lines-num.lines-num-new.add-code,
.lines-type-marker.lines-type-marker-new.add-code,
.lines-num.lines-num-new,
.lines-type-marker.lines-type-marker-new {
background-color: rgba(63, 185, 80, 0.3) !important;
}
.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
padding-right: 8px !important;
}
@media only screen and (min-width: 768px) {
.issue .ui.segment.metas {
position: sticky;
top: 25px;
max-height: 100vh;
overflow: scroll;
padding-bottom: 40px;
}
}
.issue-item-top-row .ui.label {
margin-top: 0px;
margin-bottom: 0px;
padding: 0.2em 0.5em;
opacity: 0.8;
transition: opacity 0.1s ease 0s;
}
.issue-item-top-row .ui.label:hover {
opacity: 1;
}
::-moz-selection {
background: var(--color-text-light-2) !important;
}
::selection {
background: var(--color-text-light-2) !important;
}
.feeds .list .repo-owner-name-list .item-name {
max-width: 90% !important;
}
del {
opacity: 0.7;
}
h1 > del {
text-decoration-thickness: 5px;
}
h2 > del {
text-decoration-thickness: 5px;
}
h3 > del {
text-decoration-thickness: 3px;
}
h4 > del {
text-decoration-thickness: 2px;
}
h5 > del {
text-decoration-thickness: 1px;
}
h6 > del {
text-decoration-thickness: 1px;
}
.ui.message.unicode-escape-prompt {
opacity: 0.5;
}
.ui.message.unicode-escape-prompt:hover {
opacity: 1;
}
div.ui.secondary.vertical.filter.menu {
border: var(--color-menu) solid 8px;
border-radius: 10px;
}
.ui.basic.primary.button,
.ui.basic.primary.buttons .button,
.ui.primary.button,
.ui.primary.buttons .button {
background-color: var(--color-primary-light-extra) !important;
}
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover,
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
background-color: var(--color-primary-dark-1) !important;
}
.feeds .list ul li .repo-list-link .svg {
margin-right: 3px;
}
.repo-title > a:nth-child(4) {
font-weight: bold;
}
.ui.repo-topic.large.label.topic,
.ui.small.label.topic {
background: #13233a;
color: #58a6ff;
border-radius: 10px;
}
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
color: unset;
}
.ui.attached.table.unstackable.segment {
border-radius: 0px 0px 5px 5px;
}
.ui.tertiary.button {
color: #58a6ff;
}
.ui.tertiary.button:hover {
color: #8bc1ff;
}
.ui.selection.dropdown {
background: #0d1117;
}
.ui.selection.dropdown:hover {
background: #0d1117;
}
.ui.error.header {
background: unset !important;
}
.ui.error.message,
.ui.attached.error.message,
.ui.red.message,
.ui.attached.red.message,
.ui.negative.message,
.ui.attached.negative.message {
background: rgba(248, 81, 73, 0.1);
}
.ui.modal > .header {
color: var(--color-text);
}
.ui.modal > .actions,
.ui.modal .content + .actions,
.ui.modal .content + form > .actions {
background: var(--color-body);
}
.ui.button,
.ui.button:focus {
border: 1px solid rgba(238, 244, 250, 0.105);
}
.ui.button:hover {
background: var(--color-active);
border: 1px solid rgba(238, 244, 250, 0.48);
}
.small-menu-items .item {
background: var(--color-body) !important;
}
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover,
.ui.secondary.pointing.menu .dropdown.item:hover,
.ui.secondary.pointing.menu a.item:hover {
color: var(--color-text);
}
.ui.list > .item a,
.ui.list .list > .item a {
overflow: auto;
}
.repo-buttons .ui.labeled.button > .label {
border-color: rgba(238, 244, 250, 0.105);
}
.repo-buttons .ui.labeled.button > .label:hover {
color: var(--color-text);
background: var(--color-active);
}
.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
color: var(--color-text);
background: var(--color-active);
}
.user.profile .ui.card {
border-radius: 12px;
}
.ui.secondary.menu .dropdown.item > .menu,
.ui.text.menu .dropdown.item > .menu {
padding: 5px;
border-radius: 9px;
}
.ui.menu .ui.dropdown.item .menu .item {
border-radius: 5px;
}
.user-menu > .item {
border-radius: 5px !important;
}
.chroma .nx {
color: rgb(191, 212, 234);
}
.chroma .s,
.chroma .s1,
.chroma .s2 {
color: rgb(48, 200, 24);
}
.chroma .nf {
color: rgb(251, 118, 174);
}
.chroma .kt {
color: rgb(107, 141, 242);
}
.chroma .nb {
color: rgb(64, 153, 255);
}
.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr {
color: rgb(244, 111, 124);
}
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo {
color: rgb(23, 202, 202);
}
.chroma .c,
.chroma .c1,
.chroma .ch {
color: rgb(137, 149, 162);
}
.code-view .lines-num:hover {
color: rgb(255, 255, 255) !important;
}
.monaco-editor .margin-view-overlays,
.monaco-editor-background {
background-color: #0d1117 !important;
}
/*
Gitea Theme Enhancements
-------------------------
- Change all description styles.
- Adjusted font sizes for better readability
- Added hover effects to buttons
*/
.description {
color: var(--color-text-light-2) !important;
}
a.ui.basic.label {
color: var(--color-text) !important;
}
.ui .text.black {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.ui .text.black:hover {
color: var(--color-primary) !important;
}
span.text {
color: var(--color-text-light-2) !important;
}
span.text.black {
color: var(--color-caret) !important;
}
tr > th,
.content {
color: var(--color-text) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid black !important;
-webkit-text-fill-color: black !important;
-webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
transition: background-color 5000s ease-in-out 0s !important;
-webkit-transition: background-color 5000s ease-in-out 0s !important;
-moz-transition: background-color 5000s ease-in-out 0s !important;
-ms-transition: background-color 5000s ease-in-out 0s !important;
-o-transition: background-color 5000s ease-in-out 0s !important;
}
a.ui.basic.blue.button.repo.name.item > span.text.truncate {
color: var(--color-caret) !important;
}
span.header {
color: var(--color-text-light-2) !important;
}
/* General Styles */
body {
background: var(--color-body);
color: var(--color-text);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
text-decoration: none !important;
transition: color 0.3s ease;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
}
a:hover {
color: var(--color-primary-dark-1);
}
/* Buttons */
.ui.button,
.ui.button:focus {
border: 1px solid rgba(238, 244, 250, 0.105);
transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease;
-webkit-transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease;
-moz-transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease;
-ms-transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease;
-o-transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease;
}
.ui.button:hover {
background: var(--color-active);
border: 1px solid rgba(238, 244, 250, 0.48);
}
.ui.primary.button,
.ui.primary.buttons .button {
background-color: var(--color-primary);
color: white;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
background-color: var(--color-primary-dark-1);
}
.ui.secondary.button,
.ui.secondary.buttons .button {
background-color: var(--color-secondary);
color: white;
}
.ui.secondary.button:hover,
.ui.secondary.buttons .button:hover {
background-color: var(--color-secondary-alpha-60);
}
.ui.tertiary.button {
color: var(--color-primary);
}
.ui.tertiary.button:hover {
color: var(--color-primary-dark-1);
}
input[type="text"],
textarea {
background-color: var(--color-input-background);
color: var(--color-text);
border: 1px solid var(--color-secondary);
border-radius: 5px;
padding: 8px;
transition: background-color 0.3s ease, border-color 0.3s ease;
-webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
-moz-transition: background-color 0.3s ease, border-color 0.3s ease;
-ms-transition: background-color 0.3s ease, border-color 0.3s ease;
-o-transition: background-color 0.3s ease, border-color 0.3s ease;
}
input[type="text"]:focus,
textarea:focus {
border-color: var(--color-primary);
background-color: var(--color-input-background);
}
input#repo-clone-url {
border: none;
}
pre.code-block {
background: var(--color-secondary);
margin: 20px auto;
z-index: 0;
}
.ui.secondary.stackable.pointing.tight.menu {
margin-bottom: 15px !important;
}
.profile-avatar-name > span {
color: var(--color-caret) !important;
}
@import url("/assets/css/index.css");