diff --git a/app/templating/AssetHelper.scala b/app/templating/AssetHelper.scala
index 0d3b591282..82b0dc7112 100644
--- a/app/templating/AssetHelper.scala
+++ b/app/templating/AssetHelper.scala
@@ -7,7 +7,7 @@ import controllers.routes
trait AssetHelper {
- val assetVersion = 29
+ val assetVersion = 30
def cssTag(name: String) = css("stylesheets/" + name)
diff --git a/app/views/base/layout.scala.html b/app/views/base/layout.scala.html
index 64ffece90f..1446a9400e 100644
--- a/app/views/base/layout.scala.html
+++ b/app/views/base/layout.scala.html
@@ -13,7 +13,9 @@ moreJs: Html = Html(""))(body: Html)(implicit ctx: Context)
@isProd.fold("lichess", "[dev]") @title • @trans.freeOnlineChess()
+ @if(setting.bg == "dark") {
@cssTag("dark.css")
+ }
@cssTag("common.css")
@cssTag("board.css")
@moreCss
diff --git a/public/javascripts/big.js b/public/javascripts/big.js
index 8b963d3f80..0e0f2472c5 100644
--- a/public/javascripts/big.js
+++ b/public/javascripts/big.js
@@ -435,16 +435,14 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
$('#top .themepicker').removeClass("shown");
});
- // bgpicker
- var bgs = ["light", "dark"];
- var bg = $body.hasClass("dark") ? "dark" : "light";
-
- function invertBg(bg) {
- return bg == "dark" ? "light" : "dark";
- }
$('#top a.bgpicker').click(function() {
- bg = invertBg(bg);
- $body.removeClass(bgs.join(' ')).addClass(bg);
+ var bg = $body.hasClass("dark") ? "light" : "dark";
+ $body.removeClass('light dark').addClass(bg);
+ if (bg == 'dark' && $('link[href*="dark\.css"]').length == 0) {
+ $('link[href*="common\.css"]').clone().each(function() {
+ $(this).attr('href', $(this).attr('href').replace(/common\.css/, 'dark.css')).appendTo('head');
+ });
+ }
$.post($(this).attr('href'), {
bg: bg
});