gogs_config/public/css/themes/velvet.scss

$mainBgColor        : #080705;
$secondBgColor      : #1c1c1c;
$mainTextColor      : silver;
$secondTextColor    : bisque;
$accentBase         : #9b3838;
$accentBase2        : steelblue;
$accentBase-dark    : #4682b485;
$active             : rgba(196, 45, 45, 0.95);
$link               : #193c9b;
$btnColor           : #122940;
$btnShadow          : #807b54;
$userCardShadow     : #151124;
$RepoFilesBg        : #0a294878;
$codeBg             : #080705;
$codeColor          : #9ebdb1; 
$codeSelected       : #001;
$codeColorSelected  : #8f1;
$codeDifOld         : #6f3a3a;
$privRepoBg         : #f9f8f8;
/**** Syntax Highlighting ****/

$comment            : #a2a2a26e;
$selector           : #0086b3; 

$doctag             : #90a959;
$attribute          : #1c7100;
$meta               : #444444;

body:not(.full-width) {
    background-color: $mainBgColor;
    background: linear-gradient(45deg, rgb(63, 14, 19) 0%, rgb(71, 16, 22) 1%,rgb(65, 18, 17) 1%, rgb(82, 22, 20) 15%,rgb(73, 22, 52) 15%, rgb(77, 9, 39) 38%,rgb(95, 20, 23) 38%, rgb(90, 21, 23) 55%,rgb(97, 24, 18) 55%, rgb(58, 10, 6) 62%,rgb(105, 21, 41) 62%, rgb(105, 21, 41) 63%,rgb(47, 9, 44) 63%, rgb(47, 9, 44) 69%,rgb(18, 3, 45) 69%, rgb(18, 3, 45) 100%);
    background-size: contain;
    background-attachment: fixed;
    color: $secondTextColor;
}

.following.bar.light {
    background-color: $secondBgColor !important;
    border-bottom: 1px solid $mainBgColor;
    color: $secondTextColor !important;
    position: fixed;
    top: 0;
}

.ui.container:not(.fluid) {
    width: 70% !important;
}

.tabular .item {
    /* Repo tabs menu */
    color: $accentBase !important;
}

h1,
h2,
h3,
h4,
h5,
.ui.header,
.ui.menu,
.ui.input input,
.ui.button:not(.label) {
    color: $accentBase;
}

#file-content h1,
#file-content h2,
#file-content h3,
#file-content h4,
#file-content h5 {
    color: $mainTextColor;
}

pre.raw,
code.raw {
    background-color: $secondBgColor;
    border: 1px solid $mainBgColor;
}

.following.bar {
    color: $accentBase !important;
}

.overflow.menu .items .item {
    color: $mainTextColor;
}

.following.bar .top.menu a.item.brand {
    color: $accentBase !important;
}

.following.bar .top.menu a.item:hover,
.following.bar .top.menu .dropdown.item:hover,
.following.bar .top.menu .dropdown.item.active {
    color: $active !important;
}

.following.bar .top.menu a.item:hover {
    color: $active !important;
}

.following.bar .top.menu .menu {
    color: $accentBase !important;
}

.following.bar .head.link.item {
    color: $accentBase !important;
}

.home {
    padding-top: 80px;
}

.ui.left {
    padding-left: 5px;
}

.ui.right {
    padding-right: 5px;
}

.ui .header>i+.content {
    background-color: $mainBgColor !important;
}

footer {
    color: $mainTextColor !important;
    background-color: $mainBgColor;
}

.markdown:not(code) {
    background-color: $secondBgColor;
    color: $mainTextColor;
}

.markdown:not(code) blockquote {
    border-left: 4px solid $secondBgColor;
}

.markdown:not(code) table th,
.markdown:not(code) table td {
    border: 0px solid $accentBase !important;
    background-color: $codeBg;
    color:$accentBase;
}

.markdown:not(code) span.frame>span {
    border: 1px solid $mainBgColor;
}

.markdown:not(code) pre code,
.markdown:not(code) pre tt {
    color: $mainTextColor;
}

.markdown:not(code) .highlight pre,
.markdown:not(code) pre {
    background-color: $secondBgColor;
}

.home .stackable {
    padding-top: 40px;
}

.ui.attached.header {
    background: $secondBgColor !important;
    color: $accentBase !important;
    border: none !important;
}

.repository .header-wrapper {
    color: $accentBase !important;
    background-color: transparent;
    padding-top: 80px;
}

.repository {
    padding-top: 80px;
}

.repository #clone-panel {
    width: 30vw !important;
}

.repository #clone-panel input {
    max-width: 100%;
    background-color: $secondBgColor;
}

.repository.file.list #git-stats {
    background-color: transparent;
}

.repository.file.list #file-content .view-raw {
    border: 0 !important;
}

.repository.file.list #file-content .code-view * {
    font-size: 14px;
    line-height: 19px!important;
}

.repository.file.list #file-content .code-view .lines-num span {
    line-height: 20px !important;
}

.repository.file.list #file-content .code-view table {
    border: 0 !important;
}

.repository.file.list #file-content .code-view .lines-num {
    background-color: $secondBgColor !important;
}

.repository.file.list #file-content .code-view .lines-num pre li,
.repository.file.list #file-content .code-view .lines-code pre li,
.repository.file.list #file-content .code-view .lines-num ol li,
.repository.file.list #file-content .code-view .lines-code ol li,
.repository.file.list #file-content .code-view .lines-num .hljs li,
.repository.file.list #file-content .code-view .lines-code .hljs li {
    font-size: 16px;
}

.repository.file.list #file-content .code-view .lines-num pre li.active,
.repository.file.list #file-content .code-view .lines-code pre li.active,
.repository.file.list #file-content .code-view .lines-num ol li.active,
.repository.file.list #file-content .code-view .lines-code ol li.active,
.repository.file.list #file-content .code-view .lines-num .hljs li.active,
.repository.file.list #file-content .code-view .lines-code .hljs li.active,
.hljs-meta .hljs-attribute .hljs-name .hljs-tag .hljs-string .hljs-doctag .hljs-subst .hljs-selector-tag .hljs-keyword .hljs-quote .hljs-comment {
    background: $codeSelected;
    color: $codeColorSelected !important;
}

.repository .diff-file-box .file-body.file-code .lines-num {
    background-color: $secondBgColor !important;
}

.repository .diff-file-box .code-diff tbody tr.del-code td {
    background-color: $codeDifOld !important;
    border-color: #000 !important;
    color: #fff !important;
}

.repository .diff-file-box .code-diff tbody tr.add-code td {
    background-color: #467b60 !important;
    border-color: #c1e9c1 !important;
    color: #fff !important;
}

.repository .diff-file-box .code-diff tbody tr.del-code td.add-code pre {
    background-color: #4c296a !important;
    color: #fff !important;
}

.repository .diff-file-box .code-diff tbody tr.del-code td.add-code {
    background-color: #4c296a !important;
    color: #fff !important;
}

.repository.file.editor .commit-form-wrapper .commit-form {
    border: 1px solid $mainBgColor;
}

.repository .diff-detail-box ol li {
    border-bottom: 1px dashed $mainBgColor;
}

.repository .diff-file-box .file-body.file-code .lines-num-old {
    border-right: 1px solid $mainBgColor;
}

.repository .head .mega-octicon {
    color: $accentBase;
}

.mega-octicon.octicon-repo {
    color: $accentBase2 !important;
}

#repo-clone-url {
    color: $accentBase !important;
}

#repo-clone-url::-moz-selection {
    color: $active !important;
    background-color: $secondBgColor;
}

#repo-clone-url::selection {
    color: $active !important;
    background-color: $secondBgColor;
}

.repository.release #release-list {
    border-top: 1px solid $mainBgColor;
}

.repository.release #release-list>li .detail {
    border-left: 1px solid $mainBgColor;
}

.repository.forks .list .item {
    border-bottom: 1px solid $mainBgColor;
}

.repository.settings.collaboration .collaborator.list>.item:not(:last-child) {
    border-bottom: 1px solid $mainBgColor;
}

#search-user-box .results .item {
    border-bottom: 1px solid $mainBgColor;
}

.ui.vertical.menu .header.item {
    background: $secondBgColor;
    color: $mainTextColor;
    text-align: center;
    padding-left: 0;
}

.organization {
    padding-top: 80px;
}

.organization.profile #org-avatar {
    width: 90px;
    height: 70px;
    margin-right: 5px;
}

.organization.teams .repositories .item:not(:last-child),
.organization.teams .members .item:not(:last-child) {
    border-bottom: 1px solid $mainBgColor;
}

.user:not(.icon) {
    padding-top: 80px;
}

.ui.card {
    background-color: transparent !important;
    color: $mainTextColor !important;
    border: 0 !important;
}

.user.profile .ui.card .extra.content ul li:not(:last-child) {
    border-bottom: 1px solid $mainBgColor;
}

.dashboard {
    padding-top: 80px;
}

.feeds .list ul li:not(:last-child) {
    border-bottom: none;
}

.feeds .list ul li a .octicon {
    color: $accentBase2;
}

.explore {
    padding-top: 80px;
}

.ui.repository.list .item .ui.header {
    color: $mainTextColor;
}

.ui.repository.list .item .ui.header .name {
    color: $mainTextColor;
}

.ui.repository.list .item .ui.header .name:hover {
    color: $active;
}

.ui.repository.list .item:not(:first-child) {
    border-top: none;
}

.ui.header .sub.header {
    color: $accentBase !important;
}

.ui.header {
    color: $accentBase !important;
}

.ui.form .inline.field>label,
.ui.form .inline.field>p,
.ui.form .inline.fields .field>label,
.ui.form .inline.fields .field>p,
.ui.form .inline.fields>label {
    color: $mainTextColor;
}

.secondary {
    background-color: transparent !important;
    color: $accentBase !important;
}

.secondary .item {
    color: $mainTextColor !important;
}

.secondary .item:hover {
    color: $mainTextColor;
}

.repository.file.list #file-content .code-view .lines-num pre,
.repository.file.list #file-content .code-view .lines-code pre,
.repository.file.list #file-content .code-view .lines-num ol,
.repository.file.list #file-content .code-view .lines-code ol,
.repository.file.list #file-content .code-view .lines-num .hljs,
.repository.file.list #file-content .code-view .lines-code .hljs {
    background-color: $codeBg !important;
    color: $codeColor;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
}

.feeds .news>.ui.grid {
    margin-left: auto;
    margin-right: auto;
}

#ActionButtons {
    color: $mainTextColor !important;
    background-color: inherit !important;
    border: 0.5px solid $mainBgColor;
}

.CodeMirror-code {
    background-color: $codeBg !important;
    color: $codeColor !important;
}

.CodeMirror-gutters {
    background-color: $codeBg;
    color: $accentBase;
}

.CodeMirror {
    /* file edditor */
    background: $codeBg;
    color: $codeColor !important;
}

#repo-desc {
    text-align: center;
    font-weight: 500;
    color: $mainTextColor;
}

#repo-clone-ssh {
    color: $mainTextColor;
}

#repo-clone-https {
    color: $mainTextColor;
}

#danger_zone_edited {
    background: $secondBgColor;
    border-color: $mainBgColor !important;
}

#basic_sett,
#adv_sett,
#adv_sett_form,
#admin_sec_panel,
#admin_small_panel {
    background: $secondBgColor;
    border-color: $mainBgColor !important;
}

#danger_zone_edited_header {
    background: $accentBase !important;
}

#commits-table-head tr th {
    color: $mainTextColor !important;
}

.ui.table thead th {
    background: $secondBgColor;
    color: $mainTextColor;
}

.ui.table thead tr:hover th {
    background: $mainBgColor;
}

.ui.table tr td {
    border-top: none;
}
.repository.file.list #repo-files-table tr:hover {
    background-color: $mainBgColor;
}

tr:hover a {
    color: $active;
}

#repo-files-table tr:hover {
    color: $active;
}

#repo-files-table tr:hover span {
    /* repo time last changed */
    color: $active !important;
}

.feeds .list ul li.private {
    background-color: $secondBgColor;
}

.feeds .list ul {
    background-color: $mainBgColor;
    background-image: url("/img/grad1.png");
    background-size: contain;
    background-attachment: fixed;
    background-blend-mode: difference;
}

.repository .diff-file-box .code-diff tbody tr.tag-code td {
    background-color: $secondBgColor !important;
}

.repository .diff-file-box .header {
    background-color: $accentBase;
}

/* File Editor */
.editor-toolbar a {
    color: $link !important;
}

.editor-toolbar a.active,
.editor-toolbar a:hover {
    background: $btnShadow;
    color: $mainTextColor;
    border-color: $btnShadow;
}

.CodeMirror {
    border: 1px solid $mainBgColor;
}

.CodeMirror-gutters {
    background-color: $secondBgColor;
    border-right: none;
    border-left: none;
}

/*#########################           Syntax Higlight Theme #####################*/

.hljs-comment,
.hljs-quote {
    color: $comment !important;
    font-weight: 400;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: $selector !important;
}

.hljs-string,
.hljs-doctag {
    color: $doctag !important;
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
    color: $attribute !important;
}

.hljs-meta {
    color: $meta !important;
}

.hljs-built_in,
.hljs-builtin-name {
    color: $selector !important;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: #bfa01c !important;
}


/* Editor Highlight Theme */

.cm-s-default .cm-comment {
    color: $comment !important;
    font-weight: 400;
}

.cm-s-default .cm-def {
    color: $codeColor;
}

.cm-s-default .cm-builtin {
    color: $selector !important;
}

/* semantic */

.ui.attached.segment {
    border: 0;
}

.ui.segment {
    background: $secondBgColor;
}

.ui.buttons>.ui.dropdown:last-child .menu,
.ui.menu .right.dropdown.item .menu,
.ui.menu .right.menu .dropdown:last-child .menu {
    background-color: $secondBgColor !important;
}

.ui.menu .ui.dropdown .menu>.item {
    color: $accentBase !important;
    background-color: $secondBgColor !important;
}

.ui.dropdown .menu>.item:hover {
    color: $active;
}

.ui.menu {
    background: $secondBgColor;
}

.ui.menu .ui.dropdown .menu>.selected.item {
    color: $active !important;
}

.ui.menu .ui.dropdown .menu>.active.item {
    color: $active !important;
}

.ui.selection.dropdown .menu>.item {
    border-top: none;
}

.ui.checkbox input:focus~label {
    color: $mainTextColor;
}

.ui.checkbox.checked label:focus {
    color: $mainTextColor;
}

.ui.checkbox label {
    color: $mainTextColor;
}

.ui.checkbox.checked label {
    color: $mainTextColor;
}

.ui.checkbox label.focus {
    color: $mainTextColor;
}

.ui.checkbox.checked label.focus {
    color: $mainTextColor;
}

.ui.checkbox label:hover {
    color: $mainTextColor;
}

.ui.checkbox.checked label:hover {
    color: $mainTextColor;
}

.ui.checkbox label,
.ui.checkbox+label {
    color: $mainTextColor;
}

.ui.checkbox label:hover,
.ui.checkbox+label:hover {
    color: $mainTextColor;
}

.ui.checkbox.checked label,
.ui.checkbox.checked+label {
    color: $mainTextColor;
}

.ui.checkbox.checked label:hover,
.ui.checkbox.cheked+label:hover {
    color: $mainTextColor;
}

.ui.link.menu .item,
.ui.menu .dropdown.item,
.ui.menu .link.item,
.ui.menu a.item {
    color: $mainTextColor;
}

.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover {
    color: $active;
}

.ui .dropdown .menu {
    background-color: $secondBgColor;
}

.ui .dropdown .menu a:hover {
    color: $accentBase !important;
}

.ui.basic.button,
.ui.basic.buttons .button {
    background: $accentBase !important;
    color: $mainTextColor;
}

.ui.vertical.menu {
    background: $secondBgColor;
    color: $accentBase;
}

.ui.dropdown .menu .selected.item,
.ui.dropdown.selected {
    background: $secondBgColor;
    color: $mainTextColor;
}

.ui.vertical.menu .item {
    color: $mainTextColor;
}

.ui.menu .item {
    font-weight: 600;
    color: $mainTextColor;
}

.ui.menu .item .active {
    font-weight: 600;
}

.ui.menu .item>.input input {
    background-color: $mainBgColor;
}

.ui.menu .item:hover,
.ui.vertical.menu .item:hover {
    color: $mainTextColor;
}

.ui.vertical.menu .active.item {
    background: $link;
}

.ui.menu .active.item {
    font-weight: 600;
}

.ui.menu .active.item:hover,
.ui.vertical.menu .active.item:hover {
    color: inherit;
}

.ui.dropdown .menu>.item {
    color: $mainTextColor;
}

.ui.menu.three.item .item {
    background-color: $secondBgColor;
    color: $accentBase2;
}

.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
    color: $mainTextColor;
}

.ui.table {
    background-color: $RepoFilesBg;
    background-image: url("/img/grad1.png");
    background-size: contain;
    background-attachment: fixed;
    background-blend-mode: color-burn;
    color: $mainTextColor;
}

.ui.button {
    background: $btnColor !important;
    color: $mainTextColor !important;
}

.ui.button:hover {
    color: $active;
}

.ui.dropdown .menu>.header {
    color: $mainTextColor;
}

.ui.menu .ui.dropdown .menu>.item:hover {
    color: $active !important;
    background-color: $secondBgColor !important;
}

.ui.dropdown .menu {
    border: 1px solid $secondBgColor;
}

.ui.dropdown .menu>.input:not(.transparent) input {
    background-color: $mainBgColor;
    color: $secondTextColor;
}

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"] {
    background: $mainBgColor;
    color: $mainTextColor;
    font-weight: 600;
}

.ui.form input:not([type]):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 {
    color: $mainTextColor;
    border-color: transparent;
    border-radius: 0;
    background: $mainBgColor;
    -webkit-box-shadow: 0px 0px 8px 2px $btnShadow;
    box-shadow: 0px 0px 8px 2px $btnShadow;
}

.ui.action.input:not([class*="left action"])>input:focus {
    border-right-color: transparent !important;
}

.ui.form .field>label {
    color: $mainTextColor;
}

.ui.attached.header {
    background: $mainBgColor;
}

.ui .text.black:hover {
    color: $secondTextColor;
}

.ui.tabular.menu .active.item {
    background: none $secondBgColor;
    border-color: $secondBgColor;
    color: $active;
}

.ui.basic.button,
.ui.basic.buttons .button {
    background: $secondBgColor none !important;
    color: $mainTextColor!important;
    font-weight: 600;
    -webkit-box-shadow: 0 0 8px 0px $btnShadow;
    box-shadow: 0 0 8px 0px $btnShadow;
}

.ui.basic.button:hover,
.ui.basic.buttons .button:hover {
    background: $secondBgColor !important;
    color: $active !important;
    -webkit-box-shadow: 0 0 8px 0px $btnShadow;
    box-shadow: 0 0 8px 0px $btnShadow;
}

.ui.label {
    background-color: $accentBase-dark;
    color: #fff;
}

.ui.basic.label {
    background: none $accentBase;
}

.ui.breadcrumb a {
    color: $mainTextColor;
}

.ui.list .list>.item .description,
.ui.list>.item .description {
    color: $mainTextColor;
}

.ui.user.list .item .description a {
    color: $mainTextColor;
}

.ui.user.list .item .description a:hover {
    text-decoration: underline;
    color: $accentBase;
}

.ui.buttons:not(.basic):not(.inverted)>.button,
.ui.buttons>.ui.button:not(.basic):not(.inverted) {
    -webkit-box-shadow: 0 0 8px 0px $btnShadow;
    box-shadow: 0 0 8px 0px $btnShadow;
}

.ui.button {
    background: transparent;
}

.ui.button:hover {
    background-color: $secondBgColor;
    color: $active !important;
}

.ui.card,
.ui.cards>.card {
    box-shadow: 0px -1px 22px 10px $userCardShadow;
}

a {
    color: $mainTextColor;
}

a:hover {
    color: $active;
}

footer {
    border-top: 1px solid $mainBgColor;
}