Skip to content

Commit

Permalink
Fix CSS variables update method.
Browse files Browse the repository at this point in the history 
Close juba#116
  • Loading branch information
@juba
juba committed Aug 19, 2021
1 parent 1721133 commit fe8ab47
Showing 1 changed file with 105 additions and 109 deletions.
214 changes: 105 additions & 109 deletions inst/templates/downcute/downcute.js
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,110 @@
const downcute_variables_default = `
:root {
--accent-color: #175d96;
--page-background: #f7f7f7;
--header-background: #fff;
--header-text-color: var(--text-color);
--text-color: #000;
--link-color: var(--accent-color);
--sidebar-width: 280px;
--sidebar-background: var(--page-background);
--sidebar-link-color: #444;
--sidebar-link-active-color: var(--accent-color);
--sidebar-link-arrow-color: #999;
--main-background: var(--page-background);
--border-color: #eaeaea;
--header-height: 0px;
--code-font: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
--tip-color: rgb(6, 125, 247);
--success-color: #42b983;
--warning-color: #ff9800;
--danger-color: rgb(255, 0, 31);
--nav-link-color: #2c3e50;
--nav-link-border-color: var(--accent-color);
--code-block-background: #011627;
--code-block-text-color: white;
--code-block-shadow-color: #333;
--code-block-shadow-width: 0px;
--highlighted-line-background: #022a4b;
--highlighted-line-border-color: #ffa7c4;
--inline-code-color: rgb(116, 66, 16);
--inline-code-background: rgb(254, 252, 191);
--loader-primary-color: #f3f3f3;
--loader-secondary-color: #ecebeb;
--table-header-background: #fafafa;
--table-header-color: #555;
--docute-select-height: 38px;
--search-icon-color: #999;
--search-focus-border-color: #ccc;
--search-focus-icon-color: #333;
--search-result-hover-background: #f9f9f9;
--blockquote-background-color: #f1f1f1;
--blockquote-text-color: #6a737d;
--blockquote-border-color: #ccc;
--datatable-odd-background: #f9f9f9;
--datatable-even-background: #ffffff;
--datatable-hover-background: #f6f6f6;
--anchor-color: #bbbbbb;
--toc-border-color: #aaaaaa;

function set_light_style() {
const style = document.documentElement.style;
style.setProperty('--accent-color', '#175d96');
style.setProperty('--page-background', '#f7f7f7');
style.setProperty('--header-background', '#fff');
style.setProperty('--header-text-color', 'var(--text-color)');
style.setProperty('--text-color', '#000');
style.setProperty('--link-color', 'var(--accent-color)');
style.setProperty('--sidebar-width', '280px');
style.setProperty('--sidebar-background', 'var(--page-background)');
style.setProperty('--sidebar-link-color', '#444');
style.setProperty('--sidebar-link-active-color', 'var(--accent-color)');
style.setProperty('--sidebar-link-arrow-color', '#999');
style.setProperty('--main-background', 'var(--page-background)');
style.setProperty('--border-color', '#eaeaea');
style.setProperty('--header-height', '0px');
style.setProperty('--code-font', 'SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace');
style.setProperty('--tip-color', 'rgb(6, 125, 247)');
style.setProperty('--success-color', '#42b983');
style.setProperty('--warning-color', '#ff9800');
style.setProperty('--danger-color', 'rgb(255, 0, 31)');
style.setProperty('--nav-link-color', '#2c3e50');
style.setProperty('--nav-link-border-color', 'var(--accent-color)');
style.setProperty('--code-block-background', '#011627');
style.setProperty('--code-block-text-color', 'white');
style.setProperty('--code-block-shadow-color', '#333');
style.setProperty('--code-block-shadow-width', '0px');
style.setProperty('--highlighted-line-background', '#022a4b');
style.setProperty('--highlighted-line-border-color', '#ffa7c4');
style.setProperty('--inline-code-color', 'rgb(116, 66, 16)');
style.setProperty('--inline-code-background', 'rgb(254, 252, 191)');
style.setProperty('--loader-primary-color', '#f3f3f3');
style.setProperty('--loader-secondary-color', '#ecebeb');
style.setProperty('--table-header-background', '#fafafa');
style.setProperty('--table-header-color', '#555');
style.setProperty('--docute-select-height', '38px');
style.setProperty('--search-icon-color', '#999');
style.setProperty('--search-focus-border-color', '#ccc');
style.setProperty('--search-focus-icon-color', '#333');
style.setProperty('--search-result-hover-background', '#f9f9f9');
style.setProperty('--blockquote-background-color', '#f1f1f1');
style.setProperty('--blockquote-text-color', '#6a737d');
style.setProperty('--blockquote-border-color', '#ccc');
style.setProperty('--datatable-odd-background', '#f9f9f9');
style.setProperty('--datatable-even-background', '#ffffff');
style.setProperty('--datatable-hover-background', '#f6f6f6');
style.setProperty('--anchor-color', '#bbbbbb');
style.setProperty('--toc-border-color', '#aaaaaa');
}
`

const downcute_variables_dark = `
:root {
--accent-color: rgb(92, 162, 219);
--page-background: #2f3136;
--header-background: var(--page-background);
--header-text-color: var(--text-color);
--text-color: hsla(0,0%,100%,0.88);
--link-color: var(--accent-color);
--sidebar-width: 280px;
--sidebar-background: var(--page-background);
--sidebar-link-color: var(--text-color);
--sidebar-link-active-color: var(--accent-color);
--sidebar-link-arrow-color: #999;
--main-background: var(--page-background);
--border-color: #3e4147;
--header-height: 0px;
--code-font: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
--tip-color: rgb(6, 125, 247);
--success-color: #42b983;
--warning-color: #ff9800;
--danger-color: rgb(255, 0, 31);
--nav-link-color: var(--text-color);
--nav-link-border-color: var(--accent-color);
--code-block-background: #011627;
--code-block-text-color: white;
--code-block-shadow-color: #333;
--code-block-shadow-width: 0px;
--highlighted-line-background: #022a4b;
--highlighted-line-border-color: #ffa7c4;
--inline-code-color: #e6e6e6;
--inline-code-background: #373c49;
--loader-primary-color: hsla(0, 0%, 100%, 0.08);
--loader-secondary-color: hsla(0, 0%, 100%, 0.18);
--table-header-background: var(--border-color);
--table-header-color: #C6C6C6;
--docute-select-height: 38px;
--search-icon-color: #999;
--search-focus-border-color: #999;
--search-focus-icon-color: #ccc;
--search-result-background: #27292f;
--search-result-hover-background: #1e2025;
--content-link-border: 2px solid hsla(0, 0%, 100%, 0.28);
--content-link-hover-border-color: current-color;
--blockquote-background-color: #35363A;
--blockquote-text-color: #a5a6aa;
--blockquote-border-color: #a5a6aa;
--datatable-odd-background: #2f3136;
--datatable-even-background: #333539;
--datatable-hover-background: #35374B;
--anchor-color: #666666;
--toc-border-color: #888888;

function set_dark_style() {
const style = document.documentElement.style;
style.setProperty('--accent-color', 'rgb(92, 162, 219)');
style.setProperty('--page-background', '#2f3136');
style.setProperty('--header-background', 'var(--page-background)');
style.setProperty('--header-text-color', 'var(--text-color)');
style.setProperty('--text-color', 'hsla(0,0%,100%,0.88)');
style.setProperty('--link-color', 'var(--accent-color)');
style.setProperty('--sidebar-width', '280px');
style.setProperty('--sidebar-background', 'var(--page-background)');
style.setProperty('--sidebar-link-color', 'var(--text-color)');
style.setProperty('--sidebar-link-active-color', 'var(--accent-color)');
style.setProperty('--sidebar-link-arrow-color', '#999');
style.setProperty('--main-background', 'var(--page-background)');
style.setProperty('--border-color', '#3e4147');
style.setProperty('--header-height', '0px');
style.setProperty('--code-font', 'SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace');
style.setProperty('--tip-color', 'rgb(6, 125, 247)');
style.setProperty('--success-color', '#42b983');
style.setProperty('--warning-color', '#ff9800');
style.setProperty('--danger-color', 'rgb(255, 0, 31)');
style.setProperty('--nav-link-color', 'var(--text-color)');
style.setProperty('--nav-link-border-color', 'var(--accent-color)');
style.setProperty('--code-block-background', '#011627');
style.setProperty('--code-block-text-color', 'white');
style.setProperty('--code-block-shadow-color', '#333');
style.setProperty('--code-block-shadow-width', '0px');
style.setProperty('--highlighted-line-background', '#022a4b');
style.setProperty('--highlighted-line-border-color', '#ffa7c4');
style.setProperty('--inline-code-color', '#e6e6e6');
style.setProperty('--inline-code-background', '#373c49');
style.setProperty('--loader-primary-color', 'hsla(0, 0%, 100%, 0.08)');
style.setProperty('--loader-secondary-color', 'hsla(0, 0%, 100%, 0.18)');
style.setProperty('--table-header-background', 'var(--border-color)');
style.setProperty('--table-header-color', '#C6C6C6');
style.setProperty('--docute-select-height', '38px');
style.setProperty('--search-icon-color', '#999');
style.setProperty('--search-focus-border-color', '#999');
style.setProperty('--search-focus-icon-color', '#ccc');
style.setProperty('--search-result-background', '#27292f');
style.setProperty('--search-result-hover-background', '#1e2025');
style.setProperty('--content-link-border', '2px solid hsla(0, 0%, 100%, 0.28)');
style.setProperty('--content-link-hover-border-color', 'current-color');
style.setProperty('--blockquote-background-color', '#35363A');
style.setProperty('--blockquote-text-color', '#a5a6aa');
style.setProperty('--blockquote-border-color', '#a5a6aa');
style.setProperty('--datatable-odd-background', '#2f3136');
style.setProperty('--datatable-even-background', '#333539');
style.setProperty('--datatable-hover-background', '#35374B');
style.setProperty('--anchor-color', '#666666');
style.setProperty('--toc-border-color', '#888888');
}
`


// CSS variables
const head = document.head;
const variables_style = document.createElement("style");
variables_style.id = "downcute-css-variables";
variables_style.innerHTML = downcute_variables_default;
head.appendChild(variables_style);
set_light_style();

window.addEventListener("load", (event) => {

Expand All @@ -117,9 +113,9 @@ window.addEventListener("load", (event) => {
toggler.addEventListener("click", (event) => {
toggler.classList.toggle("checked");
if (toggler.classList.contains("checked")) {
variables_style.innerHTML = downcute_variables_dark;
set_dark_style();
} else {
variables_style.innerHTML = downcute_variables_default;
set_light_style();
}

})
Expand Down

0 comments on commit fe8ab47

Please sign in to comment.