Skip to content

Commit f0b82f1

Browse files
revsuinerevsuine
authored
Merge pull request #147 from crnobog69/main
add catppuccin-mocha-red theme
2 parents f7c7452 + d8bfc4e commit f0b82f1

File tree

2 files changed

+353
-0
lines changed

2 files changed

+353
-0
lines changed

‎themes/catppuccin-mocha-red/v1/code-block.css‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
/**
2+
* Your theme's name
3+
* If this is an adaptation of an existing theme, credit the creator and/or leave a link to it!
4+
* Optional: Your name and/or username
5+
*/
6+
7+
/**
8+
* Prism supports IE11, which does not support CSS variables
9+
* However, you are encouraged to leave a list of colours you use here
10+
* so that when we transition to Prism V2 (and drop support for IE11),
11+
* the transition will be a little easier!
12+
*/
13+
14+
/**
15+
* How to use this template:
16+
*
17+
* This file contains all the boilerplate necessary for a Prism theme along with template rules for you to fill in.
18+
*
19+
* All properties with the value `unset` are for you to change.
20+
* You should fill in all `color` and `background` properties.
21+
* If you don't need an `unset` property (e.g. `border-radius`), then feel free to remove it.
22+
* You are also free to add more properties that aren't stated, such as `text-shadow`.
23+
* If you wish to style the plugins, you may grab their selectors from their respective .css files in the template folder.
24+
*
25+
* Your finished theme should have all `unset` properties either filled in or removed.
26+
*/
27+
28+
/* Set the main properties of the code, code blocks, and inline code */
29+
pre[class*="language-"] {
30+
--rosewater: #f5e0dc;
31+
--flamingo: #f2cdcd;
32+
--pink: #f5c2e7;
33+
--mauve: #cba6f7;
34+
--red: #f38ba8;
35+
--redrgba: 243, 139, 168;
36+
--maroon: #eba0ac;
37+
--peach: #fab387;
38+
--yellow: #f9e2af;
39+
--green: #a6e3a1;
40+
--greenrgba: 166, 227, 161;
41+
--teal: #94e2d5;
42+
--sky: #89dceb;
43+
--sapphire: #74c7ec;
44+
--blue: #89b4fa;
45+
--lavender: #b4befe;
46+
--text: #cdd6f4;
47+
--subtext1: #bac2de;
48+
--subtext0: #a6adc8;
49+
--overlay2: #9399b2;
50+
--overlay1: #7f849c;
51+
--overlay0: #6c7086;
52+
--surface2: #585b70;
53+
--surface2rgba: 88, 91, 112;
54+
--surface1: #45475a;
55+
--surface0: #313244;
56+
--base: #313244;
57+
--mantle: #181825;
58+
--crust: #11111b;
59+
}
60+
/* Set the main properties of the code, code blocks, and inline code */
61+
code[class*="language-"],
62+
pre[class*="language-"] {
63+
background: var(--crust);
64+
color: var(--text);
65+
font-family: "MonaspiceNe Nerd Font", "MonaspiceNe Nerd Font Mono",
66+
"JetBrainsMono Nerd Font", monospace; /* this is the default */ /* The following properties are standard, please leave them as they are */
67+
font-size: 1em;
68+
direction: ltr;
69+
text-align: left;
70+
white-space: pre;
71+
word-spacing: normal;
72+
word-break: normal;
73+
line-height: 1.5; /* The default is 4, but you could change it if you really, really want to */
74+
-moz-tab-size: 2;
75+
-o-tab-size: 2;
76+
tab-size: 2; /* The following properties are also standard */
77+
-webkit-hyphens: none;
78+
-moz-hyphens: none;
79+
-ms-hyphens: none;
80+
hyphens: none;
81+
}
82+
/* Optional: What the code looks like when highlighted */
83+
code[class*="language-"]::-moz-selection,
84+
code[class*="language-"] ::-moz-selection,
85+
pre[class*="language-"]::-moz-selection,
86+
pre[class*="language-"] ::-moz-selection,
87+
code[class*="language-"]::selection,
88+
code[class*="language-"] ::selection,
89+
pre[class*="language-"]::selection,
90+
pre[class*="language-"] ::selection {
91+
background: rgba(var(--surface2rgba), 0.6);
92+
}
93+
/* Properties specific to code blocks */
94+
pre[class*="language-"] {
95+
padding: 1em; /* this is standard */
96+
margin: 0.5em 0; /* this is the default */
97+
overflow: auto; /* this is standard */
98+
border-radius: unset;
99+
}
100+
/* Properties specific to inline code */
101+
:not(pre) > code[class*="language-"] {
102+
padding: 0.1em; /* this is the default */
103+
border-radius: unset;
104+
white-space: normal; /* this is standard */
105+
}
106+
/**
107+
* These are the minimum tokens you must style, you can rearrange them and/or style more tokens as you want
108+
* The concepts behind these standard tokens, as well as some examples, can be found here: https://prismjs.com/tokens.html
109+
*/
110+
.token.comment {
111+
color: var(--overlay0);
112+
}
113+
.token.prolog {
114+
color: var(--overlay0);
115+
}
116+
.token.cdata {
117+
color: var(--overlay0);
118+
}
119+
.token.doctype {
120+
color: var(--overlay0);
121+
}
122+
.token.punctuation {
123+
color: var(--overlay2);
124+
}
125+
.token.entity {
126+
color: unset;
127+
}
128+
.token.attr-name {
129+
color: var(--maroon);
130+
}
131+
.token.class-name {
132+
color: var(--yellow);
133+
}
134+
.token.boolean {
135+
color: var(--mauve);
136+
}
137+
.token.constant,
138+
.token.number {
139+
color: var(--peach);
140+
}
141+
.token.atrule {
142+
color: var(--yellow);
143+
}
144+
.token.keyword,
145+
.token.tag {
146+
color: var(--mauve);
147+
}
148+
.token.property {
149+
color: var(--maroon);
150+
}
151+
.token.symbol {
152+
color: var(--pink);
153+
}
154+
.token.deleted {
155+
background: rgba(var(--redrgba), 0.2);
156+
}
157+
.token.important {
158+
color: var(--yellow);
159+
}
160+
.token.selector {
161+
color: var(--blue);
162+
}
163+
.token.string,
164+
.token.char {
165+
color: var(--green);
166+
}
167+
.token.builtin {
168+
color: var(--red);
169+
}
170+
.token.inserted {
171+
background: rgba(var(--greenrgba), 0.2);
172+
}
173+
.token.regex {
174+
color: var(--pink);
175+
}
176+
.token.attr-value {
177+
color: var(--green);
178+
}
179+
.token.variable {
180+
color: var(--pink);
181+
}
182+
.token.operator {
183+
color: var(--sky);
184+
}
185+
.token.function {
186+
color: var(--blue);
187+
font-style: italic;
188+
}
189+
.token.url {
190+
color: var(--blue);
191+
}
192+
/* The following rules are pretty similar across themes, but feel free to adjust them */
193+
.token.bold {
194+
font-weight: bold;
195+
}
196+
.token.italic {
197+
font-style: italic;
198+
}
199+
.token.entity {
200+
cursor: help;
201+
}
202+
.token.namespace {
203+
opacity: 0.7;
204+
}
205+
/* LANGUAGE-SPECIFIC OVERRIDES */
206+
/* If you'd like your theme to have overrides for specific languages, here's an example, you can remove it and/or add more overrides */
207+
/* .language-css .token.important { color: unset; } */

‎themes/catppuccin-mocha-red/v1/theme.json‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
{
2+
"$schema": "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json",
3+
"name": "Catppuccin Mocha Red",
4+
"id": "catppuccin-mocha-red",
5+
"version": 1,
6+
"license": "WTFPL license",
7+
"homepage": "https://notesnook.com",
8+
"description": "Catppuccin Mocha with a red accent",
9+
"colorScheme": "dark",
10+
"compatibilityVersion": 1,
11+
"authors": [
12+
{
13+
"name": "Crnobog",
14+
"email": "[email protected]",
15+
"url": "https://crnobog69.github.io/"
16+
}
17+
],
18+
"scopes": {
19+
"base": {
20+
"primary": {
21+
"accent": "#f38ba8",
22+
"paragraph": "#cdd6f4",
23+
"background": "#1e1e2e",
24+
"border": "#313244",
25+
"heading": "#cdd6f4",
26+
"icon": "#bac2de",
27+
"separator": "#181825",
28+
"placeholder": "#7f849c",
29+
"hover": "#45475a",
30+
"accentForeground": "#11111b",
31+
"backdrop": "#11111b99"
32+
},
33+
"secondary": {
34+
"accent": "#f38ba8",
35+
"paragraph": "#cdd6f4",
36+
"background": "#11111b",
37+
"border": "#6c7086",
38+
"heading": "#cdd6f4",
39+
"icon": "#cdd6f4",
40+
"separator": "#6c7086",
41+
"placeholder": "#7f849c",
42+
"hover": "#45475a",
43+
"accentForeground": "#11111b",
44+
"backdrop": "#11111b99"
45+
},
46+
"disabled": {
47+
"accent": "#f38ba8",
48+
"paragraph": "#cdd6f4",
49+
"background": "#7f849c",
50+
"border": "#6c7086",
51+
"heading": "#cdd6f4",
52+
"icon": "#cdd6f4",
53+
"separator": "#6c7086",
54+
"placeholder": "#cdd6f4",
55+
"hover": "#45475a",
56+
"accentForeground": "#11111b",
57+
"backdrop": "#11111b99"
58+
},
59+
"selected": {
60+
"accent": "#f38ba8",
61+
"paragraph": "#cdd6f4",
62+
"background": "#45475a",
63+
"border": "#f38ba8",
64+
"heading": "#cdd6f4",
65+
"icon": "#f38ba8",
66+
"separator": "#6c7086",
67+
"placeholder": "#7f849c",
68+
"hover": "#313244",
69+
"accentForeground": "#11111b",
70+
"backdrop": "#11111b99"
71+
},
72+
"error": {
73+
"accent": "#f38ba8",
74+
"paragraph": "#f38ba8",
75+
"background": "#1e1e2e",
76+
"border": "#6c7086",
77+
"heading": "#f38ba8",
78+
"icon": "#f38ba8",
79+
"separator": "#6c7086",
80+
"placeholder": "#f38ba8",
81+
"hover": "#45475a",
82+
"accentForeground": "#11111b",
83+
"backdrop": "#11111b99"
84+
},
85+
"success": {
86+
"accent": "#f38ba8",
87+
"paragraph": "#f38ba8",
88+
"background": "#1e1e2e",
89+
"border": "#6c7086",
90+
"heading": "#f38ba8",
91+
"icon": "#f38ba8",
92+
"separator": "#6c7086",
93+
"placeholder": "#7f849c",
94+
"hover": "#45475a",
95+
"accentForeground": "#11111b",
96+
"backdrop": "#11111b99"
97+
}
98+
},
99+
"statusBar": {
100+
"primary": {
101+
"paragraph": "#bac2de",
102+
"background": "#1e1e2e",
103+
"separator": "#1e1e2e"
104+
}
105+
},
106+
"list": {
107+
"primary": {
108+
"paragraph": "#a6adc8",
109+
"background": "#181825",
110+
"hover": "#313244"
111+
},
112+
"secondary": {
113+
"paragraph": "#bac2de"
114+
}
115+
},
116+
"editor": {
117+
"primary": {
118+
"background": "#1e1e2e",
119+
"border": "#313244"
120+
},
121+
"secondary": {
122+
"paragraph": "#a6adc8",
123+
"border": "#11111b"
124+
}
125+
},
126+
"editorToolbar": {
127+
"primary": {
128+
"background": "#181825",
129+
"hover": "#45475a"
130+
},
131+
"secondary": {
132+
"background": "#313244"
133+
}
134+
},
135+
"navigationMenu": {
136+
"primary": {
137+
"background": "#11111b"
138+
}
139+
},
140+
"sheet": {
141+
"selected": {
142+
"paragraph": "#008837"
143+
}
144+
}
145+
}
146+
}

0 commit comments

Comments
 (0)