diff --git a/demo/demo.js b/demo/demo.js index 73d8ce2..c706384 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -189,3 +189,23 @@ You can find the book here for an absurdly low price: https://www.amazon.com/Mam ].forEach((cfg, i) => LichessPgnViewer(document.querySelector(`.viewers > div:nth-child(${i + 1}) > div`), cfg), ); + +const lightColors = { + "--c-lpv-accent": "hsl(209, 77%, 46%)", + "--c-lpv-bg": "--c-lpv-bg", + "--c-lpv-bg-player": "--c-lpv-bg", + "--c-lpv-bg-controls": "--c-lpv-bg", + "--c-lpv-bg-movelist": "--c-lpv-bg", + "--c-lpv-bg-variation": "hsl(37, 12%, 92%)", + "--c-lpv-pgn-text": "hsl(37, 12%, 92%)", + "--c-lpv-font": "color(srgb 0.3019 0.302 0.302)", + "--c-lpv-font-bg": "color(srgb 0.8392 0.8392 0.8393)", + "--demo-bg": 'color(srgb 0.9272 0.9173 0.9047)' +} + +document.getElementById('light-mode-selector').addEventListener('change', (e) => { + Object.entries(lightColors).forEach(([key, color],_) => { + console.log(key, color); + document.documentElement.style.setProperty(key, e.target.checked ? color : "unset"); + })}); + diff --git a/demo/index.html b/demo/index.html index 856a3fe..9a9efb2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -10,6 +10,7 @@ Lichess PGN Viewer +
diff --git a/demo/lichess-pgn-viewer.demo.css b/demo/lichess-pgn-viewer.demo.css index 34ca7aa..fa902ae 100644 --- a/demo/lichess-pgn-viewer.demo.css +++ b/demo/lichess-pgn-viewer.demo.css @@ -1,5 +1,5 @@ body { - background: #161512; + background: var(--demo-bg, #161512); font-family: 'Noto Sans'; --board-color: #886f46; margin: 0; diff --git a/scss/_scrollbar.scss b/scss/_scrollbar.scss index 72642ce..ae00a4a 100644 --- a/scss/_scrollbar.scss +++ b/scss/_scrollbar.scss @@ -1,14 +1,16 @@ -body ::-webkit-scrollbar, -body ::-webkit-scrollbar-corner { - width: 0.5rem; - background: $lpv-bg; -} +.lpv { + *::-webkit-scrollbar, + *::-webkit-scrollbar-corner { + width: 0.5rem; + background: var(--c-lpv-bg, $lpv-bg); + } -body ::-webkit-scrollbar-thumb { - background: var(--c-lpv-font-bg, $lpv-font-bg); -} + *::-webkit-scrollbar-thumb { + background: var(--c-lpv-font-bg, $lpv-font-bg); + } -body ::-webkit-scrollbar-thumb:hover, -body ::-webkit-scrollbar-thumb:active { - background: $lpv-font-shy; + *::-webkit-scrollbar-thumb:hover, + *::-webkit-scrollbar-thumb:active { + background: var(--c-lpv-font-shy, $lpv-font-shy); + } } diff --git a/src/config.ts b/src/config.ts index 295dd5a..beea665 100644 --- a/src/config.ts +++ b/src/config.ts @@ -22,7 +22,7 @@ const defaults: Opts = { }, analysisBoard: { enabled: true, - } + }, }, lichess: 'https://lichess.org', // support for Lichess games, with links to the game and players. Set to false to disable. classes: undefined, // CSS classes to set on the root element. Defaults to the element classes before being replaced by LPV. diff --git a/src/interfaces.ts b/src/interfaces.ts index f9a869c..e916f38 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -98,7 +98,7 @@ export interface Opts { }; analysisBoard?: { enabled?: boolean; - } + }; }; lichess: Lichess; classes?: string;