DarkTheme/Gitea-Arc_blue-Theme
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Theme updated for Version 1.16.*

Browse Source
This commit is contained in:
Bram Prieshof
2022-02-25 15:55:24 +01:00
parent fa2e3f8828
commit 1e8c65ec7f
8 changed files with 34 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
FileChanges_LOG.md
View File

@@ -1,3 +1,11 @@
# Changes made to gitea source (as of `v1.16.2`) to make arc-blu theme
## Dark Theme detection
A beter way to do this was added so changes to `web_src/js/utils.js` are no longer needed
## Theme Files
The themes have been steamlined so a lot of line have become unnecessary
But most customizations previous releases are still used
# Changes made to gitea source (as of `v1.15.0`) to make arc-blu theme
## Theme Files

4
ThemeDev.md
View File

@@ -1,8 +1,8 @@
# Setting up system for developing for gitea frondend
* Install go(1.15 =>), node.js(10.13 => or latest lts), npm, git, make
* Install go(1.17.7 =>), node.js(16.14 => or latest lts), npm, gcc git, make
* Clone gitea repo `git clone https://github.com/go-gitea/gitea`
* Cd into repo folder `cd gitea`
* Checkout last stable (1.15.0 at this point) `git checkout v1.15.0`
* Checkout last stable (1.16.2 at this point) `git checkout v1.16.2`
* Build backend run: `TAGS="sqlite sqlite_unlock_notify" make backend`

2
custom_public_bin/css/theme-arc-blue.css
View File

File diff suppressed because one or more lines are too long

69
custom_public_bin/js/index.js
View File

File diff suppressed because one or more lines are too long

1
custom_public_bin/js/theme-arc-blue.js Normal file
View File

@@ -0,0 +1 @@
(function(){"use strict";var _={}})();

9
readme.md
View File

@@ -13,16 +13,11 @@ gitea is setup as a sevice as described in `https://docs.gitea.io/en-us/install-
```
mkdir -p /var/lib/gitea/custom/public/css/ /opt/gitea_blue-theme
```
* Remove old custom css/js
```
mv /var/lib/gitea/custom/public/js /var/lib/gitea/custom/public/js.old
mv /var/lib/gitea/custom/public/css /var/lib/gitea/custom/public/css.old
```
### Install
* Download the repo to the opt directory
```
git clone https://git.bprieshof.nl/DarkTheme/Gitea-Arc_blue-Theme.git /opt/gitea_blue-theme/
git clone https://git.bprieshof.nl/DarkTheme/Gitea-Arc_blue-Theme.git /opt/gitea_blue-theme
```
* Link custom files to gitea installation
```
@@ -32,7 +27,7 @@ ln -sfn /opt/gitea_blue-theme/custom_public_bin/js /var/lib/gitea/custom/public/
* add to gitea config file `/etc/gitea/app.ini` to enable the theme
```
[ui]
THEMES = gitea,arc-green,arc-blue
THEMES = auto,gitea,arc-green,arc-blue
```
### Finalize
* Restart gitea

53
src/web_src/js/utils.js
View File

@@ -1,53 +0,0 @@
// transform /path/to/file.ext to file.ext
export function basename(path = '') {
return path ? path.replace(/^.*\//, '') : '';
}
// transform /path/to/file.ext to .ext
export function extname(path = '') {
const [_, ext] = /.+(\.[^.]+)$/.exec(path) || [];
return ext || '';
}
// join a list of path segments with slashes, ensuring no double slashes
export function joinPaths(...parts) {
let str = '';
for (const part of parts) {
if (!part) continue;
str = !str ? part : `${str.replace(/\/$/, '')}/${part.replace(/^\//, '')}`;
}
return str;
}
// test whether a variable is an object
export function isObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
// returns whether a dark theme is enabled
export function isDarkTheme() {
return (document.documentElement.classList.contains('theme-arc-green') == true || document.documentElement.classList.contains('theme-arc-blue') == true || document.documentElement.classList.contains('theme-testblu') == true);
}
// removes duplicate elements in an array
export function uniq(arr) {
return Array.from(new Set(arr));
}
// strip <tags> from a string
export function stripTags(text) {
return text.replace(/<[^>]*>?/gm, '');
}
// searches the inclusive range [minValue, maxValue].
// credits: https://matthiasott.com/notes/write-your-media-queries-in-pixels-not-ems
export function mqBinarySearch(feature, minValue, maxValue, step, unit) {
if (maxValue - minValue < step) {
return minValue;
}
const mid = Math.ceil((minValue + maxValue) / 2 / step) * step;
if (matchMedia(`screen and (min-${feature}:${mid}${unit})`).matches) {
return mqBinarySearch(feature, mid, maxValue, step, unit); // feature is >= mid
}
return mqBinarySearch(feature, minValue, mid - step, step, unit); // feature is < mid
}

309
src/web_src/less/themes/theme-arc-blue.less
View File

@@ -1,6 +1,8 @@
@import "../chroma/dark.less";
@import "../codemirror/dark.less";
:root {
--is-dark-theme: true;
--color-primary: #86acd1;
--color-primary-dark-1: #86ACD1;
--color-primary-dark-2: #9ABAD9;
@@ -75,6 +77,18 @@
--color-diff-removed-row-border: #634343;
--color-diff-added-row-border: #314a37;
--color-diff-inactive: #353846;
--color-error-border: #a53a37;
--color-error-bg: #482c2c;
--color-error-text: #ff4433;
--color-success-border: #458a57;
--color-success-bg: #284034;
--color-success-text: #6cc664;
--color-warning-border: #bb9d00;
--color-warning-bg: #3a3a30;
--color-warning-text: #fbbd08;
--color-info-border: #306090;
--color-info-bg: #26354c;
--color-info-text: #38a8e8;
/* target-based colors */
--color-body: #383c4a;
--color-box-header: #404652;
@@ -123,17 +137,6 @@
background-color: #383c4a;
}
[data-tooltip]::before,
[data-tooltip]::after {
background: #1b1c1d !important; /* .ui.inverted.popup */
border-color: #1b1c1d !important; /* .ui.inverted.popup */
color: #dbdbdb !important;
}
[data-tooltip]::before {
box-shadow: 1px 1px 0 0 #1b1c1d !important; /* .ui.inverted.popup */
}
.ui.green.progress .bar {
background-color: #668844;
}
@@ -288,19 +291,6 @@ a.ui.basic.green.label:hover {
background-color: #393d4a !important;
}
.repository.file.editor.edit,
.repository.wiki.new .CodeMirror {
.editor-preview,
.editor-preview-side,
& + .editor-preview-side {
background: #353945;
.markup.ui.segment {
border-width: 0;
}
}
}
.overflow.menu .items .item {
color: #9d9d9d;
}
@@ -318,10 +308,6 @@ a.ui.basic.green.label:hover {
border-color: transparent !important;
}
.ui .info.segment.top {
background-color: var(--color-secondary) !important;
}
.repository .diff-stats li {
border-color: var(--color-secondary);
}
@@ -340,57 +326,6 @@ td.blob-hunk {
color: #dbdbdb !important;
}
.ui.attached.info.message,
.ui.info.message {
box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent;
}
.ui.bottom.attached.message {
background-color: #2c662d;
color: #86acd1;
}
.ui.bottom.attached.message .pull-right {
color: #86acd1;
}
.ui.info.message {
background-color: #2c3b4a;
color: #9ebcc5;
}
.ui .warning.header,
.ui.warning.message {
background-color: #542 !important;
border-color: #ec8;
}
.ui.warning.message {
color: #ec8;
box-shadow: 0 0 0 1px #ec8;
}
.ui.warning.segment {
border-color: #ec8;
}
.ui.red.message,
.ui.error.message {
background-color: #522;
color: #f9cbcb;
box-shadow: 0 0 0 1px #a04141 inset;
}
.ui .error.header,
.ui.error.message {
background-color: #522 !important;
border-color: #a04141;
}
.ui.error.segment {
border-color: #a04141;
}
.ui.red.button,
.ui.red.buttons .button {
background-color: #7d3434;
@@ -401,18 +336,6 @@ td.blob-hunk {
background-color: #984646;
}
.ui.positive.message {
background-color: #0d491b;
color: #86acd1;
box-shadow: 0 0 0 1px #2d693b inset, 0 0 0 0 transparent;
}
.ui.negative.message {
background-color: rgba(80, 23, 17, .6);
color: #f9cbcb;
box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent;
}
.ui.list .list > .item .header,
.ui.list > .item .header {
color: #dedede;
@@ -423,11 +346,6 @@ td.blob-hunk {
color: var(--color-secondary-dark-6);
}
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
color: #1e70bf;
}
.repository.labels .ui.basic.black.label {
background-color: #bbbbbb !important;
}
@@ -457,59 +375,6 @@ td.blob-excerpt {
color: #dbdbdb;
}
.repository .ui.attached.message.isSigned.isVerified {
background-color: #394829;
color: var(--color-secondary-dark-6);
&.message {
color: #87ab63;
.ui.text {
color: var(--color-secondary-dark-6);
}
.pull-right {
color: #87ab63;
}
}
}
.repository .ui.attached.message.isSigned.isVerifiedUntrusted {
background-color: #4a3903;
color: var(--color-secondary-dark-6);
&.message {
color: #c2c193;
.ui.text {
color: var(--color-secondary-dark-6);
}
a {
color: #c2c193;
}
}
}
.repository .ui.attached.message.isSigned.isVerifiedUnmatched {
background-color: #4e3321;
color: var(--color-secondary-dark-6);
&.message {
color: #c2a893;
.ui.text {
color: var(--color-secondary-dark-6);
}
a {
color: #c2a893;
}
}
}
.repository .ui.attached.message.isSigned.isWarning {
background-color: rgba(80, 23, 17, .6);
&.message {
color: #d07d7d;
.ui.text {
color: #d07d7d;
}
}
}
.ui.header .sub.header {
color: var(--color-secondary-dark-6);
}
@@ -558,7 +423,7 @@ td.blob-excerpt {
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
filter: invert(100%);
filter: invert(100%) hue-rotate(180deg);
}
.edit-diff > div > .ui.table {
@@ -566,107 +431,10 @@ td.blob-excerpt {
border-right-color: var(--color-secondary) !important;
}
/* code mirror dark theme */
.CodeMirror {
&.cm-s-default,
&.cm-s-paper {
.cm-property {
color: #a0cc75;
}
.cm-header {
color: #9daccc;
}
.cm-quote {
color: #009900;
}
.cm-keyword {
color: #cc8a61;
}
.cm-atom {
color: #ef5e77;
}
.cm-number {
color: #ff5656;
}
.cm-def {
color: #e4e4e4;
}
.cm-variable-2 {
color: #00bdbf;
}
.cm-variable-3 {
color: #008855;
}
.cm-comment {
color: #8e9ab3;
}
.cm-string {
color: #a77272;
}
.cm-string-2 {
color: #ff5500;
}
.cm-meta,
.cm-qualifier {
color: #ffb176;
}
.cm-builtin {
color: #b7c951;
}
.cm-bracket {
color: #999977;
}
.cm-tag {
color: #f1d273;
}
.cm-attribute {
color: #bfcc70;
}
.cm-hr {
color: #999999;
}
.cm-url {
color: #c5cfd0;
}
.cm-link {
color: #d8c792;
}
.cm-error {
/* color: #ff6e00; */
color: #dbdbeb;
}
}
}
footer .container .links > * {
border-left-color: #888;
}
.repository.file.list #repo-files-table tbody .svg {
color: var(--color-secondary-dark-6);
}
.repository.release #release-list > li .detail .dot {
background-color: #505667;
border-color: #383c4a;
@@ -684,48 +452,6 @@ img[src$="/img/matrix.svg"] {
filter: invert(80%);
}
#git-graph-container li .time {
color: #6a737d;
}
#git-graph-container.monochrome #rel-container .flow-group {
stroke: dimgrey;
fill: dimgrey;
}
#git-graph-container.monochrome #rel-container .flow-group.highlight {
stroke: darkgrey;
fill: darkgrey;
}
#git-graph-container:not(.monochrome) #rel-container .flow-group {
&.flow-color-16-5 {
stroke: #5543b1;
fill: #5543b1;
}
}
#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight {
&.flow-color-16-5 {
stroke: #7058e6;
fill: #7058e6;
}
}
#git-graph-container #rev-list li.highlight.hover {
background-color: rgba(255, 255, 255, .1);
}
#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
border-left-color: rgb(76, 80, 92);
border-left-style: solid;
border-left-width: 1px;
}
.mermaid-chart {
filter: invert(84%) hue-rotate(180deg);
}
.is-loading::after {
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
}
@@ -758,3 +484,8 @@ a.ui:hover {
thead {
background-color: var(--color-card);
}
#repo-files-table tbody .svg.octicon-file-directory,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
color: #1e70bf !important;
}