Merge pull request #48 from mdinger/dark_theme

Multiple themes
This commit is contained in:
Mathieu David 2015-09-14 17:49:29 +02:00
commit 195bfd2f7f
6 changed files with 362 additions and 71 deletions

View File

@ -186,6 +186,8 @@ impl Renderer for HtmlHandlebars {
// syntax highlighting
let mut highlight_css = try!(File::create(book.get_dest().join("highlight.css")));
try!(highlight_css.write_all(&theme.highlight_css));
let mut tomorrow_night_css = try!(File::create(book.get_dest().join("tomorrow-night.css")));
try!(tomorrow_night_css.write_all(&theme.tomorrow_night_css));
let mut highlight_js = try!(File::create(book.get_dest().join("highlight.js")));
try!(highlight_js.write_all(&theme.highlight_js));

View File

@ -4,6 +4,146 @@ html, body {
}
@media only screen {
/* Light theme */
.light .sidebar {
border-right: 1px solid rgba(0, 0, 0, 0.07);
background-color: #fafafa;
color: #364149;
}
.light .page-wrapper {
background: none repeat scroll 0 0 #FFF;
}
.light .chapter li .active,
.light .chapter li a:hover {
/* Animate color change */
color: #008cff;
}
.light .menu-bar,
.light .nav-chapters {
color: #CCC;
}
.light .chapter li a,
.light .menu-bar i:hover,
.light .nav-chapters:hover {
/* Animate color change */
color: #333;
}
.light .content a {
color: #4183c4;
}
/* Theme changer */
.light .theme-popup {
background: #fafafa;
border: 1px solid #ccc;
}
.light .theme-popup .theme:hover {
background-color: #e6e6e6;
}
/* Coal theme */
.coal {
color: #98a3ad;
background-color: #141617;
}
.coal .sidebar {
background-color: #292c2f;
color: #a1adb8;
}
.coal .chapter li .active,
.coal .chapter li a:hover {
/* Animate color change */
color: #3473ad;
}
.coal .menu-bar,
.coal .nav-chapters {
color: #43484d;
}
.coal .chapter li a,
.coal .menu-bar i:hover,
.coal .nav-chapters:hover {
color: #b3c0cc;
}
.coal .content a {
color: #2b79a2;
}
/* Theme changer */
.coal .theme-popup {
background: #141617;
border: 1px solid #43484d;
}
.coal .theme-popup .theme:hover {
background-color: #1f2124;
}
/* Dark blue colored theme */
.navy {
background-color: #161923;
color: #bcbdd0;
}
.navy .sidebar {
background-color: #282d3f;
color: #c8c9db;
}
.navy .chapter li .active,
.navy .chapter li a:hover {
/* Animate color change */
color: #2b79a2;
}
.navy .menu-bar,
.navy .nav-chapters {
color: #737480;
}
.navy .chapter li a,
.navy .menu-bar i:hover,
.navy .nav-chapters:hover {
color: #b7b9cc;
}
.navy .content a {
color: #2b79a2;
}
/* Theme changer */
.navy .theme-popup {
background: #161923;
border: 1px solid #737480;
}
.navy .theme-popup .theme:hover {
background-color: #282e40;
}
/* Rust theme */
.rust {
background-color: #e1e1db;
color: #262625;
}
.rust .sidebar {
background-color: #3b2e2a;
color: #c8c9db;
}
.rust .chapter li .active,
.rust .chapter li a:hover {
/* Animate color change */
color: #e69f67;
}
.rust .menu-bar,
.rust .nav-chapters {
color: #737480;
}
.rust .chapter li a {
color: #bfbfba;
}
.rust .menu-bar i:hover,
.rust .nav-chapters:hover {
color: #262625;
}
.rust .content a {
color: #2b79a2;
}
/* Theme changer */
.rust .theme-popup {
background: #e1e1db;
border: 1px solid #b38f6b;
}
.rust .theme-popup .theme:hover {
background-color: #99908a;
}
.sidebar {
position: absolute;
left: 0;
@ -11,13 +151,10 @@ html, body {
bottom: 0;
width: 300px;
overflow-y: auto;
border-right: 1px solid rgba(0, 0, 0, 0.07);
padding: 10px 10px;
font-size: 14px;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
background-color: #fafafa;
color: #364149;
/* Animation: slide away */
-webkit-transition: left 0.5s; /* Safari */
@ -34,7 +171,6 @@ html, body {
top: 0;
bottom: 0;
box-sizing: border-box;
background: none repeat scroll 0 0 #FFF;
-webkit-overflow-scrolling: touch;
min-height: 100%;
@ -82,23 +218,12 @@ html, body {
white-space: nowrap;
}
.chapter li {
color: #AAA;
}
.chapter li a {
color: #333;
padding: 5px 0;
text-decoration: none;
}
.chapter li .active {
color: #008cff;
}
.chapter li a:hover {
/* Animate color change */
color: #008cff;
text-decoration: none;
}
@ -116,7 +241,6 @@ html, body {
.menu-bar {
position: relative;
height: 50px;
color: #CCC;
}
.menu-bar i {
@ -130,13 +254,12 @@ html, body {
transition: color 0.5s;
}
.menu-bar .right-buttons {
float: right;
.menu-bar .left-buttons {
float: left;
}
.menu-bar :hover {
/* Animate color change */
color: #333;
.menu-bar .right-buttons {
float: right;
}
.menu-bar i:hover {
@ -144,7 +267,6 @@ html, body {
}
.menu-title {
color: #7E7E7E;
display: inline-block;
font-weight: 200;
font-size: 20px;
@ -165,7 +287,6 @@ html, body {
}
.menu-bar:hover .menu-title {
color: #7E7E7E;
opacity: 1;
}
@ -180,7 +301,6 @@ html, body {
/* Content */
.content a {
color: #4183c4;
text-decoration: none;
}
@ -190,7 +310,6 @@ html, body {
/* Nav icons */
.nav-chapters {
color: #CCC;
font-size: 40px;
text-align: center;
text-decoration: none;
@ -215,7 +334,6 @@ html, body {
.mobile-nav-chapters { display: none; }
.nav-chapters:hover {
color: #333;
text-decoration: none;
}
@ -226,6 +344,24 @@ html, body {
.next {
right: 0;
}
/* Theme Popup */
.theme-popup {
position: fixed;
left: -40px;
border-radius: 4px;
font-size: 0.7em;
}
.theme-popup .theme {
margin: 0;
padding: 2px 10px;
line-height: 25px;
white-space: nowrap;
}
}
@ -242,12 +378,43 @@ html, body {
/* Fix the navigation arrows that collapsed with the text on smaller screens */
@media only screen and (max-width: 1250px) {
/* Light theme */
.light .mobile-nav-chapters {
background-color: #E0E0E0;
color: #999;
}
.light .mobile-nav-chapters i:hover {
color: #333;
}
/* Coal theme */
.coal .mobile-nav-chapters {
background-color: #212426;
color: #43484d;
}
.coal .mobile-nav-chapters i:hover {
color: #b3c0cc;
}
/* Navy theme */
.navy .mobile-nav-chapters {
background-color: #242838;
color: #737480;
}
.navy .mobile-nav-chapters i:hover {
color: #b7b9cc;
}
/* Rust theme */
.rust .mobile-nav-chapters {
background-color: #4d413d;
color: #737480;
}
.rust .mobile-nav-chapters i:hover {
color: #b7b9cc;
}
.nav-chapters {
display: none;
}
.mobile-nav-chapters {
color: #CCC;
font-size: 40px;
text-align: center;
text-decoration: none;
@ -263,8 +430,6 @@ html, body {
margin-bottom: 50px;
border-radius: 5px;
background-color: #E0E0E0;
color: #999;
}
.next {

View File

@ -3,6 +3,12 @@ $( document ).ready(function() {
// url
var url = window.location.pathname;
// Set theme
var theme = localStorage.getItem('theme');
if (theme == null) { theme = 'light'; }
set_theme(theme);
// Syntax highlighting Configuration
hljs.configure({
tabReplace: ' ', // 4 spaces
@ -37,4 +43,40 @@ $( document ).ready(function() {
window.print();
}
// Theme button
$("#theme-toggle").click(function(){
if($('.theme-popup').length) {
$('.theme-popup').remove();
} else {
var popup = $('<div class="theme-popup"></div>')
.append($('<div class="theme" id="light">Light (default)<div>'))
.append($('<div class="theme" id="rust">Rust</div>'))
.append($('<div class="theme" id="coal">Coal</div>'))
.append($('<div class="theme" id="navy">Navy</div>'));
$(this).append(popup);
$('.theme').click(function(){
var theme = $(this).attr('id');
set_theme(theme)
});
}
});
function set_theme(theme) {
if (theme == 'coal' || theme == 'navy') {
$("[href='tomorrow-night.css']").prop('disabled', false);
$("[href='highlight.css']").prop('disabled', true);
} else {
$("[href='tomorrow-night.css']").prop('disabled', true);
$("[href='highlight.css']").prop('disabled', false);
}
localStorage.setItem('theme', theme);
$('body').removeClass().addClass(theme);
}
});

View File

@ -16,6 +16,7 @@
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="highlight.css">
<link rel="stylesheet" href="tomorrow-night.css">
<!-- MathJax -->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
@ -31,7 +32,8 @@
<div class="page">
<div id="menu-bar" class="menu-bar">
<div class="left-buttons">
<i id="sidebar-toggle" class="fa fa-bars left"></i>
<i id="sidebar-toggle" class="fa fa-bars"></i>
<i id="theme-toggle" class="fa fa-paint-brush"></i>
</div>
<h1 class="menu-title">{{ title }}</h1>

View File

@ -8,6 +8,7 @@ pub static INDEX: &'static [u8] = include_bytes!("index.hbs");
pub static CSS: &'static [u8] = include_bytes!("book.css");
pub static JS: &'static [u8] = include_bytes!("book.js");
pub static HIGHLIGHT_JS: &'static [u8] = include_bytes!("highlight.js");
pub static TOMORROW_NIGHT_CSS: &'static [u8] = include_bytes!("tomorrow-night.css");
pub static HIGHLIGHT_CSS: &'static [u8] = include_bytes!("highlight.css");
pub static JQUERY: &'static [u8] = include_bytes!("jquery-2.1.4.min.js");
pub static FONT_AWESOME: &'static [u8] = include_bytes!("_FontAwesome/css/font-awesome.min.css");
@ -29,12 +30,13 @@ pub struct Theme {
pub css: Vec<u8>,
pub js: Vec<u8>,
pub highlight_css: Vec<u8>,
pub tomorrow_night_css: Vec<u8>,
pub highlight_js: Vec<u8>,
pub jquery: Vec<u8>,
}
impl Theme {
pub fn new(src: &Path) -> Self{
pub fn new(src: &Path) -> Self {
// Default theme
let mut theme = Theme {
@ -42,6 +44,7 @@ impl Theme {
css: CSS.to_owned(),
js: JS.to_owned(),
highlight_css: HIGHLIGHT_CSS.to_owned(),
tomorrow_night_css: TOMORROW_NIGHT_CSS.to_owned(),
highlight_js: HIGHLIGHT_JS.to_owned(),
jquery: JQUERY.to_owned(),
};
@ -60,58 +63,39 @@ impl Theme {
// Check for individual files if they exist
// index.hbs
match File::open(&src.join("index.hbs")) {
Ok(mut f) => {
theme.index.clear(); // Reset the value, because read_to_string appends...
match f.read_to_end(&mut theme.index) {
_ => {}
};
},
_ => {},
if let Ok(mut f) = File::open(&src.join("index.hbs")) {
theme.index.clear(); // Reset the value, because read_to_string appends...
let _ = f.read_to_end(&mut theme.index);
}
// book.js
match File::open(&src.join("book.js")) {
Ok(mut f) => {
theme.js.clear();
match f.read_to_end(&mut theme.js){
_ => {}
}
},
_ => {},
if let Ok(mut f) = File::open(&src.join("book.js")) {
theme.js.clear();
let _ = f.read_to_end(&mut theme.js);
}
// book.css
match File::open(&src.join("book.css")) {
Ok(mut f) => {
theme.css.clear();
match f.read_to_end(&mut theme.css) {
_ => {}
}
},
_ => {},
if let Ok(mut f) = File::open(&src.join("book.css")) {
theme.css.clear();
let _ = f.read_to_end(&mut theme.css);
}
// highlight.js
match File::open(&src.join("highlight.js")) {
Ok(mut f) => {
theme.highlight_js.clear();
match f.read_to_end(&mut theme.highlight_js) {
_ => {}
}
},
_ => {},
if let Ok(mut f) = File::open(&src.join("highlight.js")) {
theme.highlight_js.clear();
let _ = f.read_to_end(&mut theme.highlight_js);
}
// highlight.css
match File::open(&src.join("highlight.css")) {
Ok(mut f) => {
theme.highlight_css.clear();
match f.read_to_end(&mut theme.highlight_css) {
_ => {}
}
},
_ => {},
if let Ok(mut f) = File::open(&src.join("highlight.css")) {
theme.highlight_css.clear();
let _ = f.read_to_end(&mut theme.highlight_css);
}
// tomorrow-night.css
if let Ok(mut f) = File::open(&src.join("tomorrow-night.css")) {
theme.tomorrow_night_css.clear();
let _ = f.read_to_end(&mut theme.tomorrow_night_css);
}
theme

View File

@ -0,0 +1,96 @@
/* Tomorrow Night Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Tomorrow Comment */
.hljs-comment {
color: #969896;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-attribute,
.hljs-tag,
.hljs-regexp,
.ruby .hljs-constant,
.xml .hljs-tag .hljs-title,
.xml .hljs-pi,
.xml .hljs-doctype,
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
color: #cc6666;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-preprocessor,
.hljs-pragma,
.hljs-built_in,
.hljs-literal,
.hljs-params,
.hljs-constant {
color: #de935f;
}
/* Tomorrow Yellow */
.ruby .hljs-class .hljs-title,
.css .hljs-rule .hljs-attribute {
color: #f0c674;
}
/* Tomorrow Green */
.hljs-string,
.hljs-value,
.hljs-inheritance,
.hljs-header,
.hljs-name,
.ruby .hljs-symbol,
.xml .hljs-cdata {
color: #b5bd68;
}
/* Tomorrow Aqua */
.hljs-title,
.css .hljs-hexcolor {
color: #8abeb7;
}
/* Tomorrow Blue */
.hljs-function,
.python .hljs-decorator,
.python .hljs-title,
.ruby .hljs-function .hljs-title,
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
color: #81a2be;
}
/* Tomorrow Purple */
.hljs-keyword,
.javascript .hljs-function {
color: #b294bb;
}
.hljs {
display: block;
overflow-x: auto;
background: #1d1f21;
color: #c5c8c6;
padding: 0.5em;
-webkit-text-size-adjust: none;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
}