Skip to content

Commit

Permalink
Demo: very basic light mode selector
Browse files Browse the repository at this point in the history 
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};
```
  • Loading branch information
@kraktus
kraktus committed Jul 3, 2024
1 parent 8687ec2 commit 9fdeb9f
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 1 deletion.
20 changes: 20 additions & 0 deletions demo/demo.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<title>Lichess PGN Viewer</title>
</head>
<body>
<input type="checkbox" id="light-mode-selector"> <label for="checkbox" style="color: #aaa">Light mode</label>
<div class="viewers">
<div><div></div></div>
<div><div class="previous-class"></div></div>
Expand Down
2 changes: 1 addition & 1 deletion demo/lichess-pgn-viewer.demo.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
body {
background: #161512;
background: var(--demo-bg, #161512);
font-family: 'Noto Sans';
--board-color: #886f46;
margin: 0;
Expand Down

0 comments on commit 9fdeb9f

Please sign in to comment.