This is a soothing, low-contrast style for Lichess.org intended for high-resolution screens of 4K and/or 24"+. Also looks good on Firefox for Android.
Serenity for Lichess.org by mrinal
Details
Authormrinal
LicenseGPL-3.0-or-later
CategoryLichess.org
Created
Updated
Size4.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Change Log
v1.0.2
- Fixed an issue where the green background would not appear below the transparent board on some pages such as blogs that already have a dark background.
- Fixed an issue where the board theme would reset to brown upon logging out of Lichess. Serenity now uses the brown board theme.
- Tweaked the color of board coordinates to be slightly darker.
✅INSTRUCTIONS
Only the Board theme applies on all backgrounds - Device theme, Light, Dark or Picture. Additionally, if you want the green background with the transparency effects on panels, then select the Picture background (ignore the picture URL).
Serenity uses the brown board theme to apply the transparent green board.
To switch to brown board or to Picture background, select the following by clicking on your profile name or the ✿ icon next to the Sign In link at the top right corner:
Board > 2D, brown (first board)
Background > Picture (ignore the URL)
In case the board, background or the panel transparencies get reset while logging in or out of Lichess, just ensure that the board is set to brown and background is set to Picture mode.
Don't forget to tweak the brightness, contrast or saturation of the pieces to your liking in the code.
Source code
/* ==UserStyle==
@name Serenity for Lichess.org 26/10/2023, 7:16:57 pm
@namespace github.com/openstyles/stylus
@version 1.0.2
@description A low contrast style for Lichess.org that's easy on the eyes for long playing sessions. Also looks good even on large screens.
@author https://lichess.org/@/mrinalkanti
==/UserStyle== */
@-moz-document domain("lichess.org") {
:root {
--bcontrast: 95%;
--bbrightness: 100%;
--wsaturate: 85%;
--wbrightness: 115%;
}
/* Black Pieces */
.is2d .black.pawn {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/game_room/300/bp.png");
filter: contrast(var(--bcontrast)) brightness(var(--bbrightness));
}
.is2d .black.knight {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/game_room/300/bn.png");
filter: contrast(var(--bcontrast)) brightness(var(--bbrightness));
}
.is2d .black.bishop {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/game_room/300/bb.png");
filter: contrast(var(--bcontrast)) brightness(var(--bbrightness));
}
.is2d .black.rook {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/game_room/300/br.png");
filter: contrast(var(--bcontrast)) brightness(var(--bbrightness));
}
.is2d .black.queen {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/game_room/300/bq.png");
filter: contrast(var(--bcontrast)) brightness(var(--bbrightness));
}
.is2d .black.king {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/game_room/300/bk.png");
filter: contrast(var(--bcontrast)) brightness(var(--bbrightness));
}
/* White Pieces */
.is2d .white.pawn {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/gothic/300/bp.png");
filter: saturate(var(--wsaturate)) brightness(var(--wbrightness));
}
.is2d .white.knight {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/gothic/300/bn.png");
filter: saturate(var(--wsaturate)) brightness(var(--wbrightness));
}
.is2d .white.bishop {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/gothic/300/bb.png");
filter: saturate(var(--wsaturate)) brightness(var(--wbrightness));
}
.is2d .white.rook {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/gothic/300/br.png");
filter: saturate(var(--wsaturate)) brightness(var(--wbrightness));
}
.is2d .white.queen {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/gothic/300/bq.png");
filter: saturate(var(--wsaturate)) brightness(var(--wbrightness));
}
.is2d .white.king {
background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/gothic/300/bk.png");
filter: saturate(var(--wsaturate)) brightness(var(--wbrightness));
}
/* Background (Make Sure to Select Picture mode) */
/*
body[data-theme="dark"],
body[data-theme="light"],
body[data-theme="system"],
body[data-theme="transp"] {
background-image: url("https://images.chesscomfiles.com/chess-themes/backgrounds/originals/large/game_room.png") !important;
}
.dark::before, .light::before, .system::before, .transp::before, .is2d::before {
background-image: url("https://images.chesscomfiles.com/chess-themes/backgrounds/originals/large/game_room.png") !important;
}
*/
.transp::before, .is2d::before {
background-image: url("https://images.chesscomfiles.com/chess-themes/backgrounds/originals/large/game_room.png") !important;
}
/* Chess Board (Brown board is the default when switching) */
body[data-board="brown"] .is2d cg-board::before {
background-image: url("https://images.chesscomfiles.com/chess-themes/boards/translucent/300.png"),
url("https://images.chesscomfiles.com/chess-themes/backgrounds/originals/large/game_room.png");
}
body[data-board="brown"] .is2d coords {
---cg-ccw: #bababa;
---cg-ccb: #6a6a6a;
---cg-cs: none
}
}