From 609d205fb404b0f6ed79f60cf35f80748a3dc9fb Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 11 Sep 2024 20:47:58 +0900
Subject: [PATCH] Improvement of Look & Feel in Preferences

---
 .../content/preferences-theme.xhtml           | 723 ++++++++++--------
 .../components/preferences/content/theme.js   | 320 +++++---
 waterfox/browser/locales                      |   2 +-
 3 files changed, 594 insertions(+), 451 deletions(-)

diff --git a/waterfox/browser/components/preferences/content/preferences-theme.xhtml b/waterfox/browser/components/preferences/content/preferences-theme.xhtml
index 313c6ecdfd977..56b0831e7f70e 100644
--- a/waterfox/browser/components/preferences/content/preferences-theme.xhtml
+++ b/waterfox/browser/components/preferences/content/preferences-theme.xhtml
@@ -22,391 +22,464 @@
 
 <html:template id="template-paneTheme">
     <hbox id="firefoxThemeCategory" class="subcategory" hidden="true" data-category="paneTheme">
-        <html:h1 style="-moz-box-flex: 1;" data-l10n-id="pane-theme-title" />
+        <!-- Theme -->
+        <html:h1 data-l10n-id="theme-header" />
     </hbox>
-
     <groupbox id="themeGroup" data-category="paneTheme" hidden="true">
-        <!-- <checkbox id="enableWaterfoxTheme" preference="userChrome.theme.enable" data-l10n-id="enable-waterfox-theme" /> -->
-        <hbox>
-            <menulist id="enableWaterfoxTheme" preference="browser.theme.enableWaterfoxCustomizations">
-                <menupopup>
-                    <menuitem data-l10n-id="enable-waterfox-theme-0" value="0" />
-                    <menuitem data-l10n-id="enable-waterfox-theme-1" value="1" />
-                    <menuitem data-l10n-id="enable-waterfox-theme-2" value="2" />
-                </menupopup>
-            </menulist>
-        </hbox>
         <hbox>
             <vbox id="waterfoxUserChromeCustomizations">
-                <!-- Tab Bar -->
-                <label>
-                    <html:h2 data-l10n-id="tab-bar-header" />
-                </label>
-                <hbox>
-                    <checkbox id="autoHideTabs" preference="userChrome.autohide.tab" data-l10n-id="auto-hide-tabs" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideTabsImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <vbox class="indent">
-                    <hbox>
-                        <checkbox id="autoBlurTabs" preference="userChrome.autohide.tab.blur"
-                            data-l10n-id="auto-blur-tabs" />
-
-                        <div class="popup-container">
-                            <img class="preferences-info-button" />
-                            <img id="autoBlurTabsImage" class="info-popup" />
-                        </div>
-                    </hbox>
-                </vbox>
-
-                <checkbox id="autoHideTabBar" preference="userChrome.autohide.tabbar" data-l10n-id="auto-hide-tabbar" />
-
+                <!-- <checkbox id="enableWaterfoxTheme" preference="userChrome.theme.enable" data-l10n-id="enable-waterfox-theme" /> -->
                 <hbox>
-                    <checkbox id="centerTabContent" preference="userChrome.centered.tab"
-                        data-l10n-id="center-tab-content" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerTabContentImage" class="info-popup" />
-                    </div>
+                    <menulist id="enableWaterfoxTheme" preference="browser.theme.enableWaterfoxCustomizations">
+                        <menupopup>
+                            <menuitem data-l10n-id="enable-waterfox-theme-0" value="0" />
+                            <menuitem data-l10n-id="enable-waterfox-theme-1" value="1" />
+                            <menuitem data-l10n-id="enable-waterfox-theme-2" value="2" />
+                        </menupopup>
+                    </menulist>
                 </hbox>
-
-                <vbox class="indent">
-                    <hbox>
-                        <checkbox id="centerTabLabel" preference="userChrome.centered.tab.label"
-                            data-l10n-id="center-tab-label" />
-
-                        <div class="popup-container">
-                            <img class="preferences-info-button" />
-                            <img id="centerTabLabelImage" class="info-popup" />
-                        </div>
-                    </hbox>
+            </vbox>
+            <vbox id="waterfoxUserChromePresetsWrapper" style="height: 0; z-index: 1;">
+                <vbox id="waterfoxUserChromePresets">
+                    <html:h2 style="-moz-box-flex: 1;" class="presets-header" data-l10n-id="preset-title" />
+                    <button id="waterfoxDefaults" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="waterfox-defaults" />
+                    <button id="leptonStyle" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="lepton-style" />
+                    <button id="protonStyle" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="proton-style" />
                 </vbox>
+            </vbox>
+        </hbox>
+    </groupbox>
+    <groupbox id="themeGroup" data-category="paneTheme" hidden="true">
+        <label>
+            <!-- Appearance -->
+            <html:h2 data-l10n-id="appearance-header" />
+        </label>
 
-                <hbox>
-                    <checkbox id="squareTabCorners" preference="userChrome.tab.squareTabCorners"
-                        data-l10n-id="square-tab-edges" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareTabEdgesImage" class="info-popup" />
-                    </div>
-                </hbox>
-                <hbox>
-                    <checkbox id="tabContextLine" preference="userChrome.tab.photon_like_contextline"
-                        data-l10n-id="tab-context-line" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="contextLineImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-
-                <hbox>
-                    <checkbox id="dragSpace" preference="userChrome.padding.drag_space" data-l10n-id="drag-space" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="dragSpaceImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="closeButtonHover" preference="userChrome.tab.close_button_at_hover"
-                        data-l10n-id="close-button-hover" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="closeButtonHoverImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- Nav Bar -->
-                <label>
-                    <html:h2 data-l10n-id="nav-bar-header" />
-                </label>
-
-                <hbox>
-                    <checkbox id="autoHideBack" preference="userChrome.autohide.back_button"
-                        data-l10n-id="auto-hide-back" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideBackImage" class="info-popup" />
-                    </div>
-                </hbox>
+        <hbox>
+            <menulist id="accentColor">
+                <menupopup>
+                    <menuitem data-l10n-id="enable-default-accent-color" value="0" />
+                    <menuitem data-l10n-id="enable-cyan-accent-color" value="1" />
+                    <menuitem data-l10n-id="enable-system-accent-color" value="2" />
+                </menupopup>
+            </menulist>
+        </hbox>
 
-                <hbox>
-                    <checkbox id="autoHideForward" preference="userChrome.autohide.forward_button"
-                        data-l10n-id="auto-hide-forward" />
+        <checkbox id="enablePanelTransparency" preference="userChrome.theme.transparent.panel"
+        data-l10n-id="enable-panel-transparency" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideForwardImage" class="info-popup" />
-                    </div>
-                </hbox>
+        <checkbox id="enableMenuTransparency" preference="userChrome.theme.transparent.menu"
+        data-l10n-id="enable-menu-transparency" />
+    </groupbox>
+    <groupbox id="themeIconGroup"  data-category="paneTheme" hidden="true">
+        <!-- Icons -->
+        <label>
+            <html:h2 data-l10n-id="icons-header" />
+        </label>
+        <checkbox id="hideAllIcons" preference="userChrome.icon.disabled" data-l10n-id="hide-all-icons" />
+        <checkbox id="hideTabIcons" preference="userChrome.hidden.tab_icon" data-l10n-id="hide-tab-icons" />
+        <!-- <checkbox id="showMenuIcons" preference="userChrome.icon.menu.full" data-l10n-id="show-menu-icons" /> This does not do what one would expect, i.e. show/remove all icons -->
+#ifdef XP_MACOSX
+        <hbox>
+            <checkbox id="showMacMenuIcons" preference="userChrome.icon.global_menu.mac"
+                data-l10n-id="show-mac-menu-icons" />
 
-                <checkbox id="autoHidePageAction" preference="userChrome.autohide.page_action"
-                    data-l10n-id="auto-hide-pageaction" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="showMacMenuIconsImage" class="info-popup" />
+            </div>
+        </hbox>
+#endif
+    </groupbox>
+    <groupbox id="themeFontGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="font-header" />
+        </label>
 
-                <hbox>
-                    <checkbox id="hideNavBarIconBox" preference="userChrome.hidden.urlbar_iconbox"
-                        data-l10n-id="hide-urlbar-iconbox" />
+        <hbox>
+            <checkbox id="monospaceFont" preference="userContent.page.monospace"
+                data-l10n-id="monospace-font" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideNavBarIconBoxImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="monospaceFontImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                <hbox>
-                    <checkbox id="centerNavBarText" preference="userChrome.centered.urlbar"
-                        data-l10n-id="center-navbar-text" />
+        <hbox>
+            <checkbox id="monospaceFontTheme" preference="userChrome.theme.monospace"
+                data-l10n-id="monospace-font-theme" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerNavBarTextImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="monospaceFontThemeImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="themeAnimationGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <!-- Animation-->
+            <html:h2 data-l10n-id="animation-header" />
+        </label>
+
+        <!-- Panels -->
+        <checkbox id="disablePanelAnimate" preference="userChrome.decoration.disable_panel_animate"
+            data-l10n-id="disable-panel-animate" />
+
+        <!-- Sidebar -->
+        <checkbox id="disableSidebarAnimate" preference="userChrome.decoration.disable_sidebar_animate"
+            data-l10n-id="disable-sidebar-animate" />
+    </groupbox>
 
-                <hbox>
-                    <checkbox id="squareButtonEdges" preference="userChrome.rounding.square_button"
-                        data-l10n-id="square-button-edges" />
+   
+    <hbox id="firefoxInterfaceComponentCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Interface Components -->
+        <html:h1 data-l10n-id="interface-component-header"/>
+    </hbox>
+    <groupbox id="tabbarComponentGroup"  data-category="paneTheme" hidden="true">
+        <!-- Tab Bar -->  
+        <label>
+            <html:h2 data-l10n-id="tab-bar-header" />
+        </label>
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareButtonEdgesImage" class="info-popup" />
-                    </div>
-                </hbox>
+        <hbox>
+            <checkbox id="tabContextLine" preference="userChrome.tab.photon_like_contextline"
+                data-l10n-id="tab-context-line" />
 
-                <checkbox id="compactNavBarPopup" preference="userChrome.padding.urlView_expanding"
-                    data-l10n-id="compact-navbar-popup" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="contextLineImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                <!-- Bookmarks Bar -->
-                <label>
-                    <html:h2 data-l10n-id="bookmark-header" />
-                </label>
+        <hbox>
+            <checkbox id="dragSpace" preference="userChrome.padding.drag_space" data-l10n-id="drag-space" />
 
-                <checkbox id="autoHideBookmarkBar" preference="userChrome.autohide.bookmarkbar"
-                    data-l10n-id="auto-hide-bookmarkbar" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="dragSpaceImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                <hbox>
-                    <checkbox id="hideBookmbarkBarIcon" preference="userChrome.hidden.bookmarkbar_icon"
-                        data-l10n-id="hide-bookmarkbar-icon" />
+        <hbox>
+            <checkbox id="closeButtonHover" preference="userChrome.tab.close_button_at_hover"
+                data-l10n-id="close-button-hover" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideBookmbarkBarIconImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="closeButtonHoverImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="navbarComponentGroup"  data-category="paneTheme" hidden="true">
+        <!-- Nav Bar -->
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+
+        <checkbox id="compactNavBarPopup" preference="userChrome.padding.urlView_expanding"
+            data-l10n-id="compact-navbar-popup" />
+        
+        <!-- Full Screen -->
+        <!-- <label>
+            <html:h2 data-l10n-id="full-screen-header" />
+        </label> -->
+    </groupbox>
+    <groupbox id="pannelComponentGroup"  data-category="paneTheme" hidden="true">
+        <!-- Panels -->
+        <label>
+            <html:h2 data-l10n-id="panels-header" />
+        </label>
+
+        <checkbox id="compactContextMenu" preference="userChrome.padding.menu_compact"
+            data-l10n-id="compact-context-menu" />
+        <checkbox id="compactBookmarkMenu" preference="userChrome.padding.bookmark_menu.compact"
+            data-l10n-id="compact-bookmark-menu" />
+        <checkbox id="compactPanelHeader" preference="userChrome.padding.panel_header"
+            data-l10n-id="compact-panel-header" />
 
-                <hbox>
-                    <checkbox id="hideBookmarkBarLabel" preference="userChrome.hidden.bookmarkbar_label"
-                        data-l10n-id="hide-bookmarkbar-label" />
+        <hbox>
+            <checkbox id="removePanelStrip" preference="userChrome.panel.remove_strip"
+                data-l10n-id="remove-panel-strip" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideBookmarkBarLabelImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="removePanelStripImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                <!-- Font -->
-                <label>
-                    <html:h2 data-l10n-id="font-header" />
-                </label>
+        <hbox>
+            <checkbox id="fullPanelStrip" preference="userChrome.panel.full_width_separator"
+                data-l10n-id="full-panel-strip" />
 
-                <hbox>
-                    <checkbox id="monospaceFont" preference="userContent.page.monospace"
-                        data-l10n-id="monospace-font" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="fullPanelStripImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="monospaceFontImage" class="info-popup" />
-                    </div>
-                </hbox>
+    <hbox id="firefoxRoundingCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Rounding -->
+        <html:h1 data-l10n-id="rounding-header"/>
+    </hbox>
+    <groupbox id="roundingTabbarGroup"  data-category="paneTheme" hidden="true">
+        <hbox>
+            <checkbox id="squareTabCorners" preference="userChrome.tab.squareTabCorners"
+                data-l10n-id="square-tab-edges" />
 
-                <hbox>
-                    <checkbox id="monospaceFontTheme" preference="userChrome.theme.monospace"
-                        data-l10n-id="monospace-font-theme" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareTabEdgesImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="roundingNavbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+        <hbox>
+            <checkbox id="squareButtonEdges" preference="userChrome.rounding.square_button"
+                data-l10n-id="square-button-edges" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="monospaceFontThemeImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareButtonEdgesImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="roundingPannelGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="panels-header" />
+        </label>
 
-                <!-- Full Screen -->
-                <!-- <label>
-                    <html:h2 data-l10n-id="full-screen-header" />
-                </label> -->
+        <hbox>
+            <checkbox id="squareMenuPanel" preference="userChrome.rounding.square_panel"
+                data-l10n-id="square-menu-panel" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareMenuPanelImage" class="info-popup" />
+            </div>
+        </hbox>
+        <checkbox id="squarePanelItem" preference="userChrome.rounding.square_panelitem"
+            data-l10n-id="square-panel-item" />
 
-                <!-- Panels -->
-                <label>
-                    <html:h2 data-l10n-id="panels-header" />
-                </label>
+        <!-- MacOS uses native context menus, so we cannot modify them with userChrome. Moz listed allowing this as a WONTFIX. -->
+#ifndef XP_MACOSX
+        <hbox>
+            <checkbox id="squareMenuPopup" preference="userChrome.rounding.square_menupopup"
+                data-l10n-id="square-menu-popup" />
 
 
-                <checkbox id="enablePanelTransparency" preference="userChrome.theme.transparent.panel"
-                data-l10n-id="enable-panel-transparency" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareMenuPopupImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                <checkbox id="enableMenuTransparency" preference="userChrome.theme.transparent.menu"
-                data-l10n-id="enable-menu-transparency" />
+        <checkbox id="squareMenuItem" preference="userChrome.rounding.square_menuitem"
+            data-l10n-id="square-menu-item" />
+#endif
 
-                <checkbox id="disablePanelAnimate" preference="userChrome.decoration.disable_panel_animate"
-                    data-l10n-id="disable-panel-animate" />
+        <hbox>
+            <checkbox id="squareField" preference="userChrome.rounding.square_field"
+                data-l10n-id="square-field" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareFieldImage" class="info-popup" />
+            </div>
+        </hbox>
+        <checkbox id="squareCheckbox" preference="userChrome.rounding.square_checklabel"
+            data-l10n-id="square-checkbox" />
+    </groupbox>
+    
+    
+    <hbox id="firefoxAutohideCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Auto Hide & Hidden -->
+        <html:h1 data-l10n-id="autohide-hidden-header"/>
+    </hbox>
+    <groupbox id="autohideTabbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="tab-bar-header" />
+        </label>
+        
+        <hbox>
+            <checkbox id="autoHideTabs" preference="userChrome.autohide.tab" data-l10n-id="auto-hide-tabs" />
 
-                <hbox>
-                    <checkbox id="hideDisabledMenuItems" preference="userChrome.hidden.disabled_menu"
-                        data-l10n-id="hide-disabled-menuitems" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideTabsImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideDisabledMenuItemsImage" class="info-popup" />
-                    </div>
-                </hbox>
+        <vbox class="indent">
+            <hbox>
+                <checkbox id="autoBlurTabs" preference="userChrome.autohide.tab.blur"
+                    data-l10n-id="auto-blur-tabs" />
 
-                <hbox>
-                    <vbox>
-                        <checkbox id="squareMenuPanel" preference="userChrome.rounding.square_panel"
-                            data-l10n-id="square-menu-panel" />
-                        <checkbox id="squarePanelItem" preference="userChrome.rounding.square_panelitem"
-                            data-l10n-id="square-panel-item" />
-                    </vbox>
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareMenuPanelImage" class="info-popup" />
-                    </div>
-                </hbox>
+                <div class="popup-container">
+                    <img class="preferences-info-button" />
+                    <img id="autoBlurTabsImage" class="info-popup" />
+                </div>
+            </hbox>
+        </vbox>
 
-                <!-- MacOS uses native context menus, so we cannot modify them with userChrome. Moz listed allowing this as a WONTFIX. -->
-#ifndef XP_MACOSX
-                <hbox>
-                    <checkbox id="squareMenuPopup" preference="userChrome.rounding.square_menupopup"
-                        data-l10n-id="square-menu-popup" />
+        <checkbox id="autoHideTabBar" preference="userChrome.autohide.tabbar" data-l10n-id="auto-hide-tabbar" />
+    </groupbox>
+    <groupbox id="autohideNavbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
 
+        <hbox>
+            <checkbox id="autoHideBack" preference="userChrome.autohide.back_button"
+                data-l10n-id="auto-hide-back" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareMenuPopupImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideBackImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                <checkbox id="squareMenuItem" preference="userChrome.rounding.square_menuitem"
-                    data-l10n-id="square-menu-item" />
-#endif
+        <hbox>
+            <checkbox id="autoHideForward" preference="userChrome.autohide.forward_button"
+                data-l10n-id="auto-hide-forward" />
 
-                <hbox>
-                    <vbox>
-                        <checkbox id="squareField" preference="userChrome.rounding.square_field"
-                            data-l10n-id="square-field" />
-                        <checkbox id="squareCheckbox" preference="userChrome.rounding.square_checklabel"
-                            data-l10n-id="square-checkbox" />
-                    </vbox>
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareFieldImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideForwardImage" class="info-popup" />
+            </div>
+        </hbox>
 
+        <checkbox id="autoHidePageAction" preference="userChrome.autohide.page_action"
+            data-l10n-id="auto-hide-pageaction" />
 
-                <checkbox id="compactContextMenu" preference="userChrome.padding.menu_compact"
-                    data-l10n-id="compact-context-menu" />
-                <checkbox id="compactBookmarkMenu" preference="userChrome.padding.bookmark_menu.compact"
-                    data-l10n-id="compact-bookmark-menu" />
-                <checkbox id="compactPanelHeader" preference="userChrome.padding.panel_header"
-                    data-l10n-id="compact-panel-header" />
+        <hbox>
+            <checkbox id="hideNavBarIconBox" preference="userChrome.hidden.urlbar_iconbox"
+                data-l10n-id="hide-urlbar-iconbox" />
 
-                <hbox>
-                    <checkbox id="removePanelStrip" preference="userChrome.panel.remove_strip"
-                        data-l10n-id="remove-panel-strip" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideNavBarIconBoxImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohideBookmarkbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="bookmark-header" />
+        </label>
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="removePanelStripImage" class="info-popup" />
-                    </div>
-                </hbox>
+        <checkbox id="autoHideBookmarkBar" preference="userChrome.autohide.bookmarkbar"
+            data-l10n-id="auto-hide-bookmarkbar" />
 
-                <hbox>
-                    <checkbox id="fullPanelStrip" preference="userChrome.panel.full_width_separator"
-                        data-l10n-id="full-panel-strip" />
+        <hbox>
+            <checkbox id="hideBookmbarkBarIcon" preference="userChrome.hidden.bookmarkbar_icon"
+                data-l10n-id="hide-bookmarkbar-icon" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="fullPanelStripImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideBookmbarkBarIconImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                <!-- Sidebar -->
-                <label>
-                    <html:h2 data-l10n-id="sidebar-header" />
-                </label>
+        <hbox>
+            <checkbox id="hideBookmarkBarLabel" preference="userChrome.hidden.bookmarkbar_label"
+                data-l10n-id="hide-bookmarkbar-label" />
 
-                <checkbox id="disableSidebarAnimate" preference="userChrome.decoration.disable_sidebar_animate"
-                    data-l10n-id="disable-sidebar-animate" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideBookmarkBarLabelImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohidePannelGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="panels-header" />
+        </label>
 
-                <hbox>
-                    <checkbox id="autoHideSidebar" preference="userChrome.autohide.sidebar"
-                        data-l10n-id="auto-hide-sidebar" />
+        <hbox>
+            <checkbox id="hideDisabledMenuItems" preference="userChrome.hidden.disabled_menu"
+                data-l10n-id="hide-disabled-menuitems" />
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideSidebarImage" class="info-popup" />
-                    </div>
-                </hbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideDisabledMenuItemsImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohideSidebarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="sidebar-header" />
+        </label>
+        
+        <hbox>
+            <checkbox id="autoHideSidebar" preference="userChrome.autohide.sidebar"
+                data-l10n-id="auto-hide-sidebar" />
 
-                <hbox>
-                    <checkbox id="hideSidebarHeader" preference="userChrome.hidden.sidebar_header"
-                        data-l10n-id="hide-sidebar-header" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideSidebarImage" class="info-popup" />
+            </div>
+        </hbox>
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideSidebarHeaderImage" class="info-popup" />
-                    </div>
-                </hbox>
+        <hbox>
+            <checkbox id="hideSidebarHeader" preference="userChrome.hidden.sidebar_header"
+                data-l10n-id="hide-sidebar-header" />
 
-                <!-- Icons -->
-                <label>
-                    <html:h2 data-l10n-id="icons-header" />
-                </label>
-                <checkbox id="hideAllIcons" preference="userChrome.icon.disabled" data-l10n-id="hide-all-icons" />
-                <checkbox id="hideTabIcons" preference="userChrome.hidden.tab_icon" data-l10n-id="hide-tab-icons" />
-                <!-- <checkbox id="showMenuIcons" preference="userChrome.icon.menu.full" data-l10n-id="show-menu-icons" /> This does not do what one would expect, i.e. show/remove all icons -->
-#ifdef XP_MACOSX
-                <hbox>
-                    <checkbox id="showMacMenuIcons" preference="userChrome.icon.global_menu.mac"
-                        data-l10n-id="show-mac-menu-icons" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideSidebarHeaderImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
 
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="showMacMenuIconsImage" class="info-popup" />
-                    </div>
-                </hbox>
-#endif
+    <hbox id="firefoxCenterCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Center -->
+        <html:h1 data-l10n-id="center-header"/>
+    </hbox>
+    <groupbox id="centerTabbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="tab-bar-header" />
+        </label>
+        
+        <hbox>
+            <checkbox id="centerTabContent" preference="userChrome.centered.tab"
+                data-l10n-id="center-tab-content" />
 
-            </vbox>
-            <vbox id="waterfoxUserChromePresets">
-                <html:h2 style="-moz-box-flex: 1;" class="presets-header" data-l10n-id="preset-title" />
-                <button id="waterfoxDefaults" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="waterfox-defaults" />
-                <button id="roundedCorners" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="rounded-corners"
-                    data-l10n-args="{&quot;isRounded&quot;:true}" />
-                <button id="autohideElements" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="autohide-all"
-                    data-l10n-args="{&quot;isAutohide&quot;:true}" />
-                <button id="centerElements" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="center-all"
-                    data-l10n-args="{&quot;isCentered&quot;:true}" />
-                <button id="padElements" is="highlightable-button" class="themepage-button check-theme-page-controlled"
-                    data-l10n-id="reduce-padding" data-l10n-args="{&quot;isPadded&quot;:true}" />
-            </vbox>
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="centerTabContentImage" class="info-popup" />
+            </div>
         </hbox>
 
+        <vbox class="indent">
+            <hbox>
+                <checkbox id="centerTabLabel" preference="userChrome.centered.tab.label"
+                    data-l10n-id="center-tab-label" />
+
+                <div class="popup-container">
+                    <img class="preferences-info-button" />
+                    <img id="centerTabLabelImage" class="info-popup" />
+                </div>
+            </hbox>
+        </vbox>
+    </groupbox>
+    <groupbox id="centerNavbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+        
+        <hbox>
+            <checkbox id="centerNavBarText" preference="userChrome.centered.urlbar"
+                data-l10n-id="center-navbar-text" />
 
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="centerNavBarTextImage" class="info-popup" />
+            </div>
+        </hbox>
     </groupbox>
 </html:template>
diff --git a/waterfox/browser/components/preferences/content/theme.js b/waterfox/browser/components/preferences/content/theme.js
index 431fd626cc2fa..ef67ebe6c77e6 100644
--- a/waterfox/browser/components/preferences/content/theme.js
+++ b/waterfox/browser/components/preferences/content/theme.js
@@ -27,67 +27,97 @@ const gThemePane = {
 
   get preferences() {
     return [
-      // Waterfox Customizations
+      // == Theme ==============================================================
       { id: 'browser.theme.enableWaterfoxCustomizations', type: 'int' },
 
+      // Appearance
+      { id: 'userChrome.theme.proton_color.dark_blue_accent', type: 'bool' },
+      { id: 'userContent.page.proton_color.dark_blue_accent', type: 'bool' },
+
+      { id: 'userContent.page.proton_color.system_accent', type: 'bool' },
+      { id: 'widget.non-native-theme.use-theme-accent', type: 'bool' },
+
+      { id: 'userChrome.theme.transparent.panel', type: 'bool' },
+      { id: 'userChrome.theme.transparent.menu', type: 'bool' },
+
+      // Icons
+      { id: 'userChrome.icon.disabled', type: 'bool' },
+      { id: 'userChrome.hidden.tab_icon', type: 'bool' },
+      { id: 'userChrome.icon.menu.full', type: 'bool' },
+      { id: 'userChrome.icon.global_menu.mac', type: 'bool' },
+
+      // Fonts
+      { id: 'userContent.page.monospace', type: 'bool' },
+      { id: 'userChrome.theme.monospace', type: 'bool' },
+
+      // Animations
+      { id: 'userChrome.decoration.disable_panel_animate', type: 'bool' },
+      { id: 'userChrome.decoration.disable_sidebar_animate', type: 'bool' },
+      
+      // == Interface Components ===============================================
       // Tab Bar
-      { id: 'userChrome.autohide.tab', type: 'bool' },
-      { id: 'userChrome.autohide.tab.blur', type: 'bool' },
-      { id: 'userChrome.autohide.tabbar', type: 'bool' },
-      { id: 'userChrome.centered.tab', type: 'bool' },
-      { id: 'userChrome.centered.tab.label', type: 'bool' },
-      { id: 'userChrome.rounding.square_tab', type: 'bool' },
-      { id: 'userChrome.tab.bottom_rounded_corner', type: 'bool' },
       { id: 'userChrome.tab.photon_like_contextline', type: 'bool' },
-      { id: 'userChrome.tab.squareTabCorners', type: 'bool' },
       { id: 'userChrome.padding.drag_space', type: 'bool' },
       { id: 'userChrome.tab.close_button_at_hover', type: 'bool' },
 
+      // Nav Bar
+      { id: 'userChrome.padding.urlView_expanding', type: 'bool' },
+
+      // Panels
+      { id: 'userChrome.padding.menu_compact', type: 'bool' },
+      { id: 'userChrome.padding.bookmark_menu.compact', type: 'bool' },
+      { id: 'userChrome.padding.panel_header', type: 'bool' },
+      { id: 'userChrome.panel.remove_strip', type: 'bool' },
+      { id: 'userChrome.panel.full_width_separator', type: 'bool' },
+
+      // == Rounding ===========================================================
+      // Tab Bar
+      { id: 'userChrome.rounding.square_tab', type: 'bool' },
+      { id: 'userChrome.tab.bottom_rounded_corner', type: 'bool' },
+      { id: 'userChrome.tab.squareTabCorners', type: 'bool' },
+      
+      // Nav Bar
+      { id: 'userChrome.rounding.square_button', type: 'bool' },
+      
+      // Panels
+      { id: 'userChrome.rounding.square_panel', type: 'bool' },
+      { id: 'userChrome.rounding.square_panelitem', type: 'bool' },
+      { id: 'userChrome.rounding.square_menupopup', type: 'bool' },
+      { id: 'userChrome.rounding.square_menuitem', type: 'bool' },
+      { id: 'userChrome.rounding.square_field', type: 'bool' },
+      { id: 'userChrome.rounding.square_checklabel', type: 'bool' },
+      
+      // == Autohide & Hidden ==================================================
+      // Tab Bar
+      { id: 'userChrome.autohide.tab', type: 'bool' },
+      { id: 'userChrome.autohide.tab.blur', type: 'bool' },
+      { id: 'userChrome.autohide.tabbar', type: 'bool' },
+
       // Nav Bar
       { id: 'userChrome.autohide.back_button', type: 'bool' },
       { id: 'userChrome.autohide.forward_button', type: 'bool' },
       { id: 'userChrome.autohide.page_action', type: 'bool' },
       { id: 'userChrome.hidden.urlbar_iconbox', type: 'bool' },
-      { id: 'userChrome.centered.urlbar', type: 'bool' },
-      { id: 'userChrome.rounding.square_button', type: 'bool' },
-      { id: 'userChrome.padding.urlView_expanding', type: 'bool' },
 
       // Bookmarks Bar
       { id: 'userChrome.autohide.bookmarkbar', type: 'bool' },
       { id: 'userChrome.hidden.bookmarkbar_icon', type: 'bool' },
       { id: 'userChrome.hidden.bookmarkbar_label', type: 'bool' },
-
+      
       // Panels
-      { id: 'userChrome.theme.transparent.panel', type: 'bool' },
-      { id: 'userChrome.theme.transparent.menu', type: 'bool' },
-      { id: 'userChrome.decoration.disable_panel_animate', type: 'bool' },
       { id: 'userChrome.hidden.disabled_menu', type: 'bool' },
-      { id: 'userChrome.rounding.square_panel', type: 'bool' },
-      { id: 'userChrome.rounding.square_panelitem', type: 'bool' },
-      { id: 'userChrome.rounding.square_menupopup', type: 'bool' },
-      { id: 'userChrome.rounding.square_menuitem', type: 'bool' },
-      { id: 'userChrome.rounding.square_field', type: 'bool' },
-      { id: 'userChrome.rounding.square_checklabel', type: 'bool' },
-      { id: 'userChrome.padding.menu_compact', type: 'bool' },
-      { id: 'userChrome.padding.bookmark_menu.compact', type: 'bool' },
-      { id: 'userChrome.padding.panel_header', type: 'bool' },
-      { id: 'userChrome.panel.remove_strip', type: 'bool' },
-      { id: 'userChrome.panel.full_width_separator', type: 'bool' },
 
       // Sidebar
-      { id: 'userChrome.decoration.disable_sidebar_animate', type: 'bool' },
       { id: 'userChrome.autohide.sidebar', type: 'bool' },
       { id: 'userChrome.hidden.sidebar_header', type: 'bool' },
-
-      // Icons
-      { id: 'userChrome.icon.disabled', type: 'bool' },
-      { id: 'userChrome.hidden.tab_icon', type: 'bool' },
-      { id: 'userChrome.icon.menu.full', type: 'bool' },
-      { id: 'userChrome.icon.global_menu.mac', type: 'bool' },
-
-      // Font
-      { id: 'userContent.page.monospace', type: 'bool' },
-      { id: 'userChrome.theme.monospace', type: 'bool' },
+      
+      // == Center =============================================================
+      // Tab Bar
+      { id: 'userChrome.centered.tab', type: 'bool' },
+      { id: 'userChrome.centered.tab.label', type: 'bool' },
+      
+      // Nav Bar
+      { id: 'userChrome.centered.urlbar', type: 'bool' },
     ]
   },
 
@@ -102,91 +132,125 @@ const gThemePane = {
         pref: 'userChrome.centered.tab',
       },
     ]
-  },
+  },  
 
   get presets() {
     return [
       {
-        id: 'roundedCorners',
-        on: [
-          { id: 'userChrome.tab.squareTabCorners', value: false },
-          { id: 'userChrome.rounding.square_button', value: false },
-          { id: 'userChrome.rounding.square_panel', value: false },
-          { id: 'userChrome.rounding.square_panelitem', value: false },
-          { id: 'userChrome.rounding.square_menupopup', value: false },
-          { id: 'userChrome.rounding.square_menuitem', value: false },
-          { id: 'userChrome.rounding.square_field', value: false },
-          { id: 'userChrome.rounding.square_checklabel', value: false },
-        ],
-        off: [
-          { id: 'userChrome.tab.squareTabCorners', value: true },
-          { id: 'userChrome.rounding.square_button', value: true },
-          { id: 'userChrome.rounding.square_panel', value: true },
-          { id: 'userChrome.rounding.square_panelitem', value: true },
-          { id: 'userChrome.rounding.square_menupopup', value: true },
-          { id: 'userChrome.rounding.square_menuitem', value: true },
-          { id: 'userChrome.rounding.square_field', value: true },
-          { id: 'userChrome.rounding.square_checklabel', value: true },
-        ],
-      },
-      {
-        id: 'autohideElements',
+        id: 'waterfoxDefaults',
         on: [
-          { id: 'userChrome.autohide.tab', value: true },
-          { id: 'userChrome.autohide.tab.blur', value: true },
-          { id: 'userChrome.autohide.tabbar', value: true },
-          { id: 'userChrome.autohide.back_button', value: true },
-          { id: 'userChrome.autohide.forward_button', value: true },
-          { id: 'userChrome.autohide.page_action', value: true },
-          { id: 'userChrome.autohide.bookmarkbar', value: true },
-          { id: 'userChrome.autohide.sidebar', value: true },
-          { id: 'userChrome.hidden.urlbar_iconbox', value: true },
-        ],
-        off: [
-          { id: 'userChrome.autohide.tab', value: false },
-          { id: 'userChrome.autohide.tab.blur', value: false },
-          { id: 'userChrome.autohide.tabbar', value: false },
-          { id: 'userChrome.autohide.back_button', value: false },
-          { id: 'userChrome.autohide.forward_button', value: false },
-          { id: 'userChrome.autohide.page_action', value: false },
-          { id: 'userChrome.autohide.bookmarkbar', value: false },
-          { id: 'userChrome.autohide.sidebar', value: false },
-          { id: 'userChrome.hidden.urlbar_iconbox', value: false },
-        ],
+          { id: 'userChrome.tab.connect_to_window', value: true },
+          { id: 'userChrome.tab.color_like_toolbar', value: true },
+          
+          { id: 'userChrome.tab.lepton_like_padding', value: false },
+          { id: 'userChrome.tab.photon_like_padding', value: true },
+
+          { id: 'userChrome.tab.dynamic_separator', value: false },
+          { id: 'userChrome.tab.static_separator', value: true },
+          { id: 'userChrome.tab.static_separator.selected_accent', value: false },
+          { id: 'userChrome.tab.bar_separator', value: false },
+
+          { id: 'userChrome.tab.newtab_button_like_tab', value: false },
+          { id: 'userChrome.tab.newtab_button_smaller', value: true },
+          { id: 'userChrome.tab.newtab_button_proton', value: false },
+
+          { id: 'userChrome.icon.panel_full', value: false },
+          { id: 'userChrome.icon.panel_photon', value: true },
+
+          { id: 'userChrome.tab.box_shadow', value: false },
+          { id: 'userChrome.tab.bottom_rounded_corner', value: false },
+
+          { id: 'userChrome.tab.photon_like_contextline', value: true },
+          { id: 'userChrome.rounding.square_tab', value: true },
+        ]
       },
       {
-        id: 'centerElements',
+        id: 'leptonStyle',
         on: [
-          { id: 'userChrome.centered.tab', value: true },
-          { id: 'userChrome.centered.tab.label', value: true },
-          { id: 'userChrome.centered.urlbar', value: true },
-        ],
-        off: [
-          { id: 'userChrome.centered.tab', value: false },
-          { id: 'userChrome.centered.tab.label', value: false },
-          { id: 'userChrome.centered.urlbar', value: false },
-        ],
+          { id: 'userChrome.tab.connect_to_window', value: true },
+          { id: 'userChrome.tab.color_like_toolbar', value: true },
+          
+          { id: 'userChrome.tab.lepton_like_padding', value: true },
+          { id: 'userChrome.tab.photon_like_padding', value: false },
+
+          { id: 'userChrome.tab.dynamic_separator', value: true },
+          { id: 'userChrome.tab.static_separator', value: false },
+          { id: 'userChrome.tab.static_separator.selected_accent', value: false },
+          { id: 'userChrome.tab.bar_separator', value: false },
+
+          { id: 'userChrome.tab.newtab_button_like_tab', value: true },
+          { id: 'userChrome.tab.newtab_button_smaller', value: false },
+          { id: 'userChrome.tab.newtab_button_proton', value: false },
+
+          { id: 'userChrome.icon.panel_full', value: true },
+          { id: 'userChrome.icon.panel_photon', value: false },
+
+          { id: 'userChrome.tab.box_shadow', value: true },
+          { id: 'userChrome.tab.bottom_rounded_corner', value: true },
+
+          { id: 'userChrome.tab.photon_like_contextline', value: false },
+          { id: 'userChrome.rounding.square_tab', value: false },
+        ]
       },
       {
-        id: 'padElements',
+        id: 'protonStyle',
         on: [
-          { id: 'userChrome.padding.drag_space', value: false },
-          { id: 'userChrome.padding.urlView_expanding', value: true },
-          { id: 'userChrome.padding.menu_compact', value: true },
-          { id: 'userChrome.padding.bookmark_menu.compact', value: true },
-          { id: 'userChrome.padding.panel_header', value: true },
-        ],
-        off: [
-          { id: 'userChrome.padding.drag_space', value: true },
-          { id: 'userChrome.padding.urlView_expanding', value: false },
-          { id: 'userChrome.padding.menu_compact', value: false },
-          { id: 'userChrome.padding.bookmark_menu.compact', value: false },
-          { id: 'userChrome.padding.panel_header', value: false },
-        ],
-      },
+          { id: 'userChrome.tab.connect_to_window', value: false },
+          { id: 'userChrome.tab.color_like_toolbar', value: false },
+          
+          { id: 'userChrome.tab.lepton_like_padding', value: false },
+          { id: 'userChrome.tab.photon_like_padding', value: false },
+
+          { id: 'userChrome.tab.dynamic_separator', value: true },
+          { id: 'userChrome.tab.static_separator', value: false },
+          { id: 'userChrome.tab.static_separator.selected_accent', value: false },
+          { id: 'userChrome.tab.bar_separator', value: false },
+
+          { id: 'userChrome.tab.newtab_button_like_tab', value: false },
+          { id: 'userChrome.tab.newtab_button_smaller', value: false },
+          { id: 'userChrome.tab.newtab_button_proton', value: true },
+
+          { id: 'userChrome.icon.panel_full', value: true },
+          { id: 'userChrome.icon.panel_photon', value: false },
+
+          { id: 'userChrome.tab.box_shadow', value: false },
+          { id: 'userChrome.tab.bottom_rounded_corner', value: false },
+
+          { id: 'userChrome.tab.photon_like_contextline', value: false },
+          { id: 'userChrome.rounding.square_tab', value: false },
+        ]
+      }
     ]
   },
 
+  get accentPrefs() {
+    return {
+      '0': [
+        { id: 'userChrome.theme.proton_color.dark_blue_accent', value: true },
+        { id: 'userContent.page.proton_color.dark_blue_accent', value: true },
+
+        { id: 'userContent.page.proton_color.system_accent', value: false },
+        { id: 'widget.non-native-theme.use-theme-accent', value: false },
+      ],
+      
+      '1': [
+        { id: 'userChrome.theme.proton_color.dark_blue_accent', value: false },
+        { id: 'userContent.page.proton_color.dark_blue_accent', value: false },
+
+        { id: 'userContent.page.proton_color.system_accent', value: false },
+        { id: 'widget.non-native-theme.use-theme-accent', value: false },
+      ],
+
+      '2': [
+        { id: 'userChrome.theme.proton_color.dark_blue_accent', value: false },
+        { id: 'userContent.page.proton_color.dark_blue_accent', value: false },
+
+        { id: 'userContent.page.proton_color.system_accent', value: true },
+        { id: 'widget.non-native-theme.use-theme-accent', value: true },
+      ]
+    }
+  },  
+
   init() {
     // Initialize prefs
     window.Preferences.addAll(this.preferences)
@@ -204,22 +268,7 @@ const gThemePane = {
       const button = document.getElementById(preset.id)
       if (button) {
         button.addEventListener('click', event => {
-          const target = event.target.getAttribute('data-l10n-args')
-          if (!target) {
-            // Something has gone wrong as all our event targets should
-            // have a data-l10n-args attr.
-            return
-          }
-
-          const [presetKey, presetValue] = Object.entries(JSON.parse(target))[0]
-          event.target.setAttribute(
-            'data-l10n-args',
-            JSON.stringify({ [presetKey]: !presetValue })
-          )
-
-          // If the button is initially true, we want to set the
-          // false preset values.
-          for (const pref of preset[presetValue ? 'off' : 'on']) {
+          for (const pref of preset['on']) {
             PrefUtils.set(pref.id, pref.value)
           }
         })
@@ -258,6 +307,9 @@ const gThemePane = {
         })
       )
     }
+    
+    // Init AccentColor
+    this.initAccentColor()
 
     // Init Tab Rounding
     this.initTabRounding()
@@ -332,6 +384,24 @@ const gThemePane = {
     styleSheetService.unregisterSheet(url, type)
   },
 
+  async initAccentColor() {
+    let menulist = document.getElementById('accentColor')
+    // If it doesn't exist yet, try again.
+    while (!menulist) {
+      const wait = ms => new Promise(res => setTimeout(res, ms, {}))
+      await wait(500)
+      menulist = document.getElementById('accentColor')
+    }
+
+    menulist?.addEventListener("command", () => {
+      if (['0', '1', '2'].includes(menulist.value)) {
+        for (const pref of this.accentPrefs[menulist.value]) {
+          PrefUtils.set(pref.id, pref.value)
+        }
+      } 
+    })
+  },
+
   async initTabRounding() {
     let checkbox = document.getElementById('squareTabCorners')
     // If it doesn't exist yet, try again.
diff --git a/waterfox/browser/locales b/waterfox/browser/locales
index 412bf181951e6..0854477d322ac 160000
--- a/waterfox/browser/locales
+++ b/waterfox/browser/locales
@@ -1 +1 @@
-Subproject commit 412bf181951e6dcb3df52569291b35a8a516c207
+Subproject commit 0854477d322ac42d142ea8ca243b79fd561a2d49