Skip to content

Commit 8120753

Browse files
Javier-varezJavier-varez
committed
Update theme colors
1 parent 9985c7b commit 8120753

File tree

3 files changed

+180
-210
lines changed

3 files changed

+180
-210
lines changed

‎assets/sass/_custom/_custom.scss

+46-6
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,55 @@ $base0f: #d27b53;
3434
.base0e { color: $base0e; }
3535
.base0f { color: $base0f; }
3636

37-
$theme-color: $base09;
38-
$deputy-color: #282828;
39-
$global-font-color: $base06;
40-
$global-body-width: 1000px;
37+
$code_white: #EEFFFF;
38+
$code_gray: #a1abe0;
39+
$code_black: #000000;
40+
$code_red: #ff757f;
41+
$code_green: #2df4c0;
42+
$code_yellow: #ffc777;
43+
$code_paleblue: #d6e7f0;
44+
$code_cyan: #b994f1;
45+
$code_blue: #04d1f9;
46+
$code_purple: #b4a4f4;
47+
$code_orange: #f67f81;
48+
$code_pink: #ecb2f0;
49+
50+
$code_bg: #212337;
51+
$code_bg_alt: #0B0E1B;
52+
$code_fg: #e4f3fa;
53+
$code_text: #757dac;
54+
$code_comments: #7486d6;
55+
$code_selection: #403c64;
56+
$code_contrast: #1b1c2b;
57+
$code_active: #414863;
58+
$code_border: #414863;
59+
$code_line_numbers: #596399;
60+
$code_highlight: #a1abe0;
61+
$code_disabled: #515772;
62+
$code_cursor: #5cb4fc;
63+
$code_accent: #a3ace1;
4164

42-
$global-background: $base01;
43-
$code-background: #282828;
65+
$code_error: #FF5370;
66+
$code_link: #80CBC4;
67+
68+
$code-color: $code_cyan;
69+
$code-background: $code_bg;
70+
71+
$theme-color: $code_comments;
72+
$global-body-width: 1000px;
73+
$deputy-color: $code_bg;
74+
$post-toc-backgroud: $code_bg;
4475

4576
$logo-font-family: "Lucida Console", "Courier New", monospace bold;
77+
$global-serif-font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
78+
79+
// For light mode
80+
// $global-font-color: #393939;
81+
// $global-background: #ffffff;
82+
83+
// For dark mode
84+
$global-font-color: $code_paleblue;
85+
$global-background: $code_bg_alt;
4686

4787
.content-wrapper {
4888
background: $global-background;

‎assets/sass/_partial/_post/_code.scss

+73-204
Original file line numberDiff line numberDiff line change
@@ -15,135 +15,6 @@ pre > code {
1515
display: block;
1616
}
1717

18-
// highlight.js
19-
figure.highlight {
20-
margin: 1em 0;
21-
border-radius: 5px;
22-
overflow-x: auto;
23-
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
24-
position: relative;
25-
26-
table {
27-
position: relative;
28-
29-
&::after {
30-
position: absolute;
31-
top: 0;
32-
right: 0;
33-
left: 0;
34-
padding: 2px 7px;
35-
font-size: $code-font-size;
36-
font-weight: bold;
37-
color: darken($gray, 10%);
38-
background: darken($code-background, 3%);
39-
content: 'Code';
40-
}
41-
}
42-
43-
@each $sign, $text in $code-type-list {
44-
&.#{$sign} > table::after {
45-
content: $text;
46-
}
47-
}
48-
49-
.code {
50-
pre {
51-
margin: 0;
52-
padding: 30px 10px 10px;
53-
}
54-
}
55-
56-
.gutter {
57-
width: 10px;
58-
color: $gray;
59-
60-
pre {
61-
margin: 0;
62-
padding: 30px 7px 10px;
63-
}
64-
}
65-
66-
.line {
67-
// Fix code block null line height and
68-
// Synchronous gutter and code line highly.
69-
height: round($code-font-size * 1.5);
70-
}
71-
72-
table, tr, td {
73-
margin: 0;
74-
padding: 0;
75-
width: 100%;
76-
border-collapse: collapse;
77-
}
78-
79-
.code {
80-
.hljs-comment,
81-
.hljs-quote {
82-
color: map-get($code-highlight-color, comment);
83-
}
84-
85-
.hljs-keyword,
86-
.hljs-selector-tag,
87-
.hljs-addition {
88-
color: map-get($code-highlight-color, keyword);
89-
}
90-
91-
.hljs-number,
92-
.hljs-string,
93-
.hljs-meta .hljs-meta-string,
94-
.hljs-literal,
95-
.hljs-doctag,
96-
.hljs-regexp {
97-
color: map-get($code-highlight-color, number);
98-
}
99-
100-
.hljs-title,
101-
.hljs-section,
102-
.hljs-name,
103-
.hljs-selector-id,
104-
.hljs-selector-class {
105-
color: map-get($code-highlight-color, title);
106-
}
107-
108-
.hljs-attribute,
109-
.hljs-attr,
110-
.hljs-variable,
111-
.hljs-template-variable,
112-
.hljs-class .hljs-title,
113-
.hljs-type {
114-
color: map-get($code-highlight-color, attribute);
115-
}
116-
117-
.hljs-symbol,
118-
.hljs-bullet,
119-
.hljs-subst,
120-
.hljs-meta,
121-
.hljs-meta .hljs-keyword,
122-
.hljs-selector-attr,
123-
.hljs-selector-pseudo,
124-
.hljs-link {
125-
color: map-get($code-highlight-color, symbol);
126-
}
127-
128-
.hljs-built_in,
129-
.hljs-deletion {
130-
color: map-get($code-highlight-color, built_in);
131-
}
132-
133-
.hljs-formula {
134-
background: map-get($code-highlight-color, formula);
135-
}
136-
137-
.hljs-emphasis {
138-
font-style: italic;
139-
}
140-
141-
.hljs-strong {
142-
font-weight: bold;
143-
}
144-
}
145-
}
146-
14718
// chroma
14819
.highlight > .chroma {
14920
margin: 1em 0;
@@ -213,80 +84,78 @@ figure.highlight {
21384

21485
/* LineNumbersTable */ .lnt { color: $gray; }
21586
/* LineHighlight */ .hl { display: block; width: 100%; background-color: #ffffcc }
216-
21787
}
21888

219-
// Colors from https://github.com/daveyarwood/gruvbox-pygments/blob/master/gruvbox.css
220-
.highlight .hll { background-color: #ffffcc }
221-
.highlight { background: #282828; color: #ebdbb2; background-color: #282828 }
222-
.highlight .c { color: #928374; font-style: italic; background-color: #282828 } /* Comment */
223-
.highlight .err { color: #ebdbb2; background-color: #282828 } /* Error */
224-
.highlight .esc { color: #ebdbb2; background-color: #282828 } /* Escape */
225-
.highlight .g { color: #ebdbb2; background-color: #282828 } /* Generic */
226-
.highlight .k { color: #fe8019; background-color: #282828 } /* Keyword */
227-
.highlight .l { color: #ebdbb2; background-color: #282828 } /* Literal */
228-
.highlight .n { color: #ebdbb2; background-color: #282828 } /* Name */
229-
.highlight .o { color: #fe8019; background-color: #282828 } /* Operator */
230-
.highlight .x { color: #ebdbb2; background-color: #282828 } /* Other */
231-
.highlight .p { color: #ebdbb2; background-color: #282828 } /* Punctuation */
232-
.highlight .ch { color: #928374; font-style: italic; background-color: #282828 } /* Comment.Hashbang */
233-
.highlight .cm { color: #928374; font-style: italic; background-color: #282828 } /* Comment.Multiline */
234-
.highlight .cp { color: #8ec07c; background-color: #282828 } /* Comment.Preproc */
235-
.highlight .c1 { color: #928374; font-style: italic; background-color: #282828 } /* Comment.Single */
236-
.highlight .cs { color: #928374; font-style: italic; background-color: #282828 } /* Comment.Special */
237-
.highlight .gd { color: #282828; background-color: #fb4934 } /* Generic.Deleted */
238-
.highlight .ge { color: #83a598; text-decoration: underline; background-color: #282828 } /* Generic.Emph */
239-
.highlight .gr { color: #ebdbb2; font-weight: bold; background-color: #fb4934 } /* Generic.Error */
240-
.highlight .gh { color: #b8bb26; font-weight: bold; background-color: #282828 } /* Generic.Heading */
241-
.highlight .gi { color: #282828; background-color: #b8bb26 } /* Generic.Inserted */
242-
.highlight .go { color: #504945; background-color: #282828 } /* Generic.Output */
243-
.highlight .gp { color: #ebdbb2; background-color: #282828 } /* Generic.Prompt */
244-
.highlight .gs { color: #ebdbb2; background-color: #282828 } /* Generic.Strong */
245-
.highlight .gu { color: #b8bb26; font-weight: bold; background-color: #282828 } /* Generic.Subheading */
246-
.highlight .gt { color: #ebdbb2; font-weight: bold; background-color: #fb4934 } /* Generic.Traceback */
247-
.highlight .kc { color: #fe8019; background-color: #282828 } /* Keyword.Constant */
248-
.highlight .kd { color: #fe8019; background-color: #282828 } /* Keyword.Declaration */
249-
.highlight .kn { color: #fe8019; background-color: #282828 } /* Keyword.Namespace */
250-
.highlight .kp { color: #fe8019; background-color: #282828 } /* Keyword.Pseudo */
251-
.highlight .kr { color: #fe8019; background-color: #282828 } /* Keyword.Reserved */
252-
.highlight .kt { color: #fabd2f; background-color: #282828 } /* Keyword.Type */
253-
.highlight .ld { color: #ebdbb2; background-color: #282828 } /* Literal.Date */
254-
.highlight .m { color: #d3869b; background-color: #282828 } /* Literal.Number */
255-
.highlight .s { color: #b8bb26; background-color: #282828 } /* Literal.String */
256-
.highlight .na { color: #b8bb26; font-weight: bold; background-color: #282828 } /* Name.Attribute */
257-
.highlight .nb { color: #fabd2f; background-color: #282828 } /* Name.Builtin */
258-
.highlight .nc { color: #ebdbb2; background-color: #282828 } /* Name.Class */
259-
.highlight .no { color: #d3869b; background-color: #282828 } /* Name.Constant */
260-
.highlight .nd { color: #ebdbb2; background-color: #282828 } /* Name.Decorator */
261-
.highlight .ni { color: #fabd2f; background-color: #282828 } /* Name.Entity */
262-
.highlight .ne { color: #fb4934; background-color: #282828 } /* Name.Exception */
263-
.highlight .nf { color: #fabd2f; background-color: #282828 } /* Name.Function */
264-
.highlight .nl { color: #fb4934; background-color: #282828 } /* Name.Label */
265-
.highlight .nn { color: #ebdbb2; background-color: #282828 } /* Name.Namespace */
266-
.highlight .nx { color: #ebdbb2; background-color: #282828 } /* Name.Other */
267-
.highlight .py { color: #ebdbb2; background-color: #282828 } /* Name.Property */
268-
.highlight .nt { color: #fb4934; background-color: #282828 } /* Name.Tag */
269-
.highlight .nv { color: #ebdbb2; background-color: #282828 } /* Name.Variable */
270-
.highlight .ow { color: #fe8019; background-color: #282828 } /* Operator.Word */
271-
.highlight .w { color: #ebdbb2; background-color: #282828 } /* Text.Whitespace */
272-
.highlight .mb { color: #d3869b; background-color: #282828 } /* Literal.Number.Bin */
273-
.highlight .mf { color: #d3869b; background-color: #282828 } /* Literal.Number.Float */
274-
.highlight .mh { color: #d3869b; background-color: #282828 } /* Literal.Number.Hex */
275-
.highlight .mi { color: #d3869b; background-color: #282828 } /* Literal.Number.Integer */
276-
.highlight .mo { color: #d3869b; background-color: #282828 } /* Literal.Number.Oct */
277-
.highlight .sb { color: #b8bb26; background-color: #282828 } /* Literal.String.Backtick */
278-
.highlight .sc { color: #b8bb26; background-color: #282828 } /* Literal.String.Char */
279-
.highlight .sd { color: #b8bb26; background-color: #282828 } /* Literal.String.Doc */
280-
.highlight .s2 { color: #b8bb26; background-color: #282828 } /* Literal.String.Double */
281-
.highlight .se { color: #b8bb26; background-color: #282828 } /* Literal.String.Escape */
282-
.highlight .sh { color: #b8bb26; background-color: #282828 } /* Literal.String.Heredoc */
283-
.highlight .si { color: #b8bb26; background-color: #282828 } /* Literal.String.Interpol */
284-
.highlight .sx { color: #b8bb26; background-color: #282828 } /* Literal.String.Other */
285-
.highlight .sr { color: #b8bb26; background-color: #282828 } /* Literal.String.Regex */
286-
.highlight .s1 { color: #b8bb26; background-color: #282828 } /* Literal.String.Single */
287-
.highlight .ss { color: #83a598; background-color: #282828 } /* Literal.String.Symbol */
288-
.highlight .bp { color: #fabd2f; background-color: #282828 } /* Name.Builtin.Pseudo */
289-
.highlight .vc { color: #ebdbb2; background-color: #282828 } /* Name.Variable.Class */
290-
.highlight .vg { color: #ebdbb2; background-color: #282828 } /* Name.Variable.Global */
291-
.highlight .vi { color: #ebdbb2; background-color: #282828 } /* Name.Variable.Instance */
292-
.highlight .il { color: #d3869b; background-color: #282828 } /* Literal.Number.Integer.Long */
89+
.highlight .hll { background-color: $code-background }
90+
.highlight { background: $code-background; color: $code_disabled; background-color: $code-background }
91+
.highlight .c { color: $code_comments; font-style: italic; background-color: $code-background } /* Comment */
92+
.highlight .err { color: $code_error; background-color: $code-background } /* Error */
93+
.highlight .esc { color: $code_disabled; background-color: $code-background } /* Escape */
94+
.highlight .g { color: $code_gray; background-color: $code-background } /* Generic */
95+
.highlight .k { color: $code_cyan; background-color: $code-background } /* Keyword */
96+
.highlight .l { color: $code_gray; background-color: $code-background } /* Literal */
97+
.highlight .n { color: $code_blue; background-color: $code-background } /* Name */
98+
.highlight .o { color: $code_pink; background-color: $code-background } /* Operator */
99+
.highlight .x { color: $code_gray; background-color: $code-background } /* Other */
100+
.highlight .p { color: $code_pink; background-color: $code-background } /* Punctuation */
101+
.highlight .ch { color: $code_comments; font-style: italic; background-color: $code-background } /* Comment.Hashbang */
102+
.highlight .cm { color: $code_comments; font-style: italic; background-color: $code-background } /* Comment.Multiline */
103+
.highlight .cp { color: $code_yellow; background-color: $code-background } /* Comment.Preproc */
104+
.highlight .c1 { color: $code_comments; font-style: italic; background-color: $code-background } /* Comment.Single */
105+
.highlight .cs { color: $code_comments; font-style: italic; background-color: $code-background } /* Comment.Special */
106+
.highlight .gd { color: $code_gray; background-color: $code-background } /* Generic.Deleted */
107+
.highlight .ge { color: $code_red; text-decoration: underline; background-color: $code-background } /* Generic.Emph */
108+
.highlight .gr { color: $code_red; font-weight: bold; background-color: $code-background } /* Generic.Error */
109+
.highlight .gh { color: $code_highlight; font-weight: bold; background-color: $code-background } /* Generic.Heading */
110+
.highlight .gi { color: $code_red; background-color: $code-background } /* Generic.Inserted */
111+
.highlight .go { color: $code_red; background-color: $code-background } /* Generic.Output */
112+
.highlight .gp { color: $code_red; background-color: $code-background } /* Generic.Prompt */
113+
.highlight .gs { color: $code_red; background-color: $code-background } /* Generic.Strong */
114+
.highlight .gu { color: $code_red; font-weight: bold; background-color: $code-background } /* Generic.Subheading */
115+
.highlight .gt { color: $code_red; font-weight: bold; background-color: $code-background } /* Generic.Traceback */
116+
.highlight .kc { color: $code_purple; background-color: $code-background } /* Keyword.Constant */
117+
.highlight .kd { color: $code_purple; background-color: $code-background } /* Keyword.Declaration */
118+
.highlight .kn { color: $code_purple; background-color: $code-background } /* Keyword.Namespace */
119+
.highlight .kp { color: $code_purple; background-color: $code-background } /* Keyword.Pseudo */
120+
.highlight .kr { color: $code_purple; background-color: $code-background } /* Keyword.Reserved */
121+
.highlight .kt { color: $code_purple; background-color: $code-background } /* Keyword.Type */
122+
.highlight .ld { color: $code_orange; background-color: $code-background } /* Literal.Date */
123+
.highlight .m { color: $code_orange; background-color: $code-background } /* Literal.Number */
124+
.highlight .s { color: $code_green; background-color: $code-background } /* Literal.String */
125+
.highlight .na { color: $code_blue; font-weight: bold; background-color: $code-background } /* Name.Attribute */
126+
.highlight .nb { color: $code_blue; background-color: $code-background } /* Name.Builtin */
127+
.highlight .nc { color: $code_blue; background-color: $code-background } /* Name.Class */
128+
.highlight .no { color: $code_blue; background-color: $code-background } /* Name.Constant */
129+
.highlight .nd { color: $code_blue; background-color: $code-background } /* Name.Decorator */
130+
.highlight .ni { color: $code_blue; background-color: $code-background } /* Name.Entity */
131+
.highlight .ne { color: $code_red; background-color: $code-background } /* Name.Exception */
132+
.highlight .nf { color: $code_blue; background-color: $code-background } /* Name.Function */
133+
.highlight .nl { color: $code_blue; background-color: $code-background } /* Name.Label */
134+
.highlight .nn { color: $code_paleblue; background-color: $code-background } /* Name.Namespace */
135+
.highlight .nx { color: $code_paleblue; background-color: $code-background } /* Name.Other */
136+
.highlight .py { color: $code_paleblue; background-color: $code-background } /* Name.Property */
137+
.highlight .nt { color: $code_paleblue; background-color: $code-background } /* Name.Tag */
138+
.highlight .nv { color: $code_paleblue; background-color: $code-background } /* Name.Variable */
139+
.highlight .ow { color: $code_paleblue; background-color: $code-background } /* Operator.Word */
140+
.highlight .w { color: $code_paleblue; background-color: $code-background } /* Text.Whitespace */
141+
.highlight .mb { color: $code_orange; background-color: $code-background } /* Literal.Number.Bin */
142+
.highlight .mf { color: $code_orange; background-color: $code-background } /* Literal.Number.Float */
143+
.highlight .mh { color: $code_orange; background-color: $code-background } /* Literal.Number.Hex */
144+
.highlight .mi { color: $code_orange; background-color: $code-background } /* Literal.Number.Integer */
145+
.highlight .mo { color: $code_orange; background-color: $code-background } /* Literal.Number.Oct */
146+
.highlight .sb { color: $code_green; background-color: $code-background } /* Literal.String.Backtick */
147+
.highlight .sc { color: $code_green; background-color: $code-background } /* Literal.String.Char */
148+
.highlight .sd { color: $code_green; background-color: $code-background } /* Literal.String.Doc */
149+
.highlight .s2 { color: $code_green; background-color: $code-background } /* Literal.String.Double */
150+
.highlight .se { color: $code_green; background-color: $code-background } /* Literal.String.Escape */
151+
.highlight .sh { color: $code_green; background-color: $code-background } /* Literal.String.Heredoc */
152+
.highlight .si { color: $code_green; background-color: $code-background } /* Literal.String.Interpol */
153+
.highlight .sx { color: $code_green; background-color: $code-background } /* Literal.String.Other */
154+
.highlight .sr { color: $code_green; background-color: $code-background } /* Literal.String.Regex */
155+
.highlight .s1 { color: $code_green; background-color: $code-background } /* Literal.String.Single */
156+
.highlight .ss { color: $code_green; background-color: $code-background } /* Literal.String.Symbol */
157+
.highlight .bp { color: $code_paleblue; background-color: $code-background } /* Name.Builtin.Pseudo */
158+
.highlight .vc { color: $code_paleblue; background-color: $code-background } /* Name.Variable.Class */
159+
.highlight .vg { color: $code_paleblue; background-color: $code-background } /* Name.Variable.Global */
160+
.highlight .vi { color: $code_paleblue; background-color: $code-background } /* Name.Variable.Instance */
161+
.highlight .il { color: $code_orange; background-color: $code-background } /* Literal.Number.Integer.Long */

0 commit comments

Comments
 (0)