Skip to content

Commit 44efc65

Browse files
CldfireCldfire
committed
Add Ayu theme
Also adds the a new variable, `$inline-code-color`, to base.styl. The `Ayu` theme needed this to change the text color of inline code.
1 parent 8a05f0d commit 44efc65

File tree

13 files changed

+253
-1
lines changed

13 files changed

+253
-1
lines changed

‎src/renderer/html_handlebars/hbs_renderer.rs

+1
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@ impl Renderer for HtmlHandlebars {
177177
book.write_file("jquery.js", &theme.jquery)?;
178178
book.write_file("highlight.css", &theme.highlight_css)?;
179179
book.write_file("tomorrow-night.css", &theme.tomorrow_night_css)?;
180+
book.write_file("ayu-highlight.css", &theme.ayu_highlight_css)?;
180181
book.write_file("highlight.js", &theme.highlight_js)?;
181182
book.write_file("clipboard.min.js", &theme.clipboard_js)?;
182183
book.write_file("_FontAwesome/css/font-awesome.css", theme::FONT_AWESOME)?;

‎src/theme/ayu-highlight.css

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/*
2+
Based off of the Ayu theme
3+
Original by Dempfi (https://github.com/dempfi/ayu)
4+
*/
5+
6+
.hljs {
7+
display: block;
8+
overflow-x: auto;
9+
background: #191f26;
10+
color: #e6e1cf;
11+
padding: 0.5em;
12+
}
13+
14+
.hljs-comment,
15+
.hljs-quote,
16+
.hljs-meta {
17+
color: #5c6773;
18+
font-style: italic;
19+
}
20+
21+
.hljs-variable,
22+
.hljs-template-variable,
23+
.hljs-attribute,
24+
.hljs-attr,
25+
.hljs-regexp,
26+
.hljs-link,
27+
.hljs-selector-id,
28+
.hljs-selector-class {
29+
color: #ff7733;
30+
}
31+
32+
.hljs-number,
33+
.hljs-builtin-name,
34+
.hljs-literal,
35+
.hljs-type,
36+
.hljs-params {
37+
color: #ffee99;
38+
}
39+
40+
.hljs-string,
41+
.hljs-bullet {
42+
color: #b8cc52;
43+
}
44+
45+
.hljs-title,
46+
.hljs-built_in,
47+
.hljs-section {
48+
color: #ffb454;
49+
}
50+
51+
.hljs-keyword,
52+
.hljs-selector-tag,
53+
.hljs-symbol {
54+
color: #ff7733;
55+
}
56+
57+
.hljs-name {
58+
color: #36a3d9;
59+
}
60+
61+
.hljs-tag {
62+
color: #00568d;
63+
}
64+
65+
.hljs-emphasis {
66+
font-style: italic;
67+
}
68+
69+
.hljs-strong {
70+
font-weight: bold;
71+
}

‎src/theme/book.css

+123
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,7 @@ table thead td {
398398
vertical-align: middle;
399399
padding: 0.1em 0.3em;
400400
border-radius: 3px;
401+
color: #6e6b5e;
401402
}
402403
.light a:hover > .hljs {
403404
text-decoration: underline;
@@ -516,6 +517,7 @@ table thead td {
516517
vertical-align: middle;
517518
padding: 0.1em 0.3em;
518519
border-radius: 3px;
520+
color: #c5c8c6;
519521
}
520522
.coal a:hover > .hljs {
521523
text-decoration: underline;
@@ -634,6 +636,7 @@ table thead td {
634636
vertical-align: middle;
635637
padding: 0.1em 0.3em;
636638
border-radius: 3px;
639+
color: #c5c8c6;
637640
}
638641
.navy a:hover > .hljs {
639642
text-decoration: underline;
@@ -752,6 +755,7 @@ table thead td {
752755
vertical-align: middle;
753756
padding: 0.1em 0.3em;
754757
border-radius: 3px;
758+
color: #6e6b5e;
755759
}
756760
.rust a:hover > .hljs {
757761
text-decoration: underline;
@@ -775,6 +779,125 @@ table thead td {
775779
.rust pre > .result {
776780
margin-top: 10px;
777781
}
782+
.ayu {
783+
color: #c5c5c5;
784+
background-color: #0f1419;
785+
/* Inline code */
786+
}
787+
.ayu .content .header:link,
788+
.ayu .content .header:visited {
789+
color: #c5c5c5;
790+
pointer: cursor;
791+
}
792+
.ayu .content .header:link:hover,
793+
.ayu .content .header:visited:hover {
794+
text-decoration: none;
795+
}
796+
.ayu .sidebar {
797+
background-color: #14191f;
798+
color: #c8c9db;
799+
}
800+
.ayu .chapter li {
801+
color: #5c6773;
802+
}
803+
.ayu .chapter li a {
804+
color: #c8c9db;
805+
}
806+
.ayu .chapter li .active,
807+
.ayu .chapter li a:hover {
808+
/* Animate color change */
809+
color: #ffb454;
810+
}
811+
.ayu .chapter .spacer {
812+
background-color: #2d334f;
813+
}
814+
.ayu .menu-bar,
815+
.ayu .menu-bar:visited,
816+
.ayu .nav-chapters,
817+
.ayu .nav-chapters:visited,
818+
.ayu .mobile-nav-chapters,
819+
.ayu .mobile-nav-chapters:visited {
820+
color: #737480;
821+
}
822+
.ayu .menu-bar i:hover,
823+
.ayu .nav-chapters:hover,
824+
.ayu .mobile-nav-chapters i:hover {
825+
color: #b7b9cc;
826+
}
827+
.ayu .mobile-nav-chapters i:hover {
828+
color: #c8c9db;
829+
}
830+
.ayu .mobile-nav-chapters {
831+
background-color: #14191f;
832+
}
833+
.ayu .content a:link,
834+
.ayu a:visited,
835+
.ayu a > .hljs {
836+
color: #0096cf;
837+
}
838+
.ayu .theme-popup {
839+
color: #c5c5c5;
840+
background: #14191f;
841+
border: 1px solid #5c6773;
842+
}
843+
.ayu .theme-popup .theme:hover {
844+
background-color: #191f26;
845+
}
846+
.ayu .theme-popup .default {
847+
color: #737480;
848+
}
849+
.ayu blockquote {
850+
margin: 20px 0;
851+
padding: 0 20px;
852+
color: #c5c5c5;
853+
background-color: #262933;
854+
border-top: 0.1em solid #2f333f;
855+
border-bottom: 0.1em solid #2f333f;
856+
}
857+
.ayu table td {
858+
border-color: #182028;
859+
}
860+
.ayu table tbody tr:nth-child(2n) {
861+
background: #141b22;
862+
}
863+
.ayu table thead {
864+
background: #324354;
865+
}
866+
.ayu table thead td {
867+
border: none;
868+
}
869+
.ayu table thead tr {
870+
border: 1px #324354 solid;
871+
}
872+
.ayu :not(pre) > .hljs {
873+
display: inline-block;
874+
vertical-align: middle;
875+
padding: 0.1em 0.3em;
876+
border-radius: 3px;
877+
color: #ffb454;
878+
}
879+
.ayu a:hover > .hljs {
880+
text-decoration: underline;
881+
}
882+
.ayu pre {
883+
position: relative;
884+
}
885+
.ayu pre > .buttons {
886+
position: absolute;
887+
right: 5px;
888+
top: 5px;
889+
color: #c8c9db;
890+
cursor: pointer;
891+
}
892+
.ayu pre > .buttons :hover {
893+
color: #ffb454;
894+
}
895+
.ayu pre > .buttons i {
896+
margin-left: 8px;
897+
}
898+
.ayu pre > .result {
899+
margin-top: 10px;
900+
}
778901
@media only print {
779902
#sidebar,
780903
#menu-bar,

‎src/theme/book.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,8 @@ $( document ).ready(function() {
102102
.append($('<div class="theme" id="light">Light <span class="default">(default)</span><div>'))
103103
.append($('<div class="theme" id="rust">Rust</div>'))
104104
.append($('<div class="theme" id="coal">Coal</div>'))
105-
.append($('<div class="theme" id="navy">Navy</div>'));
105+
.append($('<div class="theme" id="navy">Navy</div>'))
106+
.append($('<div class="theme" id="ayu">Ayu</div>'));
106107

107108

108109
popup.insertAfter(this);
@@ -118,9 +119,15 @@ $( document ).ready(function() {
118119

119120
function set_theme(theme) {
120121
if (theme == 'coal' || theme == 'navy') {
122+
$("[href='ayu-highlight.css']").prop('disabled', true);
121123
$("[href='tomorrow-night.css']").prop('disabled', false);
122124
$("[href='highlight.css']").prop('disabled', true);
125+
} else if (theme == 'ayu') {
126+
$("[href='ayu-highlight.css']").prop('disabled', false);
127+
$("[href='tomorrow-night.css']").prop('disabled', true);
128+
$("[href='highlight.css']").prop('disabled', true);
123129
} else {
130+
$("[href='ayu-highlight.css']").prop('disabled', true);
124131
$("[href='tomorrow-night.css']").prop('disabled', true);
125132
$("[href='highlight.css']").prop('disabled', false);
126133
}

‎src/theme/index.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
<link rel="stylesheet" href="highlight.css">
2222
<link rel="stylesheet" href="tomorrow-night.css">
23+
<link rel="stylesheet" href="ayu-highlight.css">
2324

2425
<!-- Custom theme -->
2526
{{#each additional_css}}

‎src/theme/mod.rs

+9
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ pub static JS: &'static [u8] = include_bytes!("book.js");
1010
pub static HIGHLIGHT_JS: &'static [u8] = include_bytes!("highlight.js");
1111
pub static TOMORROW_NIGHT_CSS: &'static [u8] = include_bytes!("tomorrow-night.css");
1212
pub static HIGHLIGHT_CSS: &'static [u8] = include_bytes!("highlight.css");
13+
pub static AYU_HIGHLIGHT_CSS: &'static [u8] = include_bytes!("ayu-highlight.css");
1314
pub static JQUERY: &'static [u8] = include_bytes!("jquery-2.1.4.min.js");
1415
pub static CLIPBOARD_JS: &'static [u8] = include_bytes!("clipboard.min.js");
1516
pub static FONT_AWESOME: &'static [u8] = include_bytes!("_FontAwesome/css/font-awesome.min.css");
@@ -36,6 +37,7 @@ pub struct Theme {
3637
pub js: Vec<u8>,
3738
pub highlight_css: Vec<u8>,
3839
pub tomorrow_night_css: Vec<u8>,
40+
pub ayu_highlight_css: Vec<u8>,
3941
pub highlight_js: Vec<u8>,
4042
pub clipboard_js: Vec<u8>,
4143
pub jquery: Vec<u8>,
@@ -52,6 +54,7 @@ impl Theme {
5254
js: JS.to_owned(),
5355
highlight_css: HIGHLIGHT_CSS.to_owned(),
5456
tomorrow_night_css: TOMORROW_NIGHT_CSS.to_owned(),
57+
ayu_highlight_css: AYU_HIGHLIGHT_CSS.to_owned(),
5558
highlight_js: HIGHLIGHT_JS.to_owned(),
5659
clipboard_js: CLIPBOARD_JS.to_owned(),
5760
jquery: JQUERY.to_owned(),
@@ -114,6 +117,12 @@ impl Theme {
114117
let _ = f.read_to_end(&mut theme.tomorrow_night_css);
115118
}
116119

120+
// ayu-highlight.css
121+
if let Ok(mut f) = File::open(&src.join("ayu-highlight.css")) {
122+
theme.ayu_highlight_css.clear();
123+
let _ = f.read_to_end(&mut theme.ayu_highlight_css);
124+
}
125+
117126
theme
118127
}
119128
}

‎src/theme/stylus/themes/ayu.styl

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
$theme-name = 'ayu'
2+
3+
$bg = #0f1419
4+
$fg = #c5c5c5
5+
6+
$sidebar-bg = #14191f
7+
$sidebar-fg = #c8c9db
8+
$sidebar-non-existant = #5c6773
9+
$sidebar-active = #ffb454
10+
$sidebar-spacer = #2d334f
11+
12+
$icons = #737480
13+
$icons-hover = #b7b9cc
14+
15+
$links = #0096cf
16+
17+
$inline-code-color = #ffb454
18+
19+
$theme-popup-bg = #14191f
20+
$theme-popup-border = #5c6773
21+
$theme-hover = #191f26
22+
23+
$quote-bg = #262933
24+
$quote-border = lighten($quote-bg, 5%)
25+
26+
$table-border-color = lighten($bg, 5%)
27+
$table-header-bg = lighten($bg, 20%)
28+
$table-alternate-bg = lighten($bg, 3%)
29+
30+
@import 'base'

‎src/theme/stylus/themes/base.styl

+1
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
vertical-align: middle;
106106
padding: 0.1em 0.3em;
107107
border-radius: 3px;
108+
color: $inline-code-color;
108109
}
109110

110111
a:hover > .hljs {

‎src/theme/stylus/themes/coal.styl

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ $icons-hover = #b3c0cc
1414

1515
$links = #2b79a2
1616

17+
$inline-code-color = #c5c8c6;
18+
1719
$theme-popup-bg = #141617
1820
$theme-popup-border = #43484d
1921
$theme-hover = #1f2124

‎src/theme/stylus/themes/index.styl

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
@import 'coal'
33
@import 'navy'
44
@import 'rust'
5+
@import 'ayu'

‎src/theme/stylus/themes/light.styl

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ $icons-hover = #333333
1414

1515
$links = #4183c4
1616

17+
$inline-code-color = #6e6b5e;
18+
1719
$theme-popup-bg = #fafafa
1820
$theme-popup-border = #cccccc
1921
$theme-hover = #e6e6e6

‎src/theme/stylus/themes/navy.styl

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ $icons-hover = #b7b9cc
1414

1515
$links = #2b79a2
1616

17+
$inline-code-color = #c5c8c6;
18+
1719
$theme-popup-bg = #161923
1820
$theme-popup-border = #737480
1921
$theme-hover = #282e40

‎src/theme/stylus/themes/rust.styl

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ $icons-hover = #262625
1414

1515
$links = #2b79a2
1616

17+
$inline-code-color = #6e6b5e;
18+
1719
$theme-popup-bg = #e1e1db
1820
$theme-popup-border = #b38f6b
1921
$theme-hover = #99908a

0 commit comments

Comments
 (0)