Здесь описан процесс создания темы для браузера и дальнейшая её настройка с помощью файла userChrome.css.
В итоге получается такая тема (скин):

Активное окно Firefox с панелью поиска и неактивное окно за ним

Шаг 1 — Создание темы

Создать (сгенерировать) простенькую тему для Firefox можно на странице-генераторе для разработчиков.

1. Для начала нужно задать название темы.
2. Выбираем файл для создания Верхнего изображения темы.

Я сделал файл шириной 1 пиксель, т.к. изображение всё равно будет растянуто под нужный размер окна):

3. Настраиваем цвета

• Фон области заголовка:

  rgba(81, 92, 107, 1)

• Текст и значки в зоне заголовка:

  rgba(255, 255, 255, 1)

• Фон панели инструментов:

  rgba(151, 157, 166, 1)

• Текст и значки в зоне панели инструментов:

  rgba(255, 255, 255, 1)

• Фон зоны поля панели инструментов:

  rgba(199, 215, 234, 1)

• Текст зоны поля панели инструментов:

  rgba(0, 0, 0, 1)

4. Нажимаем кнопку Завершить тему, после чего тема будет отправлена на рассмотрение и вскоре будет доступна для всех.

Шаг 2 — Создание файла userChrome.css

Чтобы правила из userChrome.css работали, нужно включить его поддержку!

Здесь я просто помещу код файла, внутри будут комментарии к основным разделам. Единственное, что отмечу — ближе к концу файла идёт личная настройка, строчки которой можно удалить (строка 134 и далее — отключение отображения пунктов контекстного меню, изменение цвета значка BitWarden, значки папок на панели закладок, а также значки вложенных папок для папок на панели закладок):

/* set default namespace to XUL
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
*/
/* https://dentnt.trmw.ru/15441-firefox-theme-creation */

/*** Styles are mainly for the LIGHT theme ***/
:root
{
  --lwt-toolbarbutton-hover-background: #898e96;
  --toolbar-inactive-title-bg-color: #717f93;
  --toolbarbutton-border-color: #63748f;
}

/* Remove shadow from tabs text */
*
{
  text-shadow: none !important;
}

/* Bookmark toolbar panel height and text style */
#personal-bookmarks
{
  color: black !important;
  font-weight: bold;
}

/** Back-button fix **/
#back-button > .toolbarbutton-icon
{
  background: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 2px !important;
  border: 1px solid var(--toolbarbutton-border-color) !important;
  padding: 6px !important;
}

#back-button:not([disabled]):hover > .toolbarbutton-icon
{
  background: var(--lwt-toolbarbutton-hover-background) !important;
}

#reload-button > .toolbarbutton-icon,
#stop-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon
{
  border: 1px solid var(--toolbarbutton-border-color);
}

/** TABS **/
/* Hovered normal tab text color */
.tabbrowser-tab:not([visuallyselected]):hover > .tab-stack > .tab-content .tab-text
{
  color: black !important;
}

/* Active tab text color */
.tabbrowser-tab[visuallyselected]:not(:hover) > .tab-stack > .tab-content .tab-text
{
  font-weight: bold !important;
  color: black !important;
}

/* Hovered active tab text color */
.tabbrowser-tab[visuallyselected]:hover > .tab-stack > .tab-content .tab-text
{
  font-weight: bold !important;
  color: white !important;
}

/** Toolbar icons frame-color **/
toolbarbutton[removable="true"] > .toolbarbutton-badge-stack,
toolbarbutton[removable="true"]:not([type="menu"]) > .toolbarbutton-icon,
#nav-bar-overflow-button > .toolbarbutton-icon,
#PanelUI-menu-button > .toolbarbutton-badge-stack
{
  border: 1px solid var(--toolbarbutton-border-color);
  /* Fix toolbarbutton-icon size */
  width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
  height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
}
/**********/

/** Not focused (inactive) Menubar colors and text **/
menubar:-moz-window-inactive,
menubar:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme,
:root[tabsintitlebar]:-moz-window-inactive,
:root[tabsintitlebar]:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme
{
  background: var(--toolbar-inactive-title-bg-color) !important;
  color: white !important;
}
#main-menubar:-moz-window-inactive,
#toolbar-menubar:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme
{
  background: var(--toolbar-inactive-title-bg-color);
}

/** Address/URL bar **/
/* Secure connection icon background color */
#identity-box[class^="verifiedDomain"]
{
  background: rgba(0, 128, 0, 0.2);
  border-radius: 3px; /* rounded corners of the icon */
}

/* Insecure connection icon background */
#identity-box[class^="notSecure"]
{
  background: rgba(128, 0, 0, 0.2);
  border-radius: 3px; /* rounded corners of the icon */
}
/***********/

/** Set Find-bar background color to default theme color **/
.browserContainer > findbar
{
  background: var(--toolbar-bgcolor) !important;
}
/* Move Find-bar Close button to left and set background */
.findbar-closebutton
{
  order: -1 !important;
}

toolbarbutton[checked]
{
  background: rgba(0,0,0,0.6) !important;
  color: white !important;
}
/** ****************/

/** Hide Context menu items **/
#appMenu-logins-button, /* Logins and Passwords */
#fill-login, /* Fill Login */
#context-sendimage, /* Email Image... */
#context-sendpagetodevice, /* Send Page to Device */
#context-inspect, /* Inspect Element */
#context-setDesktopBackground, /* Set As Desktop Background */
#context-keywordfield, /* Add a Keyword for this Search... */
#context_closeTabsToTheEnd, /* Close Tabs To The Right */
#context_pinTab, /* Pin Tab */
#context_unpinTab, /* UnPin Tab */
#context_moveTabOptions, /* Move Tab */
#context_selectAllTabs, /* Select All Tabs */
#context_sendTabToDevice, /* Send Tab to Device */
#context-viewbgimage, /* View Background Image */
#screenshots_mozilla_org-menuitem-_create-screenshot, /* Take a screenshot */
/** Hide buttons **/
#fxa-toolbar-menu-button, /* Firefox Account button (Sync) */
#_9aa46f4f-4dc7-4c06-97af-5035170634fe_-browser-action, /* ImTranslator */
#permissions-granted-icon /* Permissions Granted Icon in address bar */
{
  display: none;
}
/************/

.toolbarbutton-icon[label="Bitwarden"] /* BitWarden icon color fix */
{
  filter: grayscale(70%);
}

/*** ICONS ***/
/** Bookmark folder icon replacement **/
/* Bookmark Folders */
.bookmark-item
{
  background: no-repeat left 15% top 60% / 12px;
}
.bookmark-item[label="[ Я ]"]
{
  background-image: url("https://ya.ru/favicon.ico");
}
.bookmark-item[label="[ G ]"]
{
  background-image: url("https://www.google.com/favicon.ico");
}

/* Bookmark Sub-Folders */
menu > .menu-iconic-left > .menu-iconic-icon
{
  background: no-repeat left 50% top 60% / 12px;
}
menu[label="[ Сбербанк ]"] > .menu-iconic-left > .menu-iconic-icon
{
  background-image: url("https://www.sberbank.ru/favicon.ico");
}
menu[label="[ mos.ru ]"] > .menu-iconic-left > .menu-iconic-icon
{
  background-image: url("https://www.mos.ru/static/images/favicon/icon76x76.png");
}
menu[label="[ DDO ]"] > .menu-iconic-left > .menu-iconic-icon
{
background-image: url("https://www.ddo.com/favicon.ico");
}
/*****************/

• Об авторе
• Недавние публикации

DenTNT

Задать вопрос в Telegram:
@dentnt.trmw.ru
Помочь проекту: Яндекс.Деньги

DenTNT недавно публиковал (посмотреть все)

• C#: Отобразить Unicode символ - 25.04.2024
• UWP: Visual Studio requires a newer version of Windows to display this content - 10.04.2024
• Воспроизводить треки подряд из всех папок в HiBy Music - 10.04.2024