oliver/gitea-custom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added catpuccin theme files

Browse Source
This commit is contained in:
Oliver Gwyther
2024-04-24 22:29:22 +01:00
parent 449b7c33d7
commit 33b4ff3b8e
4 changed files with 816 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
themes/catppucin/_chroma.scss Normal file
View File

@ -0,0 +1,296 @@
@use "sass:color";
/* NameBuiltinPseudo */
.chroma .bp {
color: $peach;
}
/* Comment */
.chroma .c {
color: $overlay0;
}
/* CommentSingle */
.chroma .c1 {
color: $overlay0;
}
/* CommentHashbang */
.chroma .ch {
color: $overlay0;
}
/* CommentMultiline */
.chroma .cm {
color: $overlay0;
}
/* CommentPreproc */
.chroma .cp {
color: $blue;
}
/* CommentPreprocFile */
.chroma .cpf {
color: $blue;
}
/* CommentSpecial */
.chroma .cs {
color: $overlay0;
}
/* LiteralStringDelimiter */
.chroma .dl {
color: $blue;
}
/* NameFunctionMagic */
.chroma .fm {
}
/* Generic */
.chroma .g {
}
/* GenericDeleted */
.chroma .gd {
color: $text;
background-color: color.change($red, $alpha: 0.15);
}
/* GenericEmph */
.chroma .ge {
font-style: italic;
}
/* GenericHeading */
.chroma .gh {
color: $sky;
}
/* GenericInserted */
.chroma .gi {
color: $text;
background-color: color.change($green, $alpha: 0.15);
}
/* GenericUnderline */
.chroma .gl {
}
/* GenericOutput */
.chroma .go {
color: $peach;
}
/* GenericPrompt */
.chroma .gp {
color: $overlay0;
font-weight: bold;
}
/* GenericError */
.chroma .gr {
color: $maroon;
}
/* GenericStrong */
.chroma .gs {
font-weight: bold;
}
/* GenericTraceback */
.chroma .gt {
color: $maroon;
}
/* GenericSubheading */
.chroma .gu {
color: $sky;
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: $peach;
}
/* Keyword */
.chroma .k {
color: $mauve;
}
/* KeywordConstant */
.chroma .kc {
color: $yellow;
}
/* KeywordDeclaration */
.chroma .kd {
color: $mauve;
}
/* KeywordNamespace */
.chroma .kn {
color: $yellow;
}
/* KeywordPseudo */
.chroma .kp {
color: $mauve;
font-weight: bold;
}
/* KeywordReserved */
.chroma .kr {
color: $mauve;
}
/* KeywordType */
.chroma .kt {
color: $yellow;
}
/* Literal */
.chroma .l {
}
/* LiteralDate */
.chroma .ld {
}
/* LiteralNumber */
.chroma .m {
color: $peach;
}
/* LiteralNumberBin */
.chroma .mb {
color: $peach;
}
/* LiteralNumberFloat */
.chroma .mf {
color: $peach;
}
/* LiteralNumberHex */
.chroma .mh {
color: $peach;
}
/* LiteralNumberInteger */
.chroma .mi {
color: $peach;
}
/* LiteralNumberOct */
.chroma .mo {
color: $peach;
}
/* Name */
.chroma .n {
color: $lavender;
}
/* NameAttribute */
.chroma .na {
color: $yellow;
}
/* NameBuiltin */
.chroma .nb {
color: $peach;
}
/* NameClass */
.chroma .nc {
color: $yellow;
}
/* NameDecorator */
.chroma .nd {
color: $pink;
}
/* NameException */
.chroma .ne {
color: $maroon;
}
/* NameFunction */
.chroma .nf {
color: $blue;
}
/* NameEntity */
.chroma .ni {
color: $pink;
}
/* NameLabel */
.chroma .nl {
color: $yellow;
}
/* NameNamespace */
.chroma .nn {
color: $yellow;
}
/* NameConstant */
.chroma .no {
color: $yellow;
}
/* NameTag */
.chroma .nt {
color: $mauve;
}
/* NameVariable */
.chroma .nv {
color: $peach;
}
/* NameOther */
.chroma .nx {
color: $peach;
}
/* Operator */
.chroma .o {
color: $sky;
}
/* OperatorWord */
.chroma .ow {
color: $sky;
font-weight: bold;
}
/* Punctuation */
.chroma .p {
color: $overlay2;
}
/* NameProperty */
.chroma .py {
}
/* LiteralString */
.chroma .s {
color: $green;
}
/* LiteralStringSingle */
.chroma .s1 {
color: $green;
}
/* LiteralStringDouble */
.chroma .s2 {
color: $green;
}
/* LiteralStringAffix */
.chroma .sa {
color: $green;
}
/* LiteralStringBacktick */
.chroma .sb {
color: $green;
}
/* LiteralStringChar */
.chroma .sc {
color: $green;
}
/* LiteralStringDoc */
.chroma .sd {
color: $green;
}
/* LiteralStringEscape */
.chroma .se {
color: $blue;
}
/* LiteralStringHeredoc */
.chroma .sh {
color: $green;
}
/* LiteralStringInterpol */
.chroma .si {
color: $green;
}
/* LiteralStringRegex */
.chroma .sr {
color: $blue;
}
/* LiteralStringSymbol */
.chroma .ss {
color: $green;
}
/* LiteralStringOther */
.chroma .sx {
color: $green;
}
/* NameVariableClass */
.chroma .vc {
color: $yellow;
}
/* NameVariableGlobal */
.chroma .vg {
color: $peach;
}
/* NameVariableInstance */
.chroma .vi {
color: $yellow;
}
/* NameVariableMagic */
.chroma .vm {
}
/* TextWhitespace */
.chroma .w {
color: $surface0;
}

91
themes/catppucin/_codemirror.scss Normal file
View File

@ -0,0 +1,91 @@
.CodeMirror,
.CodeMirror.cm-s-default,
.CodeMirror.cm-s-paper {
.cm-property {
color: $text;
}
.cm-header {
color: $text;
}
.cm-quote {
color: $green;
}
.cm-keyword {
color: $mauve;
}
.cm-atom {
color: $red;
}
.cm-number {
color: $peach;
}
.cm-def {
color: $text;
}
.cm-variable-2 {
color: $sky;
}
.cm-variable-3 {
color: $teal;
}
.cm-comment {
color: $surface2;
}
.cm-string {
color: $green;
}
.cm-string-2 {
color: $green;
}
.cm-meta {
color: $peach;
}
.cm-qualifier {
color: $peach;
}
.cm-builtin {
color: $peach;
}
.cm-bracket {
color: $text;
}
.cm-tag {
color: $yellow;
}
.cm-attribute {
color: $yellow;
}
.cm-hr {
color: $overlay2;
}
.cm-url {
color: $blue;
}
.cm-link {
color: $blue;
}
.cm-error {
color: $red;
}
}

138
themes/catppucin/_monaco.scss Normal file
View File

@ -0,0 +1,138 @@
.monaco-editor {
// selected text
.selected-text {
background-color: $surface0 !important;
}
// line numbers
.margin-view-overlays .line-numbers {
color: $subtext0 !important;
}
.line-numbers.active-line-number {
color: $accent !important;
}
// current / cursor line
.view-overlays .current-line,
.margin-view-overlays .current-line-margin {
background-color: #{if(
$isDark,
color.mix($surface0, $base, 64%),
color.mix($mantle, $base, 70%)
)} !important;
}
// Note: all of the hotpink stuff is there so it's easily visible, since these editor scope mappings are a mess
// plaintext
.mtk1 {
color: $text !important;
}
.mtk2 {
color: #ff69b4 !important;
}
// decorators
.mtk3 {
color: $peach !important;
}
// shell arguments
.mtk4 {
color: $teal !important;
}
// css constants & pre-defineds
.mtk5 {
color: $text !important;
}
// keywords
.mtk6 {
color: $mauve !important;
}
// numbers
.mtk7 {
color: $peach !important;
}
// comments
.mtk8 {
color: $overlay2 !important;
}
// sometimes a keyword, apparently
.mtk9 {
color: $mauve !important;
}
// braces, brackets, parentheses
.mtk10 {
color: $subtext0 !important;
}
// arrow brackets & equal signs in HTML
.mtk11 {
color: $teal !important;
}
// @ sign in javascript ¯\_(ツ)_/¯
.mtk12 {
color: $teal !important;
}
.mtk13 {
color: #ff69b4 !important;
}
.mtk14 {
color: #ff69b4 !important;
}
// regex, css classnames, and HTML keywords (huh)
.mtk15 {
color: $mauve !important;
}
// shebangs
.mtk16 {
color: $overlay2 !important;
}
.mtk17 {
color: #ff69b4 !important;
}
.mtk18 {
color: #ff69b4 !important;
}
// glob operator i guess
.mtk19 {
color: $teal !important;
}
.mtk20 {
color: #ff69b4 !important;
}
// strings
.mtk21 {
color: $green !important;
}
.mtk22 {
color: #ff69b4 !important;
}
// functions
.mtk23 {
color: $blue !important;
}
// shell variables
.mtk24 {
color: $peach !important;
}
// weird variables
.mtk25 {
color: $pink !important;
}
.bracket-highlighting-0 {
color: color.mix($text, $red, 40%) !important;
}
.bracket-highlighting-1 {
color: color.mix($text, $peach, 40%) !important;
}
.bracket-highlighting-2 {
color: color.mix($text, $yellow, 40%) !important;
}
.bracket-highlighting-3 {
color: color.mix($text, $green, 40%) !important;
}
.bracket-highlighting-4 {
color: color.mix($text, $blue, 40%) !important;
}
.bracket-highlighting-5 {
color: color.mix($text, $mauve, 40%) !important;
}
}

291
themes/catppucin/_theme.scss Normal file
View File

@ -0,0 +1,291 @@
@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-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%)
)};
/* 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};
/* 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-button: #{$surface0};
--color-code-bg: #{$base};
--color-code-sidebar-bg: #{$surface0};
--color-shadow: #{color.change($lvl1, $alpha: 0.1)};
--color-secondary-bg: #{$surface0};
--color-text-focus: #{$text};
--color-expand-button: #{$surface2};
--color-placeholder-text: #{$surface2};
--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;
}
// 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;
}
::selection {
background: color.change($rosewater, $alpha: 0.3) !important;
}
@import "chroma";
@import "codemirror";
@import "monaco";