I don’t know where to put this topic 
, so I’m going to post it here 
. Recently, I was looking for a simple CSS solution to implement dark mode in BGA, but I gave up trying to patch all the little details that come up during debugging and attempting to cover the entire BGA interface—especially the tutorials 
.
Because of that, I decided to use this CSS code to create a mask over the page that prevents my eyes from bleeding due to how bright some parts of the page are
. In case this is useful for someone else, I’m leaving it here . Just copy it into the Advanced section in Preferences and uncomment the type of mask you want to use. There are comments that will guide you through the process:
/* =========================================================
BGA — Dark / Night Mask GLOBAL
Method: filter applied to the root document
========================================================= */
:root { --dark-mask: 1; } /* set to 0 to disable or 1 to enable */
/* =========================================================
BASE PROFILE (REQUIRED)
─ Do not modify: this is the core that makes it work on BGA
========================================================= */
html {
filter:
brightness(calc(1 - 0.4 * var(--dark-mask)))
contrast(calc(1 + 0.05 * var(--dark-mask)));
}
/* =========================================================
VISUAL COMPENSATION
─ Prevent images, icons, and SVGs from becoming too dark
========================================================= */
img,
svg,
video,
canvas,
i[class^="fa"],
i[class*=" icon"],
.bga-icon {
filter: brightness(calc(1 + 0.15 * var(--dark-mask))) contrast(calc(1 + 0.05 * var(--dark-mask)));
}
/* =========================================================
COLOR PROFILES
─ Enable ONLY ONE by uncommenting its block
─ Keep all others commented
========================================================= */
/* ─────────────────────────────────────────────────────────
PROFILE 1 — Neutral gray (default)
Balanced, faithful to original colors
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.4 * var(--dark-mask)))
contrast(calc(1 + 0.05 * var(--dark-mask)))
saturate(1);
}
*/
/* ─────────────────────────────────────────────────────────
PROFILE 2 — Night blue
Reduces eye strain, ideal for long sessions
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.42 * var(--dark-mask)))
contrast(calc(1 + 0.05 * var(--dark-mask)))
saturate(calc(1 + 0.1 * var(--dark-mask)))
sepia(calc(0 + 0.15 * var(--dark-mask)))
hue-rotate(calc(190deg * var(--dark-mask)));
}
*/
/* ─────────────────────────────────────────────────────────
PROFILE 3 — Amber / reading mode
Very soft, ideal for sensitive eyes
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.4 * var(--dark-mask)))
contrast(calc(1 + 0.05 * var(--dark-mask)))
sepia(calc(0 + 0.35 * var(--dark-mask)))
saturate(calc(1 + 0.1 * var(--dark-mask)))
hue-rotate(calc(-10deg * var(--dark-mask)));
}
*/
/* ─────────────────────────────────────────────────────────
PROFILE 4 — Deep dark (cave mode)
For very bright displays
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.5 * var(--dark-mask)))
contrast(calc(1 + 0.1 * var(--dark-mask)))
saturate(calc(1 - 0.1 * var(--dark-mask)));
}
*/
/* ─────────────────────────────────────────────────────────
PROFILE 5 — Minimal white reduction
Slight dimming, preserves original look
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.25 * var(--dark-mask)))
contrast(calc(1 + 0.02 * var(--dark-mask)));
}
*/
/* =========================================================
END
========================================================= */
This is my first post, so please be kind, and I hope this will be helpful to you.
P.S.: The mask doesn’t work in tutorials yet, unfortunately.
, so I’m going to post it here . Recently, I was looking for a simple CSS solution to implement dark mode in BGA, but I gave up trying to patch all the little details that come up during debugging and attempting to cover the entire BGA interface—especially the tutorials .Because of that, I decided to use this CSS code to create a mask over the page that prevents my eyes from bleeding due to how bright some parts of the page are
. In case this is useful for someone else, I’m leaving it here . Just copy it into the Advanced section in Preferences and uncomment the type of mask you want to use. There are comments that will guide you through the process:/* =========================================================
BGA — Dark / Night Mask GLOBAL
Method: filter applied to the root document
========================================================= */
:root { --dark-mask: 1; } /* set to 0 to disable or 1 to enable */
/* =========================================================
BASE PROFILE (REQUIRED)
─ Do not modify: this is the core that makes it work on BGA
========================================================= */
html {
filter:
brightness(calc(1 - 0.4 * var(--dark-mask)))
contrast(calc(1 + 0.05 * var(--dark-mask)));
}
/* =========================================================
VISUAL COMPENSATION
─ Prevent images, icons, and SVGs from becoming too dark
========================================================= */
img,
svg,
video,
canvas,
i[class^="fa"],
i[class*=" icon"],
.bga-icon {
filter: brightness(calc(1 + 0.15 * var(--dark-mask))) contrast(calc(1 + 0.05 * var(--dark-mask)));
}
/* =========================================================
COLOR PROFILES
─ Enable ONLY ONE by uncommenting its block
─ Keep all others commented
========================================================= */
/* ─────────────────────────────────────────────────────────
PROFILE 1 — Neutral gray (default)
Balanced, faithful to original colors
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.4 * var(--dark-mask)))
contrast(calc(1 + 0.05 * var(--dark-mask)))
saturate(1);
}
*/
/* ─────────────────────────────────────────────────────────
PROFILE 2 — Night blue
Reduces eye strain, ideal for long sessions
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.42 * var(--dark-mask)))
contrast(calc(1 + 0.05 * var(--dark-mask)))
saturate(calc(1 + 0.1 * var(--dark-mask)))
sepia(calc(0 + 0.15 * var(--dark-mask)))
hue-rotate(calc(190deg * var(--dark-mask)));
}
*/
/* ─────────────────────────────────────────────────────────
PROFILE 3 — Amber / reading mode
Very soft, ideal for sensitive eyes
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.4 * var(--dark-mask)))
contrast(calc(1 + 0.05 * var(--dark-mask)))
sepia(calc(0 + 0.35 * var(--dark-mask)))
saturate(calc(1 + 0.1 * var(--dark-mask)))
hue-rotate(calc(-10deg * var(--dark-mask)));
}
*/
/* ─────────────────────────────────────────────────────────
PROFILE 4 — Deep dark (cave mode)
For very bright displays
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.5 * var(--dark-mask)))
contrast(calc(1 + 0.1 * var(--dark-mask)))
saturate(calc(1 - 0.1 * var(--dark-mask)));
}
*/
/* ─────────────────────────────────────────────────────────
PROFILE 5 — Minimal white reduction
Slight dimming, preserves original look
───────────────────────────────────────────────────────── */
/*
html {
filter:
brightness(calc(1 - 0.25 * var(--dark-mask)))
contrast(calc(1 + 0.02 * var(--dark-mask)));
}
*/
/* =========================================================
END
========================================================= */
This is my first post, so please be kind, and I hope this will be helpful to you.
P.S.: The mask doesn’t work in tutorials yet, unfortunately.
