diff --git a/flake.nix b/flake.nix index 7a1cb6c..7ffaf9c 100644 --- a/flake.nix +++ b/flake.nix @@ -17,7 +17,10 @@ in { packages = forAllSystems (system: pkgs: { default = self.packages.${system}.gitea-theme-monokai; + gitea-theme-catppuccin = pkgs.callPackage ./themes/catppuccin { }; + gitea-theme-earl-grey = pkgs.callPackage ./themes/pitch-black { }; gitea-theme-monokai = pkgs.callPackage ./themes/monokai { }; + gitea-theme-pitch-black = pkgs.callPackage ./themes/earl-grey { }; test-machine = let system = "x86_64-linux"; @@ -37,14 +40,20 @@ } ({pkgs, ... }: { services.gitea.enable = true; + services.gitea-themes."catppuccin" = pkgs.gitea-theme-catppuccin; + services.gitea-themes."earl-grey" = pkgs.gitea-theme-earl-grey; services.gitea-themes."monokai" = pkgs.gitea-theme-monokai; + services.gitea-themes."pitch-black" = pkgs.gitea-theme-pitch-black; }) ]; }).config.system.build.toplevel; }); overlays.default = final: prev: { + inherit (self.packages.${final.system}) gitea-theme-catppuccin; + inherit (self.packages.${final.system}) gitea-theme-earl-grey; inherit (self.packages.${final.system}) gitea-theme-monokai; + inherit (self.packages.${final.system}) gitea-theme-pitch-black; }; nixosModules.default = ./module.nix; diff --git a/themes/catppuccin/default.nix b/themes/catppuccin/default.nix new file mode 100644 index 0000000..5059107 --- /dev/null +++ b/themes/catppuccin/default.nix @@ -0,0 +1,10 @@ +{ runCommand +, scssc +}: + +runCommand "gitea-catppuccin-theme" { + buildInputs = [ scssc ]; +} '' + mkdir $out + scss ${./theme-catppuccin.scss} $out/share/gitea/public/assets/css/theme-catppuccin.css +'' diff --git a/themes/catppuccin/theme-catppuccin.scss b/themes/catppuccin/theme-catppuccin.scss new file mode 100644 index 0000000..521df5f --- /dev/null +++ b/themes/catppuccin/theme-catppuccin.scss @@ -0,0 +1,332 @@ +@use "sass:color"; + +// context-aware lighten: darkens if dark, lightens if light +@function ctx_lighten($color, $amount) { + $multiplier: if($isDark, -1, 1); + @return color.adjust($color, $lightness: $amount * $multiplier); +} + +$lvl1: if($isDark, $crust, $base); +$lvl2: $mantle; +$lvl3: if($isDark, $base, $crust); + +:root { + @if $isDark { + color-scheme: dark; + --is-dark-theme: true; + } @else { + color-scheme: light; + --is-dark-theme: false; + } + + accent-color: #{$accent}; + + --color-primary: #{$accent}; + --color-primary-contrast: #{$lvl1}; + --color-primary-hover: #{ctx_lighten($accent, 5%)}; + + --color-primary-dark-1: #{ctx_lighten($accent, 3%)}; + --color-primary-dark-2: #{ctx_lighten($accent, 6%)}; + --color-primary-dark-3: #{ctx_lighten($accent, 9%)}; + --color-primary-dark-4: #{ctx_lighten($accent, 12%)}; + --color-primary-dark-5: #{ctx_lighten($accent, 15%)}; + --color-primary-dark-6: #{ctx_lighten($accent, 18%)}; + --color-primary-dark-7: #{ctx_lighten($accent, 21%)}; + + --color-primary-light-1: #{ctx_lighten($accent, -3%)}; + --color-primary-light-2: #{ctx_lighten($accent, -6%)}; + --color-primary-light-3: #{ctx_lighten($accent, -9%)}; + --color-primary-light-4: #{ctx_lighten($accent, -12%)}; + --color-primary-light-5: #{ctx_lighten($accent, -15%)}; + --color-primary-light-6: #{ctx_lighten($accent, -18%)}; + --color-primary-light-7: #{ctx_lighten($accent, -21%)}; + + --color-primary-alpha-10: #{color.change($accent, $alpha: 0.1)}; + --color-primary-alpha-20: #{color.change($accent, $alpha: 0.2)}; + --color-primary-alpha-30: #{color.change($accent, $alpha: 0.3)}; + --color-primary-alpha-40: #{color.change($accent, $alpha: 0.4)}; + --color-primary-alpha-50: #{color.change($accent, $alpha: 0.5)}; + --color-primary-alpha-60: #{color.change($accent, $alpha: 0.6)}; + --color-primary-alpha-70: #{color.change($accent, $alpha: 0.7)}; + --color-primary-alpha-80: #{color.change($accent, $alpha: 0.8)}; + --color-primary-alpha-90: #{color.change($accent, $alpha: 0.9)}; + + --color-secondary: #{$surface1}; + + --color-secondary-dark-1: #{ctx_lighten($surface0, -3%)}; + --color-secondary-dark-2: #{ctx_lighten($surface0, -6%)}; + --color-secondary-dark-3: #{ctx_lighten($surface0, -9%)}; + --color-secondary-dark-4: #{ctx_lighten($surface0, -12%)}; + --color-secondary-dark-5: #{ctx_lighten($surface0, -15%)}; + --color-secondary-dark-6: #{ctx_lighten($surface0, -18%)}; + --color-secondary-dark-7: #{ctx_lighten($surface0, -21%)}; + --color-secondary-dark-8: #{ctx_lighten($surface0, -24%)}; + --color-secondary-dark-9: #{ctx_lighten($surface0, -27%)}; + --color-secondary-dark-10: #{ctx_lighten($surface0, -30%)}; + --color-secondary-dark-11: #{ctx_lighten($surface0, -33%)}; + --color-secondary-dark-12: #{ctx_lighten($surface0, -36%)}; + --color-secondary-dark-13: #{ctx_lighten($surface0, -39%)}; + + --color-secondary-light-1: #{ctx_lighten($surface0, 3%)}; + --color-secondary-light-2: #{ctx_lighten($surface0, 6%)}; + --color-secondary-light-3: #{ctx_lighten($surface0, 9%)}; + --color-secondary-light-4: #{ctx_lighten($surface0, 12%)}; + + --color-secondary-alpha-10: #{color.change($surface0, $alpha: 0.1)}; + --color-secondary-alpha-20: #{color.change($surface0, $alpha: 0.2)}; + --color-secondary-alpha-30: #{color.change($surface0, $alpha: 0.3)}; + --color-secondary-alpha-40: #{color.change($surface0, $alpha: 0.4)}; + --color-secondary-alpha-50: #{color.change($surface0, $alpha: 0.5)}; + --color-secondary-alpha-60: #{color.change($surface0, $alpha: 0.6)}; + --color-secondary-alpha-70: #{color.change($surface0, $alpha: 0.7)}; + --color-secondary-alpha-80: #{color.change($surface0, $alpha: 0.8)}; + --color-secondary-alpha-90: #{color.change($surface0, $alpha: 0.9)}; + + /* colors */ + --color-red: #{$red}; + --color-orange: #{$peach}; + --color-yellow: #{$yellow}; + --color-olive: #{$green}; + --color-green: #{$green}; + --color-teal: #{$teal}; + --color-blue: #{$blue}; + --color-violet: #{$lavender}; + --color-purple: #{$mauve}; + --color-pink: #{$pink}; + --color-brown: #{$flamingo}; + --color-grey: #{$overlay2}; + --color-black: #{if(isDark, $mantle, $text)}; + + /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-light: #{ctx_lighten($red, 10%)}; + --color-orange-light: #{ctx_lighten($peach, 10%)}; + --color-yellow-light: #{ctx_lighten($yellow, 10%)}; + --color-olive-light: #{ctx_lighten($green, 10%)}; + --color-green-light: #{ctx_lighten($green, 10%)}; + --color-teal-light: #{ctx_lighten($teal, 10%)}; + --color-blue-light: #{ctx_lighten($blue, 10%)}; + --color-violet-light: #{ctx_lighten($lavender, 10%)}; + --color-purple-light: #{ctx_lighten($mauve, 10%)}; + --color-pink-light: #{ctx_lighten($pink, 10%)}; + --color-brown-light: #{ctx_lighten($flamingo, 10%)}; + --color-grey-light: #{ctx_lighten($overlay2, 10%)}; + --color-black-light: #{if( + isDark, + ctx_lighten($mantle, 10%), + ctx_lighten($text, 10%) + )}; + + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-dark-1: #{ctx_lighten($red, 10%)}; + --color-orange-dark-1: #{ctx_lighten($peach, 10%)}; + --color-yellow-dark-1: #{ctx_lighten($yellow, 10%)}; + --color-olive-dark-1: #{ctx_lighten($green, 10%)}; + --color-green-dark-1: #{ctx_lighten($green, 10%)}; + --color-teal-dark-1: #{ctx_lighten($teal, 10%)}; + --color-blue-dark-1: #{ctx_lighten($blue, 10%)}; + --color-violet-dark-1: #{ctx_lighten($lavender, 10%)}; + --color-purple-dark-1: #{ctx_lighten($mauve, 10%)}; + --color-pink-dark-1: #{ctx_lighten($pink, 10%)}; + --color-brown-dark-1: #{ctx_lighten($flamingo, 10%)}; + --color-black-dark-1: #{ctx_lighten($mantle, 10%)}; + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ + --color-red-dark-2: #{ctx_lighten($red, 20%)}; + --color-orange-dark-2: #{ctx_lighten($peach, 20%)}; + --color-yellow-dark-2: #{ctx_lighten($yellow, 20%)}; + --color-olive-dark-2: #{ctx_lighten($green, 20%)}; + --color-green-dark-2: #{ctx_lighten($green, 20%)}; + --color-teal-dark-2: #{ctx_lighten($teal, 20%)}; + --color-blue-dark-2: #{ctx_lighten($blue, 20%)}; + --color-violet-dark-2: #{ctx_lighten($lavender, 20%)}; + --color-purple-dark-2: #{ctx_lighten($mauve, 20%)}; + --color-pink-dark-2: #{ctx_lighten($pink, 20%)}; + --color-brown-dark-2: #{ctx_lighten($flamingo, 20%)}; + --color-black-dark-2: #{ctx_lighten($mantle, 20%)}; + + /* other colors */ + --color-gold: #{$rosewater}; + --color-white: #{$text}; + --color-diff-removed-word-bg: #{color.change($red, $alpha: 0.15)}; + --color-diff-added-word-bg: #{color.change($green, $alpha: 0.15)}; + --color-diff-removed-row-bg: #{color.change($red, $alpha: 0.07)}; + --color-diff-moved-row-bg: #{color.change($yellow, $alpha: 0.07)}; + --color-diff-added-row-bg: #{color.change($green, $alpha: 0.07)}; + --color-diff-removed-row-border: #{color.change($red, $alpha: 0.07)}; + --color-diff-moved-row-border: #{color.change($yellow, $alpha: 0.07)}; + --color-diff-added-row-border: #{color.change($green, $alpha: 0.07)}; + --color-diff-inactive: #{$overlay2}; + --color-error-border: #{$red}; + --color-error-bg: #{$red}; + --color-error-bg-active: #{ctx_lighten($red, 5%)}; + --color-error-bg-hover: #{ctx_lighten($red, 10%)}; + --color-error-text: #{$lvl1}; + --color-success-border: #{ctx_lighten($green, 10%)}; + --color-success-bg: #{$green}; + --color-success-text: #{$lvl1}; + --color-warning-border: #{ctx_lighten($yellow, 10%)}; + --color-warning-bg: #{$yellow}; + --color-warning-text: #{$lvl1}; + --color-info-border: #{ctx_lighten($blue, 10%)}; + --color-info-bg: #{$lvl1}; + --color-info-text: #{$text}; + --color-red-badge: #{ctx_lighten($red, 10%)}; + --color-red-badge-bg: #{$lvl1}; + --color-red-badge-hover-bg: #{ctx_lighten($red, 5%)}; + --color-green-badge: #{$green}; + --color-green-badge-bg: #{$green}; + --color-green-badge-hover-bg: #{ctx_lighten($green, 5%)}; + --color-yellow-badge: #{$yellow}; + --color-yellow-badge-bg: #{$lvl1}; + --color-yellow-badge-hover-bg: #{ctx_lighten($yellow, 5%)}; + --color-orange-badge: #{$peach}; + --color-orange-badge-bg: #{$lvl1}; + --color-orange-badge-hover-bg: #{ctx_lighten($peach, 5%)}; + --color-git: #{$peach}; + --color-highlight-bg: #{color.change($yellow, $alpha: 0.15)}; + + /* target-based colors */ + --color-body: #{$lvl1}; + --color-box-header: #{$lvl2}; + --color-box-body: #{$lvl2}; + --color-box-body-highlight: #{$surface0}; + --color-text-dark: #{$subtext0}; + --color-text: #{$text}; + --color-text-light: #{$subtext1}; + --color-text-light-1: #{$subtext1}; + --color-text-light-2: #{$subtext1}; + --color-text-light-3: #{$subtext1}; + --color-footer: #{$lvl2}; + --color-timeline: #{$surface0}; + --color-input-text: #{$text}; + --color-input-background: #{$surface0}; + --color-input-toggle-background: #{$surface0}; + --color-input-border: #{$surface1}; + --color-input-border-hover: #{$surface2}; + --color-nav-bg: #{$lvl2}; + --color-nav-hover-bg: #{$surface0}; + --color-navbar: #{$lvl2}; + --color-navbar-transparent: #{color.change($lvl1, $alpha: 0)}; + --color-light: #{color.change($surface2, $alpha: 0.3)}; + --color-light-mimic-enabled: rgba( + 0, + 0, + 0, + calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) + ); + --color-light-border: #{$surface2}; + --color-hover: #{color.change($overlay0, $alpha: 0.1)}; + --color-active: #{color.change($text, $alpha: 0.1)}; + --color-menu: #{$surface0}; + --color-card: #{$surface0}; + --color-markup-table-row: #{color.change($text, $alpha: 0.02)}; + --color-markup-code-block: #{color.change($text, $alpha: 0.05)}; + --color-markup-code-inline: #{$surface0}; + --color-button: #{$surface0}; + --color-code-bg: #{$base}; + --color-code-sidebar-bg: #{$surface0}; + --color-shadow: #{color.change($lvl1, $alpha: 0.1)}; + --color-tooltip-bg: #{$surface0}; + --color-tooltip-text: var(--color-text); + --color-secondary-bg: #{$surface0}; + --color-text-focus: #{$text}; + --color-expand-button: #{$surface2}; + --color-placeholder-text: #{$subtext0}; + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-board-bg: var(--color-secondary-light-2); + /* gitea source code: */ + /* should ideally be --color-text-dark, see go-gitea/gitea#15651 */ + --color-caret: var(--color-text); + --color-reaction-bg: #{color.change($text, $alpha: 0.07)}; + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-wrapper: #{$lvl2}; + --color-header-wrapper-transparent: #{color.change($lvl2, $alpha: 0)}; + --color-label-text: #{$crust}; + --color-label-bg: #{$accent}; + --color-label-hover-bg: #{ctx_lighten($accent, 6%)}; + --color-label-active-bg: #{ctx_lighten($accent, 3%)}; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #{$surface1}; +} + +@if $isDark { + /* invert emojis that are hard to read otherwise */ + .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); + } +} + +.ui.ui.ui.button:not(.inverted, .basic), +.ui.ui.ui.label:not(.inverted, .basic) { + &.primary, + &.green, + &.red, + &.teal { + color: $lvl1; + &:hover { + color: $lvl3; + } + } +} + +.ui.basic.modal { + background-color: $lvl3; +} + +// link color for signed commits +.ui.commit-header-row .svg.gitea-lock ~ a { + color: $lvl1; +} + +// error message headers weirdly don't seem to be using --color-error-text +.ui.negative.message .header { + color: var(--color-error-text) +} + +// most recent commit hover when signed +.ui.sha.isSigned.isVerified { + .shortsha { + color: $lvl1; + } + svg.gitea-lock { + fill: $lvl1; + } +} + +// modal text color for the "Remove GPG Key" modal +.ui.basic.modal, +.ui.basic.modal > .header, +.ui.inverted.button { + color: $text !important; +} + +.inline-code-block { + color: #{$crust}; +} + +::selection { + background: color.change($accent, $alpha: 0.3) !important; +} + +@import "chroma"; +@import "codemirror"; +@import "monaco"; diff --git a/themes/earl-grey/default.nix b/themes/earl-grey/default.nix new file mode 100644 index 0000000..9f2aad7 --- /dev/null +++ b/themes/earl-grey/default.nix @@ -0,0 +1,8 @@ +{ runCommand +}: + +runCommand "gitea-earl-grey-theme" { +} '' + mkdir $out + cp ${./theme-earl-grey.css} $out/share/gitea/public/assets/css/theme-earl-grey.css +'' diff --git a/themes/earl-grey/theme-earl-grey.css b/themes/earl-grey/theme-earl-grey.css new file mode 100644 index 0000000..ff6ec0f --- /dev/null +++ b/themes/earl-grey/theme-earl-grey.css @@ -0,0 +1,927 @@ +/* + Earl Grey theme for Gitea + Version: 1.0.41 + Repository: https://github.com/Troplo/earl-grey + License: MIT (https://github.com/Troplo/earl-grey/blob/master/LICENSE) / Copyright (c) 2024 Troplo & Pinnoto +*/ + +.chroma .hl { + background-color: #3f424d; +} +.chroma .ln, +.chroma .lnt { + 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 .bp, +.chroma .nb { + 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 .nt, +.chroma .nv, +.chroma .nx { + color: #9daccc; +} +.chroma .vc { + color: #f81; +} +.chroma .vg, +.chroma .vi { + color: #fa1; +} +.chroma .s, +.chroma .sa { + color: #1af; +} +.chroma .sb { + color: #40aaff; +} +.chroma .dl, +.chroma .sc { + color: #1af; +} +.chroma .sd { + color: #6a737d; +} +.chroma .s2 { + color: #40aaff; +} +.chroma .se { + color: #f63; +} +.chroma .sh { + color: #1af; +} +.chroma .si, +.chroma .sx { + color: #fa1; +} +.chroma .sr { + color: #97c; +} +.chroma .s1 { + color: #40aaff; +} +.chroma .ss { + color: #fa1; +} +.chroma .il, +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .mo { + color: #1af; +} +.chroma .o { + color: #f63; +} +.chroma .ow { + color: #5f8700; +} +.chroma .c, +.chroma .c1, +.chroma .ch, +.chroma .cm { + color: #6a737d; +} +.chroma .cs { + color: #637d; +} +.chroma .cp, +.chroma .cpf { + color: #fc6; +} +.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: #888888; +} +.chroma .gp { + color: #555555; +} +.chroma .gu { + color: #9daccc; +} +.chroma .gt { + color: #f63; +} +.chroma .w { + color: #bbbbbb; +} +:root { + --color-secondary-nav-bg: var(--color-header-wrapper); + --color-label-bg: var(--color-light-border); + --color-label-bg-alt: var(--color-light-border); + --color-overlay-backdrop: #080808c0; + --color-primary-contrast: black; + --color-header-wrapper: #24262b; + --color-nav-bg: #1d1f23; + --color-primary: #5993e6; + --color-primary-dark-1: #739cb3; + --color-primary-dark-2: #40aaff; + --color-primary-dark-3: #92b4c4; + --color-primary-dark-4: #a1bbcd; + --color-primary-dark-5: #cfddc1; + --color-primary-dark-6: #e7eee0; + --color-primary-dark-7: #f8faf6; + --color-primary-light-1: #3d84e7; + --color-primary-light-2: #437aad; + --color-primary-light-3: #415b8b; + --color-primary-light-4: #25425a; + --color-primary-light-5: #223546; + --color-primary-light-6: #131923; + --color-primary-light-7: #06090b; + --color-primary-alpha-10: #3683c019; + --color-primary-alpha-20: #3683c033; + --color-primary-alpha-30: #3683c04b; + --color-primary-alpha-40: #3683c066; + --color-primary-alpha-50: #3683c080; + --color-primary-alpha-60: #3683c099; + --color-primary-alpha-70: #3683c0b3; + --color-primary-alpha-80: #3683c0cc; + --color-primary-alpha-90: #3683c0e1; + --color-secondary: #2c2f35; + --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-7: #b6bac5; + --color-secondary-dark-8: #c4c7d0; + --color-secondary-dark-8: #d2d4db; + --color-secondary-dark-9: #dfe1e6; + --color-secondary-dark-10: #edeef1; + --color-secondary-dark-11: #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: #2c2f35; + --color-secondary-alpha-20: #2c2f3533; + --color-secondary-alpha-30: #2c2f354b; + --color-secondary-alpha-40: #2c2f3566; + --color-secondary-alpha-50: #2c2f3580; + --color-secondary-alpha-60: #2c2f3599; + --color-secondary-alpha-70: #2c2f35b3; + --color-secondary-alpha-80: #2c2f35cc; + --color-secondary-alpha-90: #2c2f35e1; + --color-red: #da3737; + --color-orange: #f17a2b; + --color-yellow: #f3c640; + --color-olive: #c8df36; + --color-green: #3bc75b; + --color-teal: #69d4cf; + --color-blue: #2d9ff7; + --color-violet: #754ad3; + --color-purple: #b65dd4; + --color-pink: #e04b9f; + --color-brown: #a86d45; + --color-grey: #797c85; + --color-black: #141516; + --color-gold: #d4b74c; + --color-white: #ffffff; + --color-diff-removed-word-bg: #6f3333; + --color-diff-added-word-bg: #3c653c; + --color-diff-removed-row-bg: #3c2626; + --color-diff-added-row-bg: #283e2d; + --color-diff-removed-row-border: #634343; + --color-diff-added-row-border: #314a37; + --color-diff-inactive: #1d1f23; + --color-body: #1d1f23; + /* main body color */ + --color-box-header: #1d1f23; + --color-box-body: #1d1f23; + --color-text-dark: #dbe0ea; + --color-text: #bbc0ca; + --color-text-light: #a6aab5; + --color-text-light-1: #a6aab5; + --color-text-light-2: #8a8e99; + --color-text-light-3: #707687; + --color-footer: #1d1f23; + --color-timeline: #4c525e; + --color-input-text: #d5dbe6; + --color-input-background: #2c2f35; + --color-input-border: #2c2f35; + --color-input-border-hover: #505667; + --color-navbar: #24262b; + --color-light: #00000028; + --color-light-border: #ffffff28; + --color-hover: #ffffff10; + --color-active: #ffffff16; + --color-menu: #1d1f23; + --color-card: #1d1f23; + --color-markdown-table-row: #ffffff06; + --color-markdown-code-block: #2c2f35; + --color-button: #1d1f23; + --color-code-bg: #1d1f23; + --color-shadow: #00000060; + --color-secondary-bg: #2c2f35; + --color-text-focus: #fff; + --color-expand-button: #2c2f35; + --color-placeholder-text: #6a737d; + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-board-bg: var(--color-secondary-light-2); + --color-label-text: #fff; +} +.monaco-editor .line-numbers.active-line-number { + --vscode-editorLineNumber-activeForeground: var(--color-primary) !important; +} +.monaco-editor .bracket-highlighting-0 { + color: var(--color-purple) !important; +} +#git-graph-container li .time { + color: #84909e !important; +} +::-webkit-calendar-picker-indicator { + filter: invert(0.8); +} +.ui.horizontal.segments > .segment { + background-color: #2c2f35; +} +.repository .segment.reactions .ui.label.basic.blue { + background: var(--color-primary-alpha-20) !important; +} +[data-tooltip]:after, +[data-tooltip]:before, +.tippy-box { + background: var(--color-header-wrapper) !important; + color: #dbdbdb !important; + border: 1px solid var(--color-secondary-dark-1) !important; +} +.tippy-svg-arrow { + fill: var(--color-header-wrapper) !important; +} +.tippy-svg-arrow-outer { + stroke: var(--color-secondary-dark-1) !important; + stroke-width: 0.7px !important; +} +[data-tooltip]:before { + box-shadow: 1px 1px 0 0 #1b1c1d !important; +} +.ui.green.progress .bar { + background-color: #668844; +} +.ui.progress.success .bar { + background-color: #7b9e57 !important; +} +.following.bar.light { + background: #1d1f23; + border-color: var(--color-secondary-alpha-40); +} +.following.bar .top.menu a.item:hover { + color: #fff; +} +.feeds .list ul li.private { + background: #1d1f23; +} +.ui.link.list .item, +.ui.link.list .item a:not(.ui), +.ui.link.list a.item { + color: #dbdbdb; +} +.ui.red.label, +.ui.red.labels .label { + background-color: #e14c4c !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.basic.green.label, +.ui.green.label, +.ui.green.labels .label { + background-color: #0060ac !important; + border-color: #0060ac !important; +} +.ui.basic.green.labels a.label:hover, +.ui.green.labels a.label:hover, +a.ui.basic.green.label:hover, +a.ui.ui.ui.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 .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="file"], +.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="text"], +.ui.form .field.error input[type="time"], +.ui.form .field.error input[type="url"], +.ui.form .field.error select, +.ui.form .field.error textarea, +.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="file"], +.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="text"], +.ui.form .fields.error .field input[type="time"], +.ui.form .fields.error .field input[type="url"], +.ui.form .fields.error .field select, +.ui.form .fields.error .field textarea { + background-color: #522; + border: 1px solid #e14c4c; + color: #f9cbcb; +} +.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="file"]: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="text"]:focus, +.ui.form .field.error input[type="time"]:focus, +.ui.form .field.error input[type="url"]:focus, +.ui.form .field.error select:focus { + background-color: #522; + border: 1px solid #a04141; + color: #f9cbcb; +} +.ui.green.button, +.ui.green.buttons .button, +.ui.primary.button, +.ui.primary.buttons .button, +.ui.primary.sha.label { + background-color: var(--color-primary) !important; +} +/* Basic button type has an outline instead of filled */ +.ui.button:not(.basic) { + border: 0; +} +.ui.green.button:hover, +.ui.green.buttons .button:hover, +.ui.primary.button:hover, +.ui.primary.buttons .button:hover, +.ui.primary.sha.label:hover { + background-color: var(--color-primary-light-2) !important; +} +.ui.search > .results { + background: #1d1f23; + border-color: var(--color-secondary); +} +.ui.category.search > .results .category .result:hover, +.ui.search > .results .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: #1d1f23; +} +.repository.file.list #repo-files-table tr:hover { + background-color: #24262b !important; +} +.repository.file.editor.edit + .editor-preview-side, +.repository.file.editor.edit .editor-preview, +.repository.file.editor.edit .editor-preview-side, +.repository.wiki.new .CodeMirror + .editor-preview-side, +.repository.wiki.new .CodeMirror .editor-preview, +.repository.wiki.new .CodeMirror .editor-preview-side { + background: #24262b; +} +.repository.file.editor.edit + + .editor-preview-side + .markdown:not(code).ui.segment, +.repository.file.editor.edit + .editor-preview-side + .markdown:not(code).ui.segment, +.repository.file.editor.edit .editor-preview .markdown:not(code).ui.segment, +.repository.wiki.new + .CodeMirror + + .editor-preview-side + .markdown:not(code).ui.segment, +.repository.wiki.new + .CodeMirror + .editor-preview-side + .markdown:not(code).ui.segment, +.repository.wiki.new + .CodeMirror + .editor-preview + .markdown:not(code).ui.segment { + border-width: 0; +} +.overflow.menu .items .item { + color: #9d9d9d; +} +.overflow.menu .items .item:hover { + color: #dbdbdb; +} +.ui.list > .item > .content { + color: var(--color-secondary-dark-6) !important; +} +.ui.active.button, +.ui.active.button:active, +.ui.button:active, +.ui.button:focus { + background-color: #2c2f35; + /* color: #dbdbdb; */ +} +.ui.green.button:active, +.ui.green.buttons .button:active, +.ui.primary.button:active, +ui.primary.buttons .button:active { + background-color: var(--color-primary); + color: var(--color-primary-contrast) !important; + text-shadow: none; +} +.ui.green.button, +.ui.primary.button { + color: var(--color-primary-contrast) !important; +} +.ui.green.button:focus, +.ui.green.buttons .button:focus { + background-color: var(--color-primary); + color: var(--color-primary-contrast) !important; + text-shadow: none; +} +.ui.active.button:hover { + background-color: #474b51; + color: #dbdbdb; +} +.repository .navbar .active.item, +.repository .navbar .active.item:hover { + border-color: transparent !important; +} +.ui .info.segment.top { + background-color: var(--color-secondary) !important; +} +.repository .diff-stats li { + border-color: var(--color-secondary); +} +.tag-code, +.tag-code td { + background: #24262b !important; +} +.tag-code td.lines-num { + background-color: #3a3e4c !important; +} +.tag-code td.lines-type-marker, +td.blob-hunk { + color: #dbdbdb !important; +} +.ui.attached.info.message, +.ui.info.message { + box-shadow: inset 0 0 0 1px #4b5e71, 0 0 0 0 transparent; +} +.ui.bottom.attached.message { + background-color: #2c662d; + color: white; +} +.ui.bottom.attached.message .pull-right { + color: #3683c0; +} +.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.error.message, +.ui.red.message { + background-color: #522; + color: #f9cbcb; + border-color: #a04141 !important; + box-shadow: inset 0 0 0 1px #a04141; +} +.ui .error.header, +.ui.error.message { + background-color: #522 !important; + border-color: #a04141 !important; +} +.ui.error.segment { + border-color: #a04141 !important; +} +.ui.red.button, +.ui.red.buttons .button { + background-color: #e14c4c; + color: black; +} +.ui.red.button:hover, +.ui.red.buttons .button:hover { + background-color: #984646; + color: black; +} +.ui.positive.message { + background-color: #48915a; + color: #ffffff; + box-shadow: inset 0 0 0 1px #48915a, 0 0 0 0 transparent; +} +.ui.negative.message { + background-color: #e14c4c; + color: #ffffff; + box-shadow: inset 0 0 0 1px #e14c4c, 0 0 0 0 transparent; +} +.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.file.list #repo-files-table tbody .svg.octicon-file-directory, +.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: #9aa0af; +} +.repository.labels .ui.basic.black.label { + background-color: #bbbbbb !important; +} +.blame .lines-num, +.lines-commit { + background: #1d1f23 !important; +} +.lines-num { + color: var(--color-secondary-dark-6) !important; + border-color: var(--color-secondary) !important; +} +td.blob-excerpt { + background-color: rgba(0, 0, 0, 0.15); +} +.lines-code.active, +.lines-code .active { + background: #534d1b !important; +} +.ui.ui.table td.active, +.ui.ui.ui.ui.table tr.active { + color: #dbdbdb; +} +.ui.active.label { + background: #393d4a; + border-color: #393d4a; + color: #dbdbdb; +} +.repository .ui.attached.message.isSigned.isVerified { + background-color: #394829; + color: var(--color-secondary-dark-6); +} +.repository .ui.attached.message.isSigned.isVerified.message { + color: #3683c0; +} +.repository .ui.attached.message.isSigned.isVerified.message .ui.text { + color: var(--color-secondary-dark-6); +} +.repository .ui.attached.message.isSigned.isVerified.message .pull-right { + color: #3683c0; +} +.repository .ui.attached.message.isSigned.isVerifiedUntrusted { + background-color: #4a3903; + color: var(--color-secondary-dark-6); +} +.repository .ui.attached.message.isSigned.isVerifiedUntrusted.message { + color: #c2c193; +} +.repository .ui.attached.message.isSigned.isVerifiedUntrusted.message .ui.text { + color: var(--color-secondary-dark-6); +} +.repository .ui.attached.message.isSigned.isVerifiedUntrusted.message a { + color: #c2c193; +} +.repository .ui.attached.message.isSigned.isVerifiedUnmatched { + background-color: #4e3321; + color: var(--color-secondary-dark-6); +} +.repository .ui.attached.message.isSigned.isVerifiedUnmatched.message { + color: #c2a893; +} +.repository .ui.attached.message.isSigned.isVerifiedUnmatched.message .ui.text { + color: var(--color-secondary-dark-6); +} +.repository .ui.attached.message.isSigned.isVerifiedUnmatched.message a { + color: #c2a893; +} +.repository .ui.attached.message.isSigned.isWarning { + background-color: rgba(80, 23, 17, 0.6); +} +.repository .ui.attached.message.isSigned.isWarning.message, +.repository .ui.attached.message.isSigned.isWarning.message .ui.text { + color: #d07d7d; +} +.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: #1d1f23; +} +.minicolors-panel { + background: var(--color-secondary) !important; + border-color: #6a737d !important; +} +.emoji[aria-label="check mark"], +.emoji[aria-label="curly loop"], +.emoji[aria-label="currency exchange"], +.emoji[aria-label="double curly loop"], +.emoji[aria-label="END arrow"], +.emoji[aria-label="heavy dollar sign"], +.emoji[aria-label="musical note"], +.emoji[aria-label="musical notes"], +.emoji[aria-label="ON! arrow"], +.emoji[aria-label="paw prints"], +.emoji[aria-label="SOON arrow"], +.emoji[aria-label="TOP arrow"], +.emoji[aria-label="trade mark"], +.emoji[aria-label="wavy dash"], +.emoji[aria-label="copyright"], +.emoji[aria-label="divide"], +.emoji[aria-label="minus"], +.emoji[aria-label="multiply"], +.emoji[aria-label="plus"], +.emoji[aria-label="registered"] { + filter: invert(100%); +} +.edit-diff > div > .ui.table { + border-left-color: var(--color-secondary) !important; + border-right-color: var(--color-secondary) !important; +} +.CodeMirror.cm-s-default .cm-property, +.CodeMirror.cm-s-paper .cm-property { + color: #40aaff; +} +.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: #009900; +} +.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: #008855; +} +.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: #ff5500; +} +.CodeMirror.cm-s-default .cm-meta, +.CodeMirror.cm-s-default .cm-qualifier, +.CodeMirror.cm-s-paper .cm-meta, +.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: #999977; +} +.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: #999999; +} +.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; +} +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: #1d1f23; +} +.tribute-container { + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.6); +} +.repository + .repo-header + .ui.huge.breadcrumb.repo-title + .repo-header-icon + .avatar { + color: #1d1f23; +} +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, 0.1); +} +#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button { + border-left: 1px solid #4c505c; +} +.mermaid-chart { + filter: invert(84%) hue-rotate(180deg); +} +.is-loading:after { + border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da; +} +.markdown-block-error { + border: 1px solid rgba(121, 71, 66, 0.5) !important; + border-bottom: none !important; +} + +#navbar .item:hover:not(div) { + background-color: var(--color-hover); +} + +.ui.secondary.pointing.menu { + border: 0 !important; +} + +.monaco-editor .view-lines { + filter: invert(1) !important; +} + +.monaco-editor .mtk1 { + color: black; +} + +.repo-header .flex-item-title .muted { + color: var(--color-primary) !important; +} + +.flex-list .ui.basic.label { + margin-left: 2px; + padding: 2px 4px 2px 4px !important; +} + +.repo-list-link.muted { + color: var(--color-primary) !important; +} diff --git a/themes/pitch-black/default.nix b/themes/pitch-black/default.nix new file mode 100644 index 0000000..2139a05 --- /dev/null +++ b/themes/pitch-black/default.nix @@ -0,0 +1,10 @@ +{ runCommand +, lessc +}: + +runCommand "gitea-pitch-black-theme" { + buildInputs = [ lessc ]; +} '' + mkdir $out + lessc ${./theme-pitch-black.less} $out/share/gitea/public/assets/css/theme-pitch-black.css +'' diff --git a/themes/pitch-black/theme-pitch-black.less b/themes/pitch-black/theme-pitch-black.less new file mode 100644 index 0000000..0bc0619 --- /dev/null +++ b/themes/pitch-black/theme-pitch-black.less @@ -0,0 +1,881 @@ +@import "../chroma/dark.less"; + +:root { + --color-primary: #ccc; + --color-primary-dark-1: #c5c5c5; + --color-primary-dark-2: #bebebe; + --color-primary-dark-3: #b7b7b7; + --color-primary-dark-4: #b0b0b0; + --color-primary-dark-5: #a9a9a9; + --color-primary-dark-6: #a2a2a2; + --color-primary-dark-7: #9b9b9b; + --color-primary-light-1: #d3d3d3; + --color-primary-light-2: #d9d9d9; + --color-primary-light-3: #e0e0e0; + --color-primary-light-4: #e7e7e7; + --color-primary-light-5: #eeeeee; + --color-primary-light-6: #f5f5f5; + --color-primary-light-7: #fff; + --color-primary-alpha-10: #afb0b119; + --color-primary-alpha-20: #afb0b133; + --color-primary-alpha-30: #afb0b14b; + --color-primary-alpha-40: #afb0b166; + --color-primary-alpha-50: #afb0b180; + --color-primary-alpha-60: #afb0b199; + --color-primary-alpha-70: #afb0b1b3; + --color-primary-alpha-80: #afb0b1cc; + --color-primary-alpha-90: #afb0b1e1; + --color-secondary: #000; + --color-secondary-dark-1: #141414; + --color-secondary-dark-2: #0b0c0e; + --color-secondary-dark-3: #17181c; + --color-secondary-dark-4: #22242a; + --color-secondary-dark-5: #2d3139; + --color-secondary-dark-6: #393d47; + --color-secondary-dark-7: #444955; + --color-secondary-dark-7: #4f5563; + --color-secondary-dark-8: #5b6171; + --color-secondary-dark-8: #666d7f; + --color-secondary-dark-9: #71798e; + --color-secondary-dark-10: #808799; + --color-secondary-dark-11: #8e94a4; + --color-secondary-light-1: #373b46; + --color-secondary-light-2: #292c34; + --color-secondary-light-3: #1c1e23; + --color-secondary-light-4: #0e0f11; + --color-secondary-alpha-10: #45454519; + --color-secondary-alpha-20: #45454533; + --color-secondary-alpha-30: #4545454b; + --color-secondary-alpha-40: #45454566; + --color-secondary-alpha-50: #45454580; + --color-secondary-alpha-60: #45454599; + --color-secondary-alpha-70: #454545b3; + --color-secondary-alpha-80: #454545cc; + --color-secondary-alpha-90: #454545e1; + /* colors */ + --color-red: #db2828; + --color-orange: #ff6600; + --color-yellow: #ffff99; + --color-olive: #abc11a; + --color-green: #199717; + --color-teal: #01fed4; + --color-blue: #226ac9; + --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-added-row-bg: #283e2d; + --color-diff-removed-row-border: #634343; + --color-diff-added-row-border: #314a37; + --color-diff-inactive: #353846; + /* target-based colors */ + --color-body: #000; + --color-box-header: #000; + --color-box-body: #070707; + --color-text-dark: #dee1e8; + --color-text: #c7cad1; + --color-text-light: #acb0b9; + --color-text-light-2: #8a8e99; + --color-text-light-3: #707687; + --color-footer: #000; + --color-timeline: #4c525e; + --color-input-text: #d5dbe6; + --color-input-background: #000; + --color-input-border: #454545; + --color-input-border-hover: #4e5465; + --color-navbar: #060606; + --color-light: #00000028; + --color-light-border: #ffffff28; + --color-hover: #ffffff10; + --color-active: #25272d; + --color-menu: #060606; + --color-card: #060606; + --color-markdown-table-row: #ffffff06; + --color-markdown-code-block: #121314; + --color-button: #070707; + --color-code-bg: #060606; + --color-shadow: #00000060; + --color-secondary-bg: #060606; + --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-nav-bg: var(--color-body); + --color-nav-hover-bg: var(--color-hover); +} + +::-webkit-calendar-picker-indicator { + filter: invert(.8); +} + +.ui.horizontal.segments > .segment { + background-color: #2d2d2d; +} + +.repository .segment.reactions .ui.label.basic.blue { + background: var(--color-primary-alpha-20) !important; +} + +[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: #848b84; +} + +.ui.progress.success .bar { + background-color: #8fa37b !important; +} + +.following.bar.light { + background: var(--color-body); + border-color: var(--color-secondary-alpha-40); +} + +.following.bar .top.menu a.item:hover { + color: #fff; +} + +.feeds .list ul li.private { + background: #25272d; +} + +.ui.link.list .item, +.ui.link.list a.item, +.ui.link.list .item a:not(.ui) { + color: #dbdbdb; +} + +.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: #53682c !important; + border-color: #53682c !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: #657a3e !important; + border-color: #657a3e !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: #070707; +} + +.ui.green.button:hover, +.ui.green.buttons .button:hover { + background-color: #141414; +} + +.ui.green.button:active, +.ui.green.buttons .button:active { + background-color: #070707; +} + +.ui.search > .results { + background: #2d2d2d; + 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: #070707; +} + +.repository.file.list #repo-files-table tr:hover { + background-color: #2d2d2d !important; +} + +.repository.file.editor.edit, +.repository.wiki.new .CodeMirror { + .editor-preview, + .editor-preview-side, + & + .editor-preview-side { + background: #25272d; + + .markdown:not(code).ui.segment { + border-width: 0; + } + }; +} + +.overflow.menu .items .item { + color: #9d9d9d; +} + +.overflow.menu .items .item:hover { + color: #dbdbdb; +} + +.ui.list > .item > .content { + color: var(--color-secondary-dark-6) !important; +} + +.ui.active.button:active, +.ui.button:active, +.ui.button:focus, +.ui.active.button { + background-color: #2e3e4e; + color: #dbdbdb; +} + +.ui.active.button:hover { + background-color: #475e75; + color: #dbdbdb; +} + +.repository .navbar .active.item, +.repository .navbar .active.item:hover { + border-color: transparent !important; +} + +.ui .info.segment.top { + background-color: var(--color-secondary) !important; +} + +.repository .diff-stats li { + border-color: var(--color-secondary); +} + +.tag-code, +.tag-code td { + background: #25272d !important; +; +} +.tag-code td.lines-num { + background-color: #3a3e4c !important; +} + +.tag-code td.lines-type-marker, +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: #ab6363; +} + +.ui.bottom.attached.message .pull-right { + color: #ab6363; +} + +.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; +} + +.ui.red.button:hover, +.ui.red.buttons .button:hover { + background-color: #984646; +} + +.ui.positive.message { + background-color: #000; + color: #fff; + box-shadow: 0 0 0 1px #1c1c1c 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; +} + +.ui.list .list > .item .description, +.ui.list > .item .description { + 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: #52555b; +} + +.repository.labels .ui.basic.black.label { + background-color: #bbbbbb !important; +} + +.lines-commit, +.blame .lines-num { + background: #060606 !important; +} + +.lines-num { + color: var(--color-secondary-dark-6) !important; + border-color: var(--color-secondary) !important; +} + +td.blob-excerpt { + background-color: rgba(0, 0, 0, .15); +} + +.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: #46484e; + border-color: #46484e; + color: #dbdbdb; +} + +.repository .ui.attached.message.isSigned.isVerified { + background-color: #394829; + color: var(--color-secondary-dark-6); + + &.message { + color: #ab6363; + .ui.text { + color: var(--color-secondary-dark-6); + } + .pull-right { + color: #ab6363; + } + }; +} + +.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); +} + +.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: #2d2d2d; +} + +.minicolors-panel { + background: var(--color-secondary) !important; + border-color: #6a737d !important; +} + +/* invert emojis that are hard to read otherwise */ +.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%); +} + +.edit-diff > div > .ui.table { + border-left-color: var(--color-secondary) !important; + 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: #4e5465; + border-color: #2d2d2d; +} + +.tribute-container { + box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6); +} + +.repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar { + color: #060606; +} + +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; +} + +.markdown-block-error { + border: 1px solid rgba(121, 71, 66, .5) !important; + border-bottom: none !important; +} + +.home .hero .svg { + color: var(--color-primary); +} + +.home a { + color: var(--color-primary-light-1); +} + +.ui.menu, .ui.vertical.menu { + background: #070707; + border-color: var(--color-secondary-dark-4); +} + +.ui.menu.new-menu { + background: #060606; +} + +.ui.menu.new-menu:after { + background: none; +} + +.ui.checkbox label:active:before, .ui.checkbox label:hover:before, .ui.form input:not([type]):hover, .ui.form input[type=date]:hover, .ui.form input[type=datetime-local]:hover, .ui.form input[type=email]:hover, .ui.form input[type=file]:hover, .ui.form input[type=number]:hover, .ui.form input[type=password]:hover, .ui.form input[type=search]:hover, .ui.form input[type=tel]:hover, .ui.form input[type=text]:hover, .ui.form input[type=time]:hover, .ui.form input[type=url]:hover, .ui.form select:hover, .ui.form textarea:hover, .ui.input input:hover, .ui.radio.checkbox input:checked~label:before, .ui.radio.checkbox input:focus~label:before, .ui.radio.checkbox label:after, .ui.selection.dropdown:hover, input:hover, textarea:hover { + background: var(--color-secondary-dark-3); +} + +.ui.checkbox input:checked~label:before, .ui.checkbox input:not([type=radio]):indeterminate~label:before, .ui.checkbox label:before, .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], .ui.form select, .ui.form textarea, .ui.input>input, .ui.selection.dropdown, input, textarea { + background: var(--color-secondary-dark-2); +} + +.ui.checkbox input:checked:focus~label:before, .ui.checkbox input:focus~label:before, .ui.checkbox input:not([type=radio]):indeterminate:focus~label:before, .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, .ui.form select:focus, .ui.form textarea:focus, .ui.input input:focus, .ui.radio.checkbox input:focus:checked~label:before, .ui.selection.dropdown:focus, input:focus, textarea:focus { + background: var(--color-secondary-dark-3); +} + +.ui.list .list>.item .description, .ui.list>.item .description { + color: var(--color-secondary-dark-11); +} + +.explore .navbar { + background-color: var(--color-box-body)!important; +} + +.repository .header-wrapper { + background-color: var(--color-box-body); +} + +.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input { + background-color: #181818; +} + +.ui.blue.label, .ui.blue.labels .label, .ui.primary.label, .ui.primary.labels .label { + background-color: var(--color-secondary)!important; + border-color: var(--color-primary-dark-2)!important; +} + +.ui.blue.button, .ui.blue.buttons .button, .ui.primary.button, .ui.primary.buttons .button { + background-color: #070707!important; +} + +.ui.blue.button:hover, .ui.blue.buttons .button:hover, .ui.primary.button:hover, .ui.primary.buttons .button:hover { + background-color: #1c1c1c!important; +} + +.ui.green.labels .label, .ui.ui.ui.green.label { + background-color: #1c1c1c!important; + border-color: #21ba45!important; + color: #fff; +} + +.ui.red.labels .label, .ui.ui.ui.red.label { + background-color: #1c1c1c!important; + border-color: #db2828!important; + color: #fff; +} + +::selection, ::-moz-selection { + background: var(--color-grey); + color: var(--color-secondary)!important; +} + +.CodeMirror, .CodeMirror-selected, ::selection { + background: var(--color-primary)!important; + color: var(--color-secondary)!important; +} + +.markup a, .ui.breadcrumb a { + color: var(--color-primary-light-7); + cursor: pointer; + text-decoration: none; + border-bottom: 1px solid var(--color-primary); + transition-property: all; +} + +.markup a:hover, .ui.breadcrumb a:hover { + color: #000; + cursor: pointer; + text-decoration: none; + background: #fff; + background-color: #fff; +} + +.markup .anchor { + border-bottom: none; +} + +.markup .anchor:hover { + color: var(--color-primary-light-7); + border-bottom: none; + background: var(--color-body); + background-color: var(--color-body); +} + +.mtk1, .mtk10 { + color: #6D7178!important; +}