diff --git a/README.md b/README.md index 0dfdf15..5933306 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,20 @@ -# theme-dark-arc-gitea -Dark theme with high contrast for Gitea, based on arc-green. +# theme-dark-arc +A dark theme for gitea with good contrast. + +This theme was created by making a copy of theme-arc-green.css and making things darker for better contrast. + +If you make improvements/tweaks to this theme please send a pull request, or dump your changes in an issue report. + +![dark-arc-dashboard](screenshot.png) + +![dark-arc-repository](screenshot2.png) + +I created a feature request for a way to disable organizations because I don't use them. + +I was promptly told to use css and my request was closed: https://github.com/go-gitea/gitea/issues/19391 + +This theme hides Organizations using CSS, you can find it at the bottom of the theme: + + #dashboard-repo-list > div > div:first-child { + display: none !important; + } diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000..b8f2b10 Binary files /dev/null and b/screenshot.png differ diff --git a/screenshot2.png b/screenshot2.png new file mode 100644 index 0000000..56b0ed0 Binary files /dev/null and b/screenshot2.png differ diff --git a/theme-dark-arc.css b/theme-dark-arc.css new file mode 100644 index 0000000..4d297f9 --- /dev/null +++ b/theme-dark-arc.css @@ -0,0 +1,852 @@ +.chroma .hl { + background-color: #3f424d +} + +.chroma .lnt, +.chroma .ln { + color: #7f7f7f +} + +.chroma .k { + color: #f63 +} + +.chroma .kc { + color: #fa1 +} + +.chroma .kd { + color: #9daccc +} + +.chroma .kn { + color: #fa1 +} + +.chroma .kp { + color: #5f8700 +} + +.chroma .kr { + color: #f63 +} + +.chroma .kt { + color: #9daccc +} + +.chroma .na { + color: #8a8a8a +} + +.chroma .nb, +.chroma .bp { + color: #9daccc +} + +.chroma .nc, +.chroma .no { + color: #fa1 +} + +.chroma .nd { + color: #9daccc +} + +.chroma .ni { + color: #fa1 +} + +.chroma .ne { + color: #af8700 +} + +.chroma .nf { + color: #9daccc +} + +.chroma .nl, +.chroma .nn { + color: #fa1 +} + +.chroma .nx, +.chroma .nt, +.chroma .nv { + color: #9daccc +} + +.chroma .vc { + color: #f81 +} + +.chroma .vg, +.chroma .vi { + color: #fa1 +} + +.chroma .s, +.chroma .sa { + color: #1af +} + +.chroma .sb { + color: #a0cc75 +} + +.chroma .sc, +.chroma .dl { + color: #1af +} + +.chroma .sd { + color: #6a737d +} + +.chroma .s2 { + color: #a0cc75 +} + +.chroma .se { + color: #f63 +} + +.chroma .sh { + color: #1af +} + +.chroma .si, +.chroma .sx { + color: #fa1 +} + +.chroma .sr { + color: #97c +} + +.chroma .s1 { + color: #a0cc75 +} + +.chroma .ss { + color: #fa1 +} + +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .il, +.chroma .mo { + color: #1af +} + +.chroma .o { + color: #f63 +} + +.chroma .ow { + color: #5f8700 +} + +.chroma .c, +.chroma .ch, +.chroma .cm, +.chroma .c1 { + color: #6a737d +} + +.chroma .cs { + color: #637d +} + +.chroma .cp { + color: #fc6 +} + +.chroma .cpf { + color: #03dfff +} + +.chroma .gd { + color: #fff; + background-color: #5f3737 +} + +.chroma .ge { + color: #ef5 +} + +.chroma .gr { + color: #f33 +} + +.chroma .gh { + color: #fa1 +} + +.chroma .gi { + color: #fff; + background-color: #3a523a +} + +.chroma .go { + color: #888 +} + +.chroma .gp { + color: #555 +} + +.chroma .gu { + color: #9daccc +} + +.chroma .gt { + color: #f63 +} + +.chroma .w { + color: #bbb +} + +.CodeMirror.cm-s-default .cm-property, +.CodeMirror.cm-s-paper .cm-property { + color: #a0cc75 +} + +.CodeMirror.cm-s-default .cm-header, +.CodeMirror.cm-s-paper .cm-header { + color: #9daccc +} + +.CodeMirror.cm-s-default .cm-quote, +.CodeMirror.cm-s-paper .cm-quote { + color: #090 +} + +.CodeMirror.cm-s-default .cm-keyword, +.CodeMirror.cm-s-paper .cm-keyword { + color: #cc8a61 +} + +.CodeMirror.cm-s-default .cm-atom, +.CodeMirror.cm-s-paper .cm-atom { + color: #ef5e77 +} + +.CodeMirror.cm-s-default .cm-number, +.CodeMirror.cm-s-paper .cm-number { + color: #ff5656 +} + +.CodeMirror.cm-s-default .cm-def, +.CodeMirror.cm-s-paper .cm-def { + color: #e4e4e4 +} + +.CodeMirror.cm-s-default .cm-variable-2, +.CodeMirror.cm-s-paper .cm-variable-2 { + color: #00bdbf +} + +.CodeMirror.cm-s-default .cm-variable-3, +.CodeMirror.cm-s-paper .cm-variable-3 { + color: #085 +} + +.CodeMirror.cm-s-default .cm-comment, +.CodeMirror.cm-s-paper .cm-comment { + color: #8e9ab3 +} + +.CodeMirror.cm-s-default .cm-string, +.CodeMirror.cm-s-paper .cm-string { + color: #a77272 +} + +.CodeMirror.cm-s-default .cm-string-2, +.CodeMirror.cm-s-paper .cm-string-2 { + color: #f50 +} + +.CodeMirror.cm-s-default .cm-meta, +.CodeMirror.cm-s-paper .cm-meta, +.CodeMirror.cm-s-default .cm-qualifier, +.CodeMirror.cm-s-paper .cm-qualifier { + color: #ffb176 +} + +.CodeMirror.cm-s-default .cm-builtin, +.CodeMirror.cm-s-paper .cm-builtin { + color: #b7c951 +} + +.CodeMirror.cm-s-default .cm-bracket, +.CodeMirror.cm-s-paper .cm-bracket { + color: #997 +} + +.CodeMirror.cm-s-default .cm-tag, +.CodeMirror.cm-s-paper .cm-tag { + color: #f1d273 +} + +.CodeMirror.cm-s-default .cm-attribute, +.CodeMirror.cm-s-paper .cm-attribute { + color: #bfcc70 +} + +.CodeMirror.cm-s-default .cm-hr, +.CodeMirror.cm-s-paper .cm-hr { + color: #999 +} + +.CodeMirror.cm-s-default .cm-url, +.CodeMirror.cm-s-paper .cm-url { + color: #c5cfd0 +} + +.CodeMirror.cm-s-default .cm-link, +.CodeMirror.cm-s-paper .cm-link { + color: #d8c792 +} + +.CodeMirror.cm-s-default .cm-error, +.CodeMirror.cm-s-paper .cm-error { + color: #dbdbeb +} + +:root { + --is-dark-theme: true; + --color-primary: #87ab63; + --color-primary-dark-1: #93b373; + --color-primary-dark-2: #9fbc82; + --color-primary-dark-3: #abc492; + --color-primary-dark-4: #b7cda1; + --color-primary-dark-5: #cfddc1; + --color-primary-dark-6: #e7eee0; + --color-primary-dark-7: #f8faf6; + --color-primary-light-1: #7a9e55; + --color-primary-light-2: #6c8c4c; + --color-primary-light-3: #5f7b42; + --color-primary-light-4: #516939; + --color-primary-light-5: #364626; + --color-primary-light-6: #1b2313; + --color-primary-light-7: #080b06; + --color-primary-alpha-10: #87ab6319; + --color-primary-alpha-20: #87ab6333; + --color-primary-alpha-30: #87ab634b; + --color-primary-alpha-40: #87ab6366; + --color-primary-alpha-50: #87ab6380; + --color-primary-alpha-60: #87ab6399; + --color-primary-alpha-70: #87ab63b3; + --color-primary-alpha-80: #87ab63cc; + --color-primary-alpha-90: #87ab63e1; + --color-secondary: #222222; + --color-secondary-dark-1: #505665; + --color-secondary-dark-2: #5b6273; + --color-secondary-dark-3: #71798e; + --color-secondary-dark-4: #7f8699; + --color-secondary-dark-5: #8c93a4; + --color-secondary-dark-6: #9aa0af; + --color-secondary-dark-7: #a8adba; + --color-secondary-dark-8: #b6bac5; + --color-secondary-dark-9: #c4c7d0; + --color-secondary-dark-10: #d2d4db; + --color-secondary-dark-11: #dfe1e6; + --color-secondary-dark-12: #edeef1; + --color-secondary-dark-13: #fbfbfc; + --color-secondary-light-1: #373b46; + --color-secondary-light-2: #292c34; + --color-secondary-light-3: #1c1e23; + --color-secondary-light-4: #0e0f11; + --color-secondary-alpha-10: #22222219; + --color-secondary-alpha-20: #22222233; + --color-secondary-alpha-30: #2222224b; + --color-secondary-alpha-40: #22222266; + --color-secondary-alpha-50: #22222280; + --color-secondary-alpha-60: #22222299; + --color-secondary-alpha-70: #222222b3; + --color-secondary-alpha-80: #222222cc; + --color-secondary-alpha-90: #222222e1; + --color-red: #db2828; + --color-orange: #f2711c; + --color-yellow: #fbbd08; + --color-olive: #b5cc18; + --color-green: #21ba45; + --color-teal: #00b5ad; + --color-blue: #2185d0; + --color-violet: #6435c9; + --color-purple: #a333c8; + --color-pink: #e03997; + --color-brown: #a5673f; + --color-grey: #767a85; + --color-black: #1e222e; + --color-gold: #a1882b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #6f3333; + --color-diff-added-word-bg: #3c653c; + --color-diff-removed-row-bg: #3c2626; + --color-diff-moved-row-bg: #818044; + --color-diff-added-row-bg: #283e2d; + --color-diff-removed-row-border: #634343; + --color-diff-moved-row-border: #bcca6f; + --color-diff-added-row-border: #314a37; + --color-diff-inactive: #333333; + --color-error-border: #a53a37; + --color-error-bg: #331111; + --color-error-text: #ff4433; + --color-success-border: #458a57; + --color-success-bg: #113322; + --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; + --color-body: #111111; + --color-box-header: #222222; + --color-box-body: #111111; + --color-text-dark: #dbe0ea; + --color-text: #bbc0ca; + --color-text-light: #a6aab5; + --color-text-light-2: #8a8e99; + --color-text-light-3: #707687; + --color-footer: #222222; + --color-timeline: #4c525e; + --color-input-text: #d5dbe6; + --color-input-background: #292929; + --color-input-border: #222222; + --color-input-border-hover: #505667; + --color-navbar: #222222; + --color-navbar-transparent: #22222200; + --color-light: #00000028; + --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-border: #ffffff28; + --color-hover: #ffffff10; + --color-active: #ffffff16; + --color-menu: #222222; + --color-card: #222222; + --color-markup-table-row: #ffffff06; + --color-markup-code-block: #292929; + --color-button: #333333; + --color-code-bg: #292929; + --color-code-sidebar-bg: #222222; + --color-shadow: #00000060; + --color-secondary-bg: #292929; + --color-text-focus: #fff; + --color-expand-button: #3c404d; + --color-placeholder-text: #6a737d; + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-board-bg: var(--color-secondary-light-2); + --color-caret: var(--color-text); + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40) +} + +::-webkit-calendar-picker-indicator { + filter: invert(.8) +} + +.ui.horizontal.segments>.segment { + background-color: #111111 +} + +.ui.green.progress .bar { + background-color: #684 +} + +.ui.progress.success .bar { + background-color: #7b9e57 !important +} + +.following.bar.light { + background: #222222; + border-color: var(--color-secondary-alpha-40) +} + +.following.bar .top.menu a.item:hover { + color: #fff +} + +.feeds .list ul li.private { + background: #353945 +} + +.ui.red.label, +.ui.red.labels .label { + background-color: #7d3434 !important; + border-color: #8a2121 !important +} + +.ui.yellow.label, +.ui.yellow.labels .label { + border-color: #664d02 !important; + background-color: #936e00 !important +} + +.ui.accordion .title:not(.ui) { + color: #dbdbdb +} + +.ui.green.label, +.ui.green.labels .label, +.ui.basic.green.label { + background-color: #2d693b !important; + border-color: #2d693b !important +} + +.ui.green.labels a.label:hover, +.ui.basic.green.labels a.label:hover, +a.ui.ui.ui.green.label:hover, +a.ui.basic.green.label:hover { + background-color: #3d794b !important; + border-color: #3d794b !important; + color: #fff !important +} + +.ui.divider:not(.vertical):not(.horizontal) { + border-bottom-color: var(--color-secondary); + border-top-color: transparent +} + +.form .help { + color: #7f8699 +} + +.ui .text.light.grey { + color: #7f8699 !important +} + +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.ui.form .fields.error .field input:not([type]), +.ui.form .fields.error .field input[type=date], +.ui.form .fields.error .field input[type=datetime-local], +.ui.form .fields.error .field input[type=email], +.ui.form .fields.error .field input[type=number], +.ui.form .fields.error .field input[type=password], +.ui.form .fields.error .field input[type=search], +.ui.form .fields.error .field input[type=tel], +.ui.form .fields.error .field input[type=time], +.ui.form .fields.error .field input[type=text], +.ui.form .fields.error .field input[type=file], +.ui.form .fields.error .field input[type=url], +.ui.form .field.error textarea, +.ui.form .field.error select, +.ui.form .field.error input:not([type]), +.ui.form .field.error input[type=date], +.ui.form .field.error input[type=datetime-local], +.ui.form .field.error input[type=email], +.ui.form .field.error input[type=number], +.ui.form .field.error input[type=password], +.ui.form .field.error input[type=search], +.ui.form .field.error input[type=tel], +.ui.form .field.error input[type=time], +.ui.form .field.error input[type=text], +.ui.form .field.error input[type=file], +.ui.form .field.error input[type=url] { + background-color: #522; + border: 1px solid #7d3434; + color: #f9cbcb +} + +.ui.form .field.error select:focus, +.ui.form .field.error input:not([type]):focus, +.ui.form .field.error input[type=date]:focus, +.ui.form .field.error input[type=datetime-local]:focus, +.ui.form .field.error input[type=email]:focus, +.ui.form .field.error input[type=number]:focus, +.ui.form .field.error input[type=password]:focus, +.ui.form .field.error input[type=search]:focus, +.ui.form .field.error input[type=tel]:focus, +.ui.form .field.error input[type=time]:focus, +.ui.form .field.error input[type=text]:focus, +.ui.form .field.error input[type=file]:focus, +.ui.form .field.error input[type=url]:focus { + background-color: #522; + border: 1px solid #a04141; + color: #f9cbcb +} + +.ui.green.button, +.ui.green.buttons .button { + background-color: #446611 +} + +.ui.green.button:hover, +.ui.green.buttons .button:hover { + background-color: #448811 +} + +.ui.search>.results { + background: #111111; + border-color: var(--color-secondary) +} + +.ui.search>.results .result:hover, +.ui.category.search>.results .category .result:hover { + background: var(--color-secondary) +} + +.ui.search>.results .result .title { + color: #dbdbdb +} + +.ui.table>thead>tr>th { + background: var(--color-secondary); + color: #dbdbdb !important +} + +.repository.file.list #repo-files-table tr { + background: #111111 +} + +.repository.file.list #repo-files-table tr:hover { + background-color: #303030 !important +} + +.overflow.menu .items .item { + color: #9d9d9d +} + +.overflow.menu .items .item:hover { + color: #dbdbdb +} + +.ui.list>.item>.content { + color: var(--color-secondary-dark-6) !important +} + +.repository .navbar .active.item, +.repository .navbar .active.item:hover { + border-color: transparent !important +} + +.repository .diff-stats li { + border-color: var(--color-secondary) +} + +.tag-code, +.tag-code td { + background: #353945 !important +} + +.tag-code td.lines-num { + background-color: #3a3e4c !important +} + +.tag-code td.lines-type-marker, +td.blob-hunk { + color: #dbdbdb !important +} + +.ui.red.button, +.ui.red.buttons .button { + background-color: #7d3434 +} + +.ui.red.button:hover, +.ui.red.buttons .button:hover { + background-color: #984646 +} + +.ui.list .list>.item .header, +.ui.list>.item .header { + color: #dedede +} + +.ui.list .list>.item .description, +.ui.list>.item .description { + color: var(--color-secondary-dark-6) +} + +.repository.labels .ui.basic.black.label { + background-color: #bbb !important +} + +.lines-num { + color: var(--color-secondary-dark-6) !important; + border-color: var(--color-secondary) !important +} + +td.blob-excerpt { + background-color: #00000026 +} + +.lines-code.active, +.lines-code .active { + background: #534d1b !important +} + +.ui.ui.ui.ui.table tr.active, +.ui.ui.table td.active { + color: #dbdbdb +} + +.ui.active.label { + background: #303030; + border-color: #303030; + color: #dbdbdb +} + +.ui.header .sub.header { + color: var(--color-secondary-dark-6) +} + +.ui.dividing.header { + border-bottom: 1px solid var(--color-secondary) +} + +.ui.modal>.header { + background: var(--color-secondary); + color: #dbdbdb +} + +.ui.modal>.actions { + background: var(--color-secondary); + border-color: var(--color-secondary) +} + +.ui.modal>.content { + background: #111111 +} + +.minicolors-panel { + background: var(--color-secondary) !important; + border-color: #6a737d !important +} + +.emoji[aria-label="check mark"], +.emoji[aria-label="currency exchange"], +.emoji[aria-label="TOP arrow"], +.emoji[aria-label="END arrow"], +.emoji[aria-label="ON! arrow"], +.emoji[aria-label="SOON arrow"], +.emoji[aria-label="heavy dollar sign"], +.emoji[aria-label=copyright], +.emoji[aria-label=registered], +.emoji[aria-label="trade mark"], +.emoji[aria-label=multiply], +.emoji[aria-label=plus], +.emoji[aria-label=minus], +.emoji[aria-label=divide], +.emoji[aria-label="curly loop"], +.emoji[aria-label="double curly loop"], +.emoji[aria-label="wavy dash"], +.emoji[aria-label="paw prints"], +.emoji[aria-label="musical note"], +.emoji[aria-label="musical notes"] { + filter: invert(100%) hue-rotate(180deg) +} + +.edit-diff>div>.ui.table { + border-left-color: var(--color-secondary) !important; + border-right-color: var(--color-secondary) !important +} + +footer .container .links>* { + border-left-color: #888 +} + +.repository.release #release-list>li .detail .dot { + background-color: #505667; + border-color: #111111 +} + +.tribute-container { + box-shadow: 0 .25rem .5rem #0009 +} + +.repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar { + color: #222222 +} + +img[src$="/img/matrix.svg"] { + filter: invert(80%) +} + +.is-loading:after { + border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da +} + +.markup-block-error { + border: 1px solid rgba(121, 71, 66, .5) !important; + border-bottom: none !important +} + +.ui.blue.button { + background-color: #222222 !important; +} + +.ui.basic.blue.button { + box-shadow: inset 0 0 0 1px #444444 !important; +} + +.ui.blue.button:focus { + background-color: #303030 !important; +} + +.ui.blue.button:hover { + background-color: #303030 !important; +} + +.ui.primary.buttons .button { + background-color: #446611 !important; +} + +.ui.primary.buttons .button:hover { + background-color: #448811 !important; +} + +.ui.primary.buttons .button:focus { + background-color: #448811 !important; +} + +.ui.primary.button { + background-color: #446611 !important; +} + +.ui.primary.button:hover { + background-color: #448811 !important; +} + +.ui.primary.button:focus { + background-color: #448811 !important; +} + +.ui.blue.label { + background-color: #446611 !important; +} + +::selection { + background: #303030 !important; + color: var(--color-white) !important; +} + +.ui.form .field.field input:active { + box-shadow: 0 0 0 0px !important; + border-color: #448811 !important; +} + +.ui.form .field.field input:autofill { + box-shadow: 0 0 0 0px !important; + border-color: #448811 !important; +} + +.ui.form .field.field input:autofill:focus { + box-shadow: 0 0 0 0px !important; + border-color: #448811 !important; +} + +.ui.form .field.field input:autofill:active { + box-shadow: 0 0 0 0px !important; + border-color: #448811 !important; +} + +#dashboard-repo-list > div > div:first-child { + display: none !important; +}