From 9fdeb9f65135d46182bb6b2934de13c1c0de4685 Mon Sep 17 00:00:00 2001 From: kraktus Date: Wed, 3 Jul 2024 20:19:30 +0200 Subject: [PATCH] Demo: very basic light mode selector based on lila extracts `lila/ui/common/css/theme/_light.scss` ``` $c-bg: hsl(0, 0%, 100%); // alias for $c-bg-high $c-bg-page: hsl(37, 10%, 92%); $c-bg-low: hsl(0, 0%, 89%); $c-bg-zebra: hsl(37, 12%, 96.5%); $c-bg-zebra2: hsl(37, 12%, 92%); $c-bg-popup: hsl(0, 0%, 100%); // alias for $c-bg $c-body-gradient: hsl(37, 12%, 84%); $c-font: hsl(0, 0%, 30%); $c-primary: hsl(209, 77%, 46%); $c-brag: hsl(37, 74%, 48%); $c-shade: hsl(0, 0%, 84%); $c-inaccuracy: hsl(202, 78%, 40%); $c-mistake: hsl(41, 100%, 35%); $c-blunder: hsl(0, 68%, 50%); $c-good: $c-secondary; $c-brilliant: hsl(129, 71%, 30%); $c-interesting: hsl(307, 80%, 59%); $c-dimmer: #fff; $c-clearer: #000; ``` `lila/ui/common/css/component/_lichess-pgn-viewer.scss` ``` --c-lpv-accent: #{$c-primary}; --c-lpv-bg: #{$c-bg-zebra}; --c-lpv-bg-player: var(--c-lpv-bg); --c-lpv-bg-controls: var(--c-lpv-bg); --c-lpv-bg-movelist: var(--c-lpv-bg); --c-lpv-bg-variation: #{$c-bg-zebra2}; --c-lpv-bg-pane: #{$m-bg-zebra2--fade-1}; --c-lpv-pgn-text: #{$c-bg-zebra2}; --c-lpv-font: #{$c-font}; --c-lpv-font-shy: #{$c-font-dim}; --c-lpv-accent-over: #{$c-over}; --c-lpv-fbt-hover: #{$m-primary_bg--mix-75}; --c-lpv-font-bg: #{$m-font_bg--mix-20}; --c-lpv-current-move: #{$m-primary_bg--mix-70}; --c-lpv-move-hover: #{$m-primary_bg--mix-30}; --c-lpv-border: #{$c-border}; --c-lpv-side-border: hsl(37deg, 5%, 13%); //#{$c-border-page}; --c-lpv-inaccuracy: #{$c-inaccuracy}; --c-lpv-mistake: #{$c-mistake}; --c-lpv-blunder: #{$c-blunder}; --c-lpv-good-move: #{$c-good}; --c-lpv-brilliant: #{$c-brilliant}; --c-lpv-interesting: #{$c-interesting}; --c-lpv-bg-inaccuracy-hover: #{$m-inaccuracy_bg--mix-30}; --c-lpv-bg-mistake-hover: #{$m-mistake_bg--mix-30}; --c-lpv-bg-blunder-hover: #{$m-blunder_bg--mix-30}; --c-lpv-bg-good-hover: #{$m-good_bg--mix-30}; --c-lpv-bg-brilliant-hover: #{$m-brilliant_bg--mix-30}; --c-lpv-bg-interesting-hover: #{$m-interesting_bg--mix-30}; ``` --- demo/demo.js | 20 ++++++++++++++++++++ demo/index.html | 1 + demo/lichess-pgn-viewer.demo.css | 2 +- 3 files changed, 22 insertions(+), 1 deletion(-) 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;