Ночная тема (расширение браузера)

[eralde]

Эта тема для тех, кому подходит текущая реализация "ночной темы" для веб-интерфейса Кинетиков в виде расширения для браузера.Расширением занимаюсь я, @eralde, в свое свободное время. Без @T@rkus до текущего состояния этот микропроект никогда бы не дошел. Спасибо!
Исходный код расширения доступен на GitHub: https://github.com/Eralde/keenetic-dark-theme-extension
Кроме (отключаемой) темной темы расширение реализует несколько дополнений к UI (также отключаемых):
- ссылка на "Системный журнал" в меню, в попапе с журналом добавлена кнопка для сохранения журнала на ПК
- ссылка на WebCLI
- фильтры устройств в Списке устройств и на странице "Клиенты Wi-Fi" для ТД/репитера.
- и др.

Расширение собирается под Google Chrome (можно поставить в Chromium/Opera/Vivalidi/...другие Chromium-based браузеры) и Firefox. Расширение распространяется в виде zip-архива для Chrome (можно установить, включив Developer mode на странице расширений) и как подписанный xpi-архив для Firefox.

Также расширение доступно в Chrome web store по прямой ссылке: https://chrome.google.com/webstore/detail/keenetic-dark-theme-exten/hggcnhagmhclapbcohbflheahnjljpeg, но версия там может быть не самой последней (code review при обновлении занимает определенное время).

Последняя версия (0.5.108, 2023-01-22):

keenetic-dark-theme-extension.v0.5.108.chrome.zip

keenetic-dark-theme-extension.v0.5.108-an+fx.xpi

Предыдущие версии:

Скрытый текст

0.5.107, 2022-09-10:

0.5.106, 2022-07-31:

 

 

 

0.5.105, 2022-05-15:

keenetic-dark-theme-extension.v0.5.105.chrome.zip

keenetic_dark_theme_extension-0.5.105-an+fx.xpi

 

0.5.104, 2022-03-29:

keenetic-dark-theme-extension.v0.5.104.chrome.zip

keenetic_dark_theme_extension-0.5.104-an+fx.xpi

 

0.5.103, 2022-03-20:

keenetic-dark-theme-extension.v0.5.103.chrome.zip

keenetic_dark_theme_extension-0.5.103-an+fx.xpi

 

0.5.101, 2022-02-13:
keenetic-dark-theme-extension.v0.5.101.chrome.zip

keenetic_dark_theme_extension-0.5.101-an+fx.xpi

 

0.5.100, 2022-01-01:

keenetic-dark-theme-extension.v0.5.100.chrome.zip

keenetic_dark_theme_extension-0.5.100-an+fx.xpi
 

0.5.99, 2021-12-31:

keenetic-dark-theme-extension.v0.5.99.chrome.zip

keenetic_dark_theme_extension-0.5.99-an+fx.xpi

 

0.5.96, 2021-08-14:
keenetic-dark-theme-extension.v0.5.96.chrome.zip

keenetic_dark_theme_extension-0.5.96-an+fx.xpi

 

0.5.95, 2021-07-29:
keenetic-dark-theme-extension.v0.5.95.chrome.zip

keenetic_dark_theme_extension-0.5.95-an+fx.xpi

 

0.5.94, 2021-06-22:
keenetic-dark-theme-extension.v0.5.94.chrome.zip

keenetic_dark_theme_extension-0.5.94-an+fx.xpi

 

0.5.93, 2021-06-16:

keenetic-dark-theme-extension.v0.5.93.chrome.zip
keenetic_dark_theme_extension-0.5.93-an+fx.xpi
 

0.5.92, 2021-06-06:

keenetic-dark-theme-extension.v0.5.92.chrome.zip

keenetic_dark_theme_extension-0.5.92-an+fx.xpi

 

 

 

О найденных ошибках можно писать здесь или мне в личные сообщения.

 

Как установить расширение в Chrome:

Скрытый текст

 

Как установить расширение в Firefox:

Скрытый текст

 

 

 

keenetic-dark-theme-extension.v0.5.98.chrome.zip keenetic-dark-theme-extension.v0.5.99.chrome.zip keenetic-dark-theme-extension.v0.5.99.chrome.zip keenetic-dark-theme-extension.v0.5.99.chrome.zip

keenetic_dark_theme_extension-0.5.101-an+fx.xpi

keenetic_dark_theme_extension-0.5.90-an+fx.xpi

[AndreBA]

50 минут назад, eralde сказал:

Версия 0.5.79 (2021-03-21):

• расширение корректно поддерживает прошивки >= 3.7 (и все следующие версии 3.x) (сообщил @AndreBA)

Спасибо! Работает с 3.7 Alpha 1

[r777ay]

1 час назад, eralde сказал:

Версия 0.5.79 (2021-03-21):

Магазин обновите пожалуйста.

Ждемс, Спасибо.

Edited March 21, 2021 by r777ay

[AndreBA]

@eraldeВсплывающая подсказка "расписание работы" не раскрашена в "ночной теме".

Скрытый текст

Версия О С3.7 Alpha 3. Версия 0.5.79

Edited March 26, 2021 by AndreBA

[eralde]

Версия 0.5.80 (2021-03-28):

• всплывающая подсказка выпадающего меню с расписаниями стилизовна под темную тему (сообщил @AndreBA) 
  Скрытый текст

  

   

[AndreBA]

Спасибо!

Скрытый текст

 

[XCanG]

Есть такое расширение Stylus, в котором на любые сайты можно написать свой стиль, в нём можно очень легко сделать тёмную тему.
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
https://addons.mozilla.org/ru/firefox/addon/styl-us/

Вот видео с примером как выглядит: https://files.catbox.moe/x4ieva.mp4 Для наглядности я добавил анимацию по всем цветам радуги (ниже в коде её нету) и показал как изменение параметров влияет на результат.

Вообще этот стиль уникален и подходит любому сайту, кроме третьего блока ".ndm-menu" - это левое меню которое уже тёмное.

Для вставки надо открыть страницу с менеджером, создать новый стиль и воспользоваться кнопкой импортирования стиля, который надо скопировать ниже.

Также советую его подредактировать.

• invert от 0 до 1 - инвертирует цвета. Также с его помощью можно сделать неярко выраженный чёрный фон, если инвертировать лишь на 0.9 или любое другое дробное после 0.5. Само по себе инвертирование также инвертирует цвета, поэтому понадобится второй параметр для их восстановления или изменения под новую тему.
• hue-rotate может быть любым, но реально только 360 градусов, так что ±360. Обратите внимание что для второго блока надо поставить ровно наоборот, чтобы цвета картинок или видео сохранялись.
• brightness от 0 до бесконечности - яркость, если надо подправить
• saturation от 0 до бесконечности - насыщенность цветов, к примеру если установить в 0,, то все цвета станут серыми оттенками.
• есть и другие, но они врядли понадобятся. 

@-moz-document domain("192.168.1.1") {
html {
	filter: invert(1) hue-rotate(0deg); /* Настраивайте эти числа */
}
img, video {
	filter: invert(1) hue-rotate(-0deg); /* Здесь для сохранения цветов надо поставить обратное значение */
}
.ndm-menu {
	filter: invert(1) hue-rotate(-180deg);
}

}

К примеру для любителей сероватых тем неплохими параметрами будет 0.9 и 180deg

[plagioklaz]

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

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

Возможный пример реализации на картинке.

 

[eralde]

В 05.04.2021 в 06:55, plagioklaz сказал:

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

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

Возможный пример реализации на картинке.

Мне кажется, что это лишнее, потому что все эти пункты есть в боковом меню. Но я подумаю, может быть это не потребует слишком большого количества костылей в дашборде.

[eralde]

В 02.04.2021 в 21:51, XCanG сказал:

Есть такое расширение Stylus, в котором на любые сайты можно написать свой стиль, в нём можно очень легко сделать тёмную тему.
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
https://addons.mozilla.org/ru/firefox/addon/styl-us/
 

Я знаю, что так можно сделать, но мы с исходным заказчиком расширения (@T@rkus) не смогли подобрать вариант на основе общего фильтра. Он, конечно, гораздо проще в поддержке.

А вот остальные вещи (новые ссылки в меню, фильтры устройств) через Stylus не сделать.

[AndreBA]

@eralde Версия ОС 3.7 Alpha 6, версия расширения 0.5.80.

В разделе "Монитор трафика" стал плохо читаем текст:

Скрытый текст

 

[AndreBA]

В разделе "Traffic Analyzer", тоже плохо читается:

Скрытый текст

 

[eralde]

Версия 0.5.81 (2021-05-03):

• исправлен стиль легенды на странице "Монитор трафика" (сообщил @AndreBA)
• исправлен стиль страницы "Анализатор трафика приложений" (сообщил @AndreBA)

[AndreBA]

Спасибо! Исправлено:

Скрытый текст

 

[KYTECHNGAMING]

Thank u so much for update.

 

[AndreBA]

@eralde Если установлено расширение, то в разделе "Другие подключения" - "Параметры VPN-подключения"(возможно и в других) - в окошке "Конфигурация OpenVPN" не возможно перемещать "ползунок". Без расширения все нормально.

Скрытый текст

2021-05-05 17-50-31.mkv

 

[eralde]

Версия 0.5.84 (2021-05-10):

• исправлен курсор для элементов textarea (сообщил @AndreBA)
• добавлены переводы строк из расширения на турецкий язык (помог @yerebakan)
• "Диагностика": на вкладку с диагностикой DSL-подключения добавлен вывод счетчиков ошибок FEC/CRC/HEC (предложил @yerebakan)
• в меню добавлена ссылка для перехода на вкладку с диагносткой DSL (только для DSL-устройств)

0.5.84 (10 May 2021):

• fixed cursor for textarea elements (reported by @AndreBA)
• added Turkish localization (provided by @yerebakan)
• "Diagnostics": added FEC/CRC/HEC error counters for DSL connections (suggested by @yerebakan)
• added menu link to the DSL diagnostics info tab (only for models with built-in DSL modem)

[KYTECHNGAMING]

Thank u for best efforts for Turkish users.

 

 

[KYTECHNGAMING]

22 minutes ago, yerebakan said:

Thank u for best efforts for Turkish users.

 

 

Posted on https://dar.vin/o2hXK (Turkish forum)

[AndreBA]

9 часов назад, eralde сказал:

Версия 0.5.84 (2021-05-10):

• исправлен курсор для элементов textarea (сообщил @AndreBA)

Спасибо! Исправлено! 

[eralde]

Версия 0.5.85 (2021-05-12):

• "Другие подключения": добавлена таблица IPIP/GRE/EoIP интерфейсов (в текущей версии -- без редактора; в отладке очень помог @Ranger)

 

0.5.85 (12 May 2021):

• "Other connections": Added EoIP/IP/GRE connections table (@Ranger helped a lot with debugging)

[eralde]

Версия 0.5.86 (2021-05-16):

• "Другие подключения": добавлен редактор для IPIP/GRE/EoIP интерфейсов

 

0.5.86 (16 May 2021):

• "Other connections": Added editor for IPIP/GRE/EoIP interfaces

[eralde]

В 0.5.86, к сожалению, редактор IPIP/GRE/EoIP не работает.

[eralde]

Версия 0.5.87 (2021-05-17):

• "Другие подключения": добавлен редактор для IPIP/GRE/EoIP интерфейсов

 

0.5.87 (17 May 2021):

• "Other connections": Added editor for IPIP/GRE/EoIP interfaces

[AndreBA]

В 17.05.2021 в 12:55, eralde сказал:

Версия 0.5.87 (2021-05-17):

• "Другие подключения": добавлен редактор для IPIP/GRE/EoIP интерфейсов

В этом разделе есть небольшой недоперевод:

Скрытый текст

 

[AndreBA]

@eralde Можно ли в разделе "Общие настройки системы" отображение  по "Сетевые разъемы" сделать как и в "Системном мониторе"?

Скрытый текст

Здесь:

 

Как здесь:

 

[eralde]

В 22.05.2021 в 10:09, AndreBA сказал:

@eralde Можно ли в разделе "Общие настройки системы" отображение  по "Сетевые разъемы" сделать как и в "Системном мониторе"?

 

Интересное предложение, надо подумать. И "редактор" этого сделать более человеческий.

[AndreBA]

@eralde Новый раздел "IntelliQoS 2.0". Не подстроен под "ночная тема":

Скрытый текст

 

[eralde]

Версия 0.5.89 (2021-06-05):

• "Другие подключения": В редактор для IPIP/GRE/EoIP интерфейсов добавлены зависимости от компонентов прошивки (сообщил @Ranger)
• "Другие подключения": Исправлен перевод в редакторе для IPIP/GRE/EoIP интерфейсов (сообщили @Ranger и @AndreBA)
• В расширение добавлены стили для новой страницы "IntelliQoS 2.0" (сообщил @AndreBA)
• На странице "Общие настройки", в разделе "Сетевые разъемы", выводятся дополнительные данные аналогично дашборду (предложил @AndreBA)
• На странице настройки расширения добавлен более удобный редактор шаблона с дополнительными данными по портам
   

 

0.5.89 (5 June 2021):

• "Other Connections: IPIP/GRE/EoIP interfaces editor: added firmware component dependencies (reported by @Ranger)
• "Other Connections: IPIP/GRE/EoIP interfaces editor: fixed missing translation (reported by @Ranger & @AndreBA)
• Added styles for the new "IntelliQoS 2.0" page to the extension (reported by @AndreBA)
• On the "General Settings" page, the "Network ports" section displays additional data similar to the dashboard (suggested by @AndreBA)
• On the extension settings page, added a more convenient template editor for the additional network ports data

Редактор шаблона / template editor:

[eralde]

Комментарии к работе редактора шаблона в 0.5.89:

• Шаблоны, отредактированные вручную в предыдущих версиях, использовать не получится
• Если в шаблон по умолчанию внесены любые изменения -- внутри иконки порта будет отображаться его номер, а не описание; используйте блок "Description" для вывода описания
• Если что-то не работает -- попробуйте сбросить все данные (кнопка 'Clear extension storage' на странице настроек) и настроить заново

Comments on the template editor in 0.5.89:

• Templates edited manually in previous versions cannot be used
• If any changes are made to the default template -- port number will be displayed inside the port icon, not the description; use the "Description" block to display the description
• If something doesn't work -- try to reset the extension data (the 'Clear extension storage' button on the options page) and reconfigure the template

[AndreBA]

33 минуты назад, eralde сказал:

Комментарии к работе редактора шаблона в 0.5.89:

 

• Если в шаблон по умолчанию внесены любые изменения -- внутри иконки порта будет отображаться его номер, а не описание; используйте блок "Description" для вывода описания

Можно по подробнее?

У меня, что то не получается отобразить как было тут:

Скрытый текст

Получается только так:

Скрытый текст