Поддержка смены цвета иконки в зависимости от темы браузера (светлая/тёмная)

[koresent]

Описание проблемы

Сейчас иконка помощника не адаптируется под тему браузера и выглядит неестественно на некоторых страницах — например, в тёмной теме она слишком яркая и выбивается из общего стиля интерфейса.

Предложенное решение

Добавить определение текущей темы браузера и автоматически менять цвет иконки на подходящий.

Альтернативные варианты

Добавить ручное изменение темы в настройках скрипта.

Преимущества

• Иконка будет визуально гармонировать со страницами.
• Повысится общий уровень интеграции и эстетики интерфейса.
• Улучшится пользовательское восприятие и UX.

Дополнительно

Ниже — пример возможного варианта иконки для тёмной темы:

[koresent]

Может быть, кому-то пригодится временное решение, пока официальной поддержки темной темы нет.

1. В исходнике скрипта AdGuard Assistant заменить
   attachShadow({mode:"closed"})
   на
   attachShadow({mode:"open"})

2. Затем добавить пользовательский скрипт, который будет инжектить стили темной темы:

// ==UserScript==
// @name         AdGuard Assistant Dark Theme Addon
// @namespace    Koresent
// @version      1.0.0
// @description  Темная тема для плавающей кнопки AdGuard Assistant.
// @author       Koresent
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    const DARK_CSS = `
.adguard-assistant-button,
.adguard-assistant-button-top.adguard-assistant-button-right,
.adguard-assistant-button-top.adguard-assistant-button-left,
.adguard-assistant-button-bottom.adguard-assistant-button-right,
.adguard-assistant-button-bottom.adguard-assistant-button-left {
    background-color: #1d2021 !important;
    color: inherit !important;
}
.adguard-alert {
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.3) !important;
}
`;

    function insertCss(root, cssText, id) {
        if (!root) return;
        let style = root.getElementById(id);
        if (style) style.textContent = cssText;
        else {
            style = document.createElement('style');
            style.id = id;
            style.textContent = cssText;
            if (root instanceof ShadowRoot) root.appendChild(style);
            else if (root.head) root.head.appendChild(style);
            else root.appendChild(style);
        }
    }

    function applyDarkTheme() {
        insertCss(document, DARK_CSS, 'adguard-theme-fix-root');
        document.querySelectorAll('*').forEach(el => {
            if (el.shadowRoot) insertCss(el.shadowRoot, DARK_CSS, 'adguard-theme-fix-shadow');
        });
    }

    function init() {
        applyDarkTheme();
        new MutationObserver(() => applyDarkTheme())
            .observe(document.documentElement, { childList: true, subtree: true });
    }

    if (document.readyState === 'loading') {
        window.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

[dmitriivqa39]

Hi @koresent,
Thanks for idea! We will think about it!