How to make the options_ui page match the browser theme?

armin_w · April 16, 2022, 11:46am

I want to make the options page (the “preference” tab in about:addons) look less awkward when the user uses a browser theme.

My current approach is to use `@media (prefers-color-scheme: dark).

github.com

arminbw/pile/blob/7ac3e96f6e1c41ee90efc6c5883f8ca74d8905f5/src/options/options.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pile Settings</title>
    <script src="options.js"></script>
<style>
@media (prefers-color-scheme: dark) {
    html {
        height: 100%;
        background-color: #1b1a21;
    }
    body {
        height: 100%;
        background-color: #1b1a21;
        color: #fafafe;
        margin-top: 16px;
    }
    select {
        width: 180px;

This file has been truncated. show original

How do I get the correct background colors? What is considered best practice here?

Thanks!