Use CSS variables in themed CSS

inst/resources/template.css

@@ -23,48 +23,76 @@
 @import url({{code_font_url}});
 {{#extra_font_imports}}{{extra_font_imports}}{{/extra_font_imports}}
 
+:root {
+  /* Fonts */
+  --body-font-family: {{body_font_family}};
+  --header-font-family: {{header_font_family}};
+  --code-font-family: {{code_font_family}};
+  --text-font-size: {{text_font_size}};
+  --code-font-size: {{code_font_size}};
+  --code-inline-font-size: {{code_inline_font_size}};
+  --header-h1-font-size: {{header_h1_font_size}};
+  --header-h2-font-size: {{header_h2_font_size}};
+  --header-h3-font-size: {{header_h3_font_size}};
+
+  /* Colors */{{#primary}}
+  --primary: {{primary}};{{/primary}}{{#secondary}}
+  --secondary: {{secondary}};{{/secondary}}
+  --text-color: {{text_color}};
+  --header-color: {{header_color}};
+  --background-color: {{background_color}};
+  --link-color: {{link_color}};{{#text_bold_color}}
+  --text-bold-color: {{text_bold_color}};{{/text_bold_color}}
+  --code-highlight-color: {{code_highlight_color}};
+  --inverse-text-color: {{inverse_text_color}};
+  --inverse-background-color: {{inverse_background_color}};
+  --inverse-header-color: {{inverse_header_color}};
+  --title-slide-background-color: {{title_slide_background_color}};
+  --title-slide-text-color: {{title_slide_text_color}};
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: {{body_font_family}};
+  font-family: var(--body-font-family);
   font-weight: {{text_font_weight}};
-  color: {{text_color}};
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: {{header_font_family}};
+  font-family: var(--header-font-family);
   font-weight: {{header_font_weight}};
-  color: {{header_color}};
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: {{background_color}};
-  font-size: {{text_font_size}};
-  {{#background_image}}
-  background-image: url({{background_image}});
-  {{#background_size}}background-size: {{background_size}};{{/background_size}}
-  {{#background_position}}background-position: {{background_position}};{{/background_position}}
-  {{/background_image}}
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);{{#background_image}}
+  background-image: url({{background_image}});{{#background_size}}
+  background-size: {{background_size}};{{/background_size}}{{#background_position}}
+  background-position: {{background_position}};{{/background_position}}{{/background_image}}
   padding: {{padding}};
 }
 .remark-slide-content h1 {
-    font-size: {{header_h1_font_size}};
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: {{header_h2_font_size}};
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: {{header_h3_font_size}};
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: {{code_font_family}}, {{code_font_family_fallback}}, monospace;
+  font-family: var(--code-font-family), {{code_font_family_fallback}}, monospace;
 }
 .remark-code {
-  font-size: {{code_font_size}};
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
-  {{#code_inline_color}}color: {{code_inline_color}};{{/code_inline_color}}
-  {{#code_inline_background_color}}
+  font-size: var(--code-inline-font-size);{{#code_inline_color}}
+  color: {{code_inline_color}};{{/code_inline_color}}{{#code_inline_background_color}}
   background-color: {{code_inline_background_color}};
-  padding: 2px;
-  {{/code_inline_background_color}}
-  font-size: {{code_inline_font_size}};
+  padding: 2px;{{/code_inline_background_color}}
 }
 .remark-slide-number {
   color: {{text_slide_number_color}};
@@ -72,38 +100,38 @@ h1, h2, h3 {
   font-size: {{text_slide_number_font_size}};
 }
 {{#text_bold_color}}
-strong { color: {{text_bold_color}}; }
+strong { color: var(--text-bold-color); }
 {{/text_bold_color}}
 a, a > code {
-  color: {{link_color}};
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  {{#footnote_color}}color: {{footnote_color}};{{/footnote_color}}
-  position: absolute;
+  position: absolute;{{#footnote_color}}
+  color: {{footnote_color}};{{/footnote_color}}
   bottom: {{footnote_position_bottom}};
   padding-right: 4em;
   font-size: {{footnote_font_size}};
 }
 .remark-code-line-highlighted {
-  background-color: {{code_highlight_color}};
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: {{inverse_background_color}};
-  color: {{inverse_text_color}};
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   {{#inverse_text_shadow}}text-shadow: 0 0 20px #333;{{/inverse_text_shadow}}
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: {{inverse_header_color}};
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: {{title_slide_text_color}};
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: {{title_slide_background_color}};
-  {{#title_slide_background_image}}background-image: url("{{title_slide_background_image}}");{{/title_slide_background_image}}
-  {{#title_slide_background_size}}background-size: {{title_slide_background_size}};{{/title_slide_background_size}}
-  {{#title_slide_background_position}}background-position: {{title_slide_background_position}};{{/title_slide_background_position}}
+  background-color: var(--title-slide-background-color);{{#title_slide_background_image}}
+  background-image: url("{{title_slide_background_image}}");{{/title_slide_background_image}}{{#title_slide_background_size}}
+  background-size: {{title_slide_background_size}};{{/title_slide_background_size}}{{#title_slide_background_position}}
+  background-position: {{title_slide_background_position}};{{/title_slide_background_position}}
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -158,11 +186,11 @@ th, td {
   background: {{table_row_even_background_color}};
 }
 table.dataTable tbody {
-  background-color: {{background_color}};
-  color: {{text_color}};
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: {{background_color}};
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: {{table_row_even_background_color}};
@@ -171,10 +199,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: {{text_color}};
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: {{text_color}} !important;
+  color: var(--text-color) !important;
 }
 
 {{#header_background}}
@@ -186,8 +214,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: {{background_color}};
-  color: {{text_color}};
+  background: var(--background-color);
+  color: var(--text-color);
   padding: {{padding}};
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/duo-header_bg.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #FEFDFD;
+  --header-color: #F97B64;
+  --background-color: #1F4257;
+  --link-color: #F97B64;
+  --text-bold-color: #F97B64;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #1F4257;
+  --inverse-background-color: #F97B64;
+  --inverse-header-color: #1F4257;
+  --title-slide-background-color: #1F4257;
+  --title-slide-text-color: #F97B64;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #FEFDFD;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #F97B64;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #1F4257;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #F97B64;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #FEFDFD;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #F97B64; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #F97B64;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #F97B64;
-  color: #1F4257;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #1F4257;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #F97B64;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #1F4257;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #627A89;
 }
 table.dataTable tbody {
-  background-color: #1F4257;
-  color: #FEFDFD;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #1F4257;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #627A89;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #FEFDFD;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #FEFDFD !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -174,8 +200,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #F97B64;
-  color: #1F4257;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/duo.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #FEFDFD;
+  --header-color: #F97B64;
+  --background-color: #1F4257;
+  --link-color: #F97B64;
+  --text-bold-color: #F97B64;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #1F4257;
+  --inverse-background-color: #F97B64;
+  --inverse-header-color: #1F4257;
+  --title-slide-background-color: #1F4257;
+  --title-slide-text-color: #F97B64;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #FEFDFD;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #F97B64;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #1F4257;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #F97B64;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #FEFDFD;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #F97B64; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #F97B64;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #F97B64;
-  color: #1F4257;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #1F4257;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #F97B64;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #1F4257;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #627A89;
 }
 table.dataTable tbody {
-  background-color: #1F4257;
-  color: #FEFDFD;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #1F4257;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #627A89;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #FEFDFD;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #FEFDFD !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #F97B64;
-  color: #1F4257;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/duo_accent.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #000000;
+  --header-color: #006747;
+  --background-color: #FFFFFF;
+  --link-color: #006747;
+  --text-bold-color: #006747;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #000000;
+  --inverse-background-color: #CFC493;
+  --inverse-header-color: #000000;
+  --title-slide-background-color: #006747;
+  --title-slide-text-color: #FFFFFF;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #000000;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #006747;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #FFFFFF;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #006747;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #006747;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #006747; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #006747;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #CFC493;
-  color: #000000;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #000000;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #FFFFFF;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #006747;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #DDD5B3;
 }
 table.dataTable tbody {
-  background-color: #FFFFFF;
-  color: #000000;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #FFFFFF;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #DDD5B3;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #000000;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #000000 !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #006747;
-  color: #FFFFFF;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/duo_accent_inverse.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #FFFFFF;
+  --header-color: #006747;
+  --background-color: #000000;
+  --link-color: #CFC493;
+  --text-bold-color: #CFC493;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #000000;
+  --inverse-background-color: #CFC493;
+  --inverse-header-color: #000000;
+  --title-slide-background-color: #006747;
+  --title-slide-text-color: #FFFFFF;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #FFFFFF;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #006747;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #000000;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #CFC493;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #006747;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #CFC493; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #CFC493;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #CFC493;
-  color: #000000;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #000000;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #FFFFFF;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #006747;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #004831;
 }
 table.dataTable tbody {
-  background-color: #000000;
-  color: #FFFFFF;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #000000;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #004831;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #FFFFFF;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #FFFFFF !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #006747;
-  color: #000000;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/mono_accent.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #272822;
+  --header-color: #43418A;
+  --background-color: #FFFFFF;
+  --link-color: #43418A;
+  --text-bold-color: #43418A;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #FFFFFF;
+  --inverse-background-color: #43418A;
+  --inverse-header-color: #FFFFFF;
+  --title-slide-background-color: #43418A;
+  --title-slide-text-color: #FFFFFF;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #272822;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #43418A;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #FFFFFF;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #43418A;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #43418A;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #43418A; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #43418A;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #43418A;
-  color: #FFFFFF;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #FFFFFF;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #FFFFFF;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #43418A;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #C6C6DB;
 }
 table.dataTable tbody {
-  background-color: #FFFFFF;
-  color: #272822;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #FFFFFF;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #C6C6DB;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #272822;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #272822 !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #43418A;
-  color: #FFFFFF;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/mono_accent_inverse.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #FFFFFF;
+  --header-color: #3C989E;
+  --background-color: #050F0F;
+  --link-color: #3C989E;
+  --text-bold-color: #3C989E;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #050F0F;
+  --inverse-background-color: #3C989E;
+  --inverse-header-color: #050F0F;
+  --title-slide-background-color: #3C989E;
+  --title-slide-text-color: #050F0F;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #FFFFFF;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #3C989E;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #050F0F;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #3C989E;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #3C989E;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #3C989E; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #3C989E;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #3C989E;
-  color: #050F0F;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #050F0F;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #050F0F;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #3C989E;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #122D2F;
 }
 table.dataTable tbody {
-  background-color: #050F0F;
-  color: #FFFFFF;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #050F0F;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #122D2F;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #FFFFFF;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #FFFFFF !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #3C989E;
-  color: #050F0F;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/mono_dark.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #F4FDFB;
+  --header-color: #cbf7ed;
+  --background-color: #1E2523;
+  --link-color: #cbf7ed;
+  --text-bold-color: #cbf7ed;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #1E2523;
+  --inverse-background-color: #cbf7ed;
+  --inverse-header-color: #1E2523;
+  --title-slide-background-color: #cbf7ed;
+  --title-slide-text-color: #1E2523;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #F4FDFB;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #cbf7ed;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #1E2523;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #cbf7ed;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #cbf7ed;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #cbf7ed; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #cbf7ed;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #cbf7ed;
-  color: #1E2523;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #1E2523;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #1E2523;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #cbf7ed;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #3C4A47;
 }
 table.dataTable tbody {
-  background-color: #1E2523;
-  color: #F4FDFB;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #1E2523;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #3C4A47;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #F4FDFB;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #F4FDFB !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #cbf7ed;
-  color: #1E2523;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/mono_light-header_bg.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #18273F;
+  --header-color: #23395b;
+  --background-color: #E9EBEE;
+  --link-color: #23395b;
+  --text-bold-color: #23395b;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #E9EBEE;
+  --inverse-background-color: #23395b;
+  --inverse-header-color: #E9EBEE;
+  --title-slide-background-color: #23395b;
+  --title-slide-text-color: #E9EBEE;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #18273F;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #23395b;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #E9EBEE;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #23395b;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #23395b;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #23395b; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #23395b;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #23395b;
-  color: #E9EBEE;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #E9EBEE;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #E9EBEE;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #23395b;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #D3D7DE;
 }
 table.dataTable tbody {
-  background-color: #E9EBEE;
-  color: #18273F;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #E9EBEE;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #D3D7DE;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #18273F;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #18273F !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -174,8 +200,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #23395b;
-  color: #E9EBEE;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/mono_light.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #18273F;
+  --header-color: #23395b;
+  --background-color: #E9EBEE;
+  --link-color: #23395b;
+  --text-bold-color: #23395b;
+  --code-highlight-color: rgba(255,255,0,0.5);
+  --inverse-text-color: #E9EBEE;
+  --inverse-background-color: #23395b;
+  --inverse-header-color: #E9EBEE;
+  --title-slide-background-color: #23395b;
+  --title-slide-text-color: #E9EBEE;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #18273F;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #23395b;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #E9EBEE;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #23395b;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #23395b;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #23395b; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #23395b;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: rgba(255,255,0,0.5);
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #23395b;
-  color: #E9EBEE;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #E9EBEE;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #E9EBEE;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #23395b;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #D3D7DE;
 }
 table.dataTable tbody {
-  background-color: #E9EBEE;
-  color: #18273F;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #E9EBEE;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #D3D7DE;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #18273F;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #18273F !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #23395b;
-  color: #E9EBEE;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/solarized_dark-header_bg.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #839496;
+  --header-color: #dc322f;
+  --background-color: #002b36;
+  --link-color: #b58900;
+  --text-bold-color: #d33682;
+  --code-highlight-color: #268bd240;
+  --inverse-text-color: #002b36;
+  --inverse-background-color: #fdf6e3;
+  --inverse-header-color: #002b36;
+  --title-slide-background-color: #fdf6e3;
+  --title-slide-text-color: #002b36;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #839496;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #dc322f;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #002b36;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #6c71c4;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #586e75;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #d33682; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #b58900;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: #268bd240;
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #fdf6e3;
-  color: #002b36;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #002b36;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #002b36;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #fdf6e3;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #073642;
 }
 table.dataTable tbody {
-  background-color: #002b36;
-  color: #839496;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #002b36;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #073642;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #839496;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #839496 !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -174,8 +200,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #dc322f;
-  color: #002b36;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/solarized_dark.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #839496;
+  --header-color: #dc322f;
+  --background-color: #002b36;
+  --link-color: #b58900;
+  --text-bold-color: #d33682;
+  --code-highlight-color: #268bd240;
+  --inverse-text-color: #002b36;
+  --inverse-background-color: #fdf6e3;
+  --inverse-header-color: #002b36;
+  --title-slide-background-color: #fdf6e3;
+  --title-slide-text-color: #002b36;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #839496;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #dc322f;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #002b36;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #6c71c4;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #586e75;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #d33682; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #b58900;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: #268bd240;
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #fdf6e3;
-  color: #002b36;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #002b36;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #002b36;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #fdf6e3;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #073642;
 }
 table.dataTable tbody {
-  background-color: #002b36;
-  color: #839496;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #002b36;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #073642;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #839496;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #839496 !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #dc322f;
-  color: #002b36;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;

tests/testthat/css/solarized_light.css

@@ -23,76 +23,102 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);
 
 
+:root {
+  /* Fonts */
+  --body-font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  --header-font-family: 'Yanone Kaffeesatz';
+  --code-font-family: 'Source Code Pro';
+  --text-font-size: 20px;
+  --code-font-size: 0.9em;
+  --code-inline-font-size: 1em;
+  --header-h1-font-size: 55px;
+  --header-h2-font-size: 45px;
+  --header-h3-font-size: 35px;
+
+  /* Colors */
+  --text-color: #657b83;
+  --header-color: #dc322f;
+  --background-color: #fdf6e3;
+  --link-color: #b58900;
+  --text-bold-color: #d33682;
+  --code-highlight-color: #268bd240;
+  --inverse-text-color: #fdf6e3;
+  --inverse-background-color: #002b36;
+  --inverse-header-color: #fdf6e3;
+  --title-slide-background-color: #002b36;
+  --title-slide-text-color: #fdf6e3;
+}
+
+html {
+  font-size: var(--text-font-size);
+}
+
 body {
-  font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
+  font-family: var(--body-font-family);
   font-weight: normal;
-  color: #657b83;
+  color: var(--text-color);
 }
 h1, h2, h3 {
-  font-family: 'Yanone Kaffeesatz';
+  font-family: var(--header-font-family);
   font-weight: normal;
-  color: #dc322f;
+  color: var(--header-color);
 }
 .remark-slide-content {
-  background-color: #fdf6e3;
-  font-size: 20px;
+  background-color: var(--background-color);
+  font-size: var(--text-font-size);
   padding: 1rem 4rem 1rem 4rem;
 }
 .remark-slide-content h1 {
-    font-size: 55px;
+  font-size: var(--header-h1-font-size);
 }
 .remark-slide-content h2 {
-    font-size: 45px;
+  font-size: var(--header-h2-font-size);
 }
 .remark-slide-content h3 {
-    font-size: 35px;
+  font-size: var(--header-h3-font-size);
 }
 .remark-code, .remark-inline-code {
-  font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace;
+  font-family: var(--code-font-family), 'Lucida Console', Monaco, monospace;
 }
 .remark-code {
-  font-size: 0.9em;
+  font-size: var(--code-font-size);
 }
 .remark-inline-code {
+  font-size: var(--code-inline-font-size);
   color: #6c71c4;
-  font-size: 1em;
 }
 .remark-slide-number {
   color: #93a1a1;
   opacity: 1;
   font-size: 0.9em;
 }
-strong { color: #d33682; }
+strong { color: var(--text-bold-color); }
 a, a > code {
-  color: #b58900;
+  color: var(--link-color);
   text-decoration: none;
 }
 .footnote {
-  
   position: absolute;
   bottom: 3em;
   padding-right: 4em;
   font-size: 0.9em;
 }
 .remark-code-line-highlighted {
-  background-color: #268bd240;
+  background-color: var(--code-highlight-color);
 }
 .inverse {
-  background-color: #002b36;
-  color: #fdf6e3;
+  background-color: var(--inverse-background-color);
+  color: var(--inverse-text-color);
   
 }
 .inverse h1, .inverse h2, .inverse h3 {
-  color: #fdf6e3;
+  color: var(--inverse-header-color);
 }
 .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 {
-  color: #fdf6e3;
+  color: var(--title-slide-text-color);
 }
 .title-slide {
-  background-color: #002b36;
-  
-  
-  
+  background-color: var(--title-slide-background-color);
 }
 .title-slide .remark-slide-number {
   display: none;
@@ -147,11 +173,11 @@ th, td {
   background: #eee8d5;
 }
 table.dataTable tbody {
-  background-color: #fdf6e3;
-  color: #657b83;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 table.dataTable.display tbody tr.odd {
-  background-color: #fdf6e3;
+  background-color: var(--background-color);
 }
 table.dataTable.display tbody tr.even {
   background-color: #eee8d5;
@@ -160,10 +186,10 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
-  color: #657b83;
+  color: var(--text-color);
 }
 .dataTables_wrapper .dataTables_paginate .paginate_button {
-  color: #657b83 !important;
+  color: var(--text-color) !important;
 }
 
 /* Slide Header Background for h1 elements */
@@ -173,8 +199,8 @@ table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
   top: 0;
   left: 0;
   width: 100%;
-  background: #dc322f;
-  color: #fdf6e3;
+  background: var(--background-color);
+  color: var(--text-color);
   padding: 2rem 4rem 1.5rem 4rem;
   margin-top: 0;
   box-sizing: border-box;