add background opacity (fix #58)

README.md

@@ -6,7 +6,7 @@ You can also define apps that must be displayed in the top menu. Fully customisa
 
 This application is rather suitable for instances that activate a lot of applications.
 
-Comptatible with AppOrder.
+You can customize colors depending of the theme (Dark theme and Breeze Dark). Comptatible with AppOrder.
 
 * [Installation and upgrade](#installation-and-upgrade)
 * [How to contribute?](#how-to-contribute)

appinfo/info.xml

@@ -11,7 +11,7 @@ This application is rather suitable for instances that activate a lot of applica
 
 Use the shortcut `Ctrl`+`o` to open and to hide the side menu. Use `tab` to navigate.
 
-Comptatible with AppOrder.
+You can customize colors depending of the theme (Dark theme and Breeze Dark). Comptatible with AppOrder.
 
 You can report a bug or request a feature by opening an issue.
 
@@ -26,7 +26,7 @@ If you like this application and if you want to support the development:
 * [Donate with liberapay](https://liberapay.com/deblan)
 * [Leave a comment](https://apps.nextcloud.com/apps/side_menu#comments)
 ]]></description>
-    <version>1.22.0</version>
+    <version>1.23.1</version>
     <licence>agpl</licence>
     <author mail="contact@deblan.fr" homepage="https://www.deblan.io/">Simon Vieille</author>
     <namespace>SideMenu</namespace>
@@ -46,7 +46,7 @@ If you like this application and if you want to support the development:
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/nc20_big_menu_responsive.png</screenshot>
     <screenshot>https://gitnet.fr/deblan/side_menu/raw/branch/master/screenshots/personal_settings.png</screenshot>
     <dependencies>
-        <nextcloud min-version="18" max-version="20"/>
+        <nextcloud min-version="18" max-version="21"/>
     </dependencies>
     <settings>
         <admin>OCA\SideMenu\Settings\Admin</admin>

css/admin.css

@@ -111,3 +111,11 @@
     display: table-cell;
     width: 300px;
 }
+
+.side-menu-setting-label-short {
+    width: 300px;
+}
+
+.side-menu-setting-form-long {
+    width: 400px;
+}

lib/Controller/CssController.php

@@ -65,29 +65,68 @@ class CssController extends Controller
 
     protected function getConfig(): array
     {
-        $backgroundColor = $this->config->getAppValue('background-color', '#333333');
-        $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
         $isForced = $this->config->getAppValueBool('force', '0');
         $topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
 
+        $isAccessibilityAppEnabled = $this->config->getAppValueBool('enabled', '0', 'accessibility');
+        $isBreezeDarkAppEnabled = $this->config->getAppValueBool('enabled', '0', 'breezedark');
+        $isBreezeDarkGlobalEnabled = $this->config->getAppValueBool('theme_enabled', '0', 'breezedark');
+
         if ($this->user) {
             $userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');
 
             if (!empty($userTopMenuApps) && !$isForced) {
                 $topMenuApps = $userTopMenuApps;
             }
+
+            $isDarkThemeUserEnabled = $this->config->getUserValue($this->user, 'theme', '', 'accessibility') === 'dark';
+            $isBreezeDarkUserEnabled = $this->config->getUserValue($this->user, 'theme_enabled', '', 'breezedark');
+
+            $isBreezeDarkUserEnabled = $isBreezeDarkUserEnabled === '1' || ($isBreezeDarkGlobalEnabled && $isBreezeDarkUserEnabled === '');
+        } else {
+            $isDarkThemeUserEnabled = false;
+            $isBreezeDarkUserEnabled = false;
         }
 
+        $isDarkMode = ($isAccessibilityAppEnabled && $isDarkThemeUserEnabled) || ($isBreezeDarkAppEnabled && $isBreezeDarkUserEnabled);
+
+        if ($isDarkMode) {
+            $backgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333');
+            $backgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $backgroundColor);
+            $currentAppBackgroundColor = $this->config->getAppValue('dark-mode-current-app-background-color', '#444444');
+            $loaderColor = $this->config->getAppValue('dark-mode-loader-color', '#cccccc');
+            $textColor = $this->config->getAppValue('dark-mode-text-color', '#FFFFFF');
+            $iconInvertFilter = abs($this->config->getAppValueInt('dark-mode-icon-invert-filter', '0')).'%';
+            $iconOpacity = abs($this->config->getAppValueInt('dark-mode-icon-opacity', '100') / 100);
+            $opener = $this->config->getAppValue('dark-mode-opener', 'side-menu-opener');
+
+            $backgroundOpacity = dechex($this->config->getAppValueInt('dark-mode-background-color-opacity', '100') * 255 / 100);
+        } else {
+            $backgroundColor = $this->config->getAppValue('background-color', '#333333');
+            $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
+            $currentAppBackgroundColor = $this->config->getAppValue('current-app-background-color', '#444444');
+            $loaderColor = $this->config->getAppValue('loader-color', '#0e75ac');
+            $textColor = $this->config->getAppValue('text-color', '#FFFFFF');
+            $iconInvertFilter = abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%';
+            $iconOpacity = abs($this->config->getAppValueInt('icon-opacity', '100') / 100);
+            $opener = $this->config->getAppValue('opener', 'side-menu-opener');
+
+            $backgroundOpacity = dechex($this->config->getAppValueInt('background-color-opacity', '100') * 255 / 100);
+        }
+
+        $backgroundColor .= $backgroundOpacity;
+        $backgroundColorTo .= $backgroundOpacity;
+
         return [
             'vars' => [
                 'background-color' => $backgroundColor,
                 'background-color-to' => $backgroundColorTo,
-                'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'),
+                'current-app-background-color' => $currentAppBackgroundColor,
-                'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
+                'loader-color' => $loaderColor,
-                'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
+                'text-color' => $textColor,
-                'opener' => $this->config->getAppValue('opener', 'side-menu-opener'),
+                'opener' => $opener,
-                'icon-invert-filter' => abs($this->config->getAppValueInt('icon-invert-filter', '0')).'%',
+                'icon-invert-filter' => $iconInvertFilter,
-                'icon-opacity' => abs($this->config->getAppValueInt('icon-opacity', '100') / 100),
+                'icon-opacity' => $iconOpacity,
             ],
             'display-logo' => $this->config->getAppValueBool('display-logo', '1'),
             'opener-only' => $this->config->getAppValueBool('opener-only', '0'),

lib/Service/ConfigProxy.php

@@ -23,43 +23,47 @@ class ConfigProxy
         $this->config = $config;
     }
 
-    public function getAppValue(string $name, string $default): string
+    public function getAppValue(string $name, string $default, $appId = null): string
     {
-        return (string) $this->config->getAppValue(Application::APP_ID, $name, $default);
+        return (string) $this->config->getAppValue($appId ?? Application::APP_ID, $name, $default);
     }
 
-    public function getUserValue(User $user, string $name, string $default): string
+    public function getUserValue(User $user, string $name, string $default, $appId = null): string
     {
-        return (string) $this->config->getUserValue($user->getUid(), Application::APP_ID, $name, $default);
+        return (string) $this->config->getUserValue($user->getUid(), $appId ?? Application::APP_ID, $name, $default);
     }
 
-    public function getAppValueBool(string $name, string $default): bool
+    public function getAppValueBool(string $name, string $default, $appId = null): bool
     {
-        return (bool) $this->getAppValue($name, $default);
+        return (bool) $this->getAppValue($name, $default, $appId);
     }
 
-    public function getAppValueArray(string $name, string $default): array
+    public function getAppValueArray(string $name, string $default, $appId = null): array
     {
-        return (array) json_decode($this->getAppValue($name, $default), true);
+        return (array) json_decode($this->getAppValue($name, $default, $appId), true);
     }
 
-    public function getAppValueInt(string $name, string $default): int
+    public function getAppValueInt(string $name, string $default, $appId = null): int
     {
-        return (int) $this->getAppValue($name, $default);
+        return (int) $this->getAppValue($name, $default, $appId);
     }
 
-    public function getUserValueBool(User $user, string $name, string $default): bool
+    public function getUserValueBool(User $user, string $name, string $default, $appId = null): bool
     {
-        return (bool) $this->getUserValue($user, $name, $default);
+        return (bool) str_replace(
+            ['yes', 'no'],
+            ['1', '0'],
+            $this->getUserValue($user, $name, $default, $appId)
+        );
     }
 
-    public function getUserValueArray(User $user, string $name, string $default): array
+    public function getUserValueArray(User $user, string $name, string $default, $appId = null): array
     {
-        return (array) json_decode($this->getUserValue($user, $name, $default), true);
+        return (array) json_decode($this->getUserValue($user, $name, $default, $appId), true);
     }
 
-    public function getUserValueInt(User $user, string $name, string $default): int
+    public function getUserValueInt(User $user, string $name, string $default, $appId = null): int
     {
-        return (int) $this->getUserValue($user, $name, $default);
+        return (int) $this->getUserValue($user, $name, $default, $appId);
     }
 }

lib/Settings/Admin.php

@@ -76,17 +76,30 @@ class Admin implements ISettings
         $backgroundColor = $this->config->getAppValue('background-color', '#333333');
         $backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
 
+        $darkModeBackgroundColor = $this->config->getAppValue('dark-mode-background-color', '#333333');
+        $darkModeBackgroundColorTo = $this->config->getAppValue('dark-mode-background-color-to', $darkModeBackgroundColor);
+
         $parameters = [
             'background-color' => $backgroundColor,
             'background-color-to' => $backgroundColorTo,
+            'background-color-opacity' => $this->config->getAppValueInt('background-color-opacity', '100'),
             'current-app-background-color' => $this->config->getAppValue('current-app-background-color', '#444444'),
             'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
             'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
             'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
-            'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
             'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
-            'cache' => $this->config->getAppValue('cache', '0'),
+            'dark-mode-background-color' => $darkModeBackgroundColor,
+            'dark-mode-background-color-to' => $darkModeBackgroundColorTo,
+            'dark-mode-background-color-opacity' => $this->config->getAppValueInt('dark-mode-background-color-opacity', '100'),
+            'dark-mode-current-app-background-color' => $this->config->getAppValue('dark-mode-current-app-background-color', '#444444'),
+            'dark-mode-loader-color' => $this->config->getAppValue('dark-mode-loader-color', '#cccccc'),
+            'dark-mode-icon-invert-filter' => $this->config->getAppValueInt('dark-mode-icon-invert-filter', '0'),
+            'dark-mode-icon-opacity' => $this->config->getAppValueInt('dark-mode-icon-opacity', '100'),
+            'dark-mode-text-color' => $this->config->getAppValue('dark-mode-text-color', '#FFFFFF'),
+            'dark-mode-opener' => $this->config->getAppValue('dark-mode-opener', 'side-menu-opener'),
             'opener' => $this->config->getAppValue('opener', 'side-menu-opener'),
+            'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
+            'cache' => $this->config->getAppValue('cache', '0'),
             'always-displayed' => $this->config->getAppValue('always-displayed', '0'),
             'big-menu' => $this->config->getAppValue('big-menu', '0'),
             'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),

src/SideMenuBig.vue

@@ -43,7 +43,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                             v-bind:icon="app.icon"
                             v-bind:label="app.name"
                             v-bind:href="app.href"
-                            v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
+                            v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
                         />
                     </ul>
                 </div>

src/admin.js

@@ -110,6 +110,12 @@ jQuery(document).ready(() => {
         var name = target.attr('name')
         var value = target.val()
 
+        if ('background-color-opacity' === name) {
+            return $('#side-menu-background-color, #side-menu-background-color-to').trigger('change');
+        } else if ('dark-mode-background-color-opacity' === name) {
+            return $('#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to').trigger('change');
+        }
+
         if (name === 'opener') {
             var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
 
@@ -120,6 +126,16 @@ jQuery(document).ready(() => {
             value/=100;
         }
 
+        if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
+            var opacity = parseInt($('#side-menu-dark-mode-background-color-opacity').val() * 255 / 100);
+
+            value = [value, opacity.toString(16)].join('');
+        } else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
+            var opacity = parseInt($('#side-menu-background-color-opacity').val() * 255 / 100);
+
+            value = [value, opacity.toString(16)].join('');
+        }
+
         document.documentElement.style.setProperty('--side-menu-' + name, value)
     })
 

src/l10n/fixtures/de.yaml

@@ -74,3 +74,5 @@
 "Name": "Name"
 "Customed": "Kundenspezifisch"
 "Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Diese Parameter werden verwendet, wenn Dark Theme oder Breeze Dark Theme aktiviert sind."
+"Dark mode colors": "Dunkle Modusfarben"

src/l10n/fixtures/fr.yaml

@@ -74,3 +74,5 @@
 "Name": "Nom"
 "Customed": "Personnalisé"
 "Show and hide the list of categories": "Afficher et masquer la liste des catégories"
+"This parameters are used when Dark theme or Breeze Dark Theme are enabled.": "Ces paramètres sont utilisés lorsque le thème sombre ou le thème Breeze Dark sont activés."
+"Dark mode colors": "Couleurs du mode sombre"

templates/settings/admin-form.php

@@ -48,118 +48,143 @@ $choicesSizes = [
             <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
         </h2>
 
-        <div>
+        <div class="side-menu-setting-table">
-            <label for="side-menu-background-color">
+            <div class="side-menu-setting-row">
-                <?php p($l->t('Background color')); ?>
+                <div class="side-menu-setting-label side-menu-setting-label-short">
-            </label>
+                    <?php p($l->t('Background color')); ?>
-        </div>
+                </div>
-        <div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
-            <input
+                    <input
-                id="side-menu-background-color"
+                        id="side-menu-background-color"
-                name="background-color"
+                        name="background-color"
-                type="color"
+                        type="color"
-                class="side-menu-setting side-menu-setting-live"
+                        class="side-menu-setting side-menu-setting-live"
-                value="<?php print_unescaped($_['background-color']); ?>">
+                        value="<?php print_unescaped($_['background-color']); ?>">
-            <input
+                    <input
-                id="side-menu-background-color-to"
+                        id="side-menu-background-color-to"
-                name="background-color-to"
+                        name="background-color-to"
-                type="color"
+                        type="color"
-                class="side-menu-setting side-menu-setting-live"
+                        class="side-menu-setting side-menu-setting-live"
-                value="<?php print_unescaped($_['background-color-to']); ?>">
+                        value="<?php print_unescaped($_['background-color-to']); ?>">
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-background-color-opacity"
+                            name="background-color-opacity"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['background-color-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+
+            </div>
         </div>
 
-        <div>
+        <div class="side-menu-setting-table">
-            <label for="side-menu-current-app-background-color">
+            <div class="side-menu-setting-row">
-                <?php p($l->t('Background color of current app')); ?>
+                <div class="side-menu-setting-label side-menu-setting-label-short">
-            </label>
+                    <?php p($l->t('Background color of current app')); ?>
-        </div>
+                </div>
-        <div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
-            <input
+                    <input
-                id="side-menu-current-app-background-color"
+                        id="side-menu-current-app-background-color"
-                name="current-app-background-color"
+                        name="current-app-background-color"
-                type="color"
+                        type="color"
-                class="side-menu-setting side-menu-setting-live"
+                        class="side-menu-setting side-menu-setting-live"
-                value="<?php print_unescaped($_['current-app-background-color']); ?>">
+                        value="<?php print_unescaped($_['current-app-background-color']); ?>">
+                </div>
+            </div>
         </div>
 
-        <div>
+        <div class="side-menu-setting-table">
-            <label for="side-menu-text-color">
+            <div class="side-menu-setting-row">
-                <?php p($l->t('Text color')); ?>
+                <div class="side-menu-setting-label side-menu-setting-label-short">
-            </label>
+                    <?php p($l->t('Text color')); ?>
-        </div>
+                </div>
-        <div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
-            <input
+                    <input
-                id="side-menu-text-color"
+                        id="side-menu-text-color"
-                name="text-color"
+                        name="text-color"
-                type="color"
+                        type="color"
-                class="side-menu-setting side-menu-setting-live"
+                        class="side-menu-setting side-menu-setting-live"
-                value="<?php print_unescaped($_['text-color']); ?>">
+                        value="<?php print_unescaped($_['text-color']); ?>">
+                </div>
+            </div>
         </div>
 
-        <div>
+        <div class="side-menu-setting-table">
-            <label for="side-menu-text-color">
+            <div class="side-menu-setting-row">
-                <?php p($l->t('Loader')); ?>
+                <div class="side-menu-setting-label side-menu-setting-label-short">
-            </label>
+                    <?php p($l->t('Loader')); ?>
-        </div>
+                </div>
-        <div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
-            <input
+                    <input
-                id="side-menu-loader-color"
+                        id="side-menu-loader-color"
-                name="loader-color"
+                        name="loader-color"
-                type="color"
+                        type="color"
-                class="side-menu-setting"
+                        class="side-menu-setting"
-                value="<?php print_unescaped($_['loader-color']); ?>">
+                        value="<?php print_unescaped($_['loader-color']); ?>">
+                </div>
+            </div>
         </div>
 
-        <div>
+        <div class="side-menu-setting-table">
-            <label for="side-menu-icon-invert-filter">
+            <div class="side-menu-setting-row">
-                <?php p($l->t('Icon')); ?>
+                <div class="side-menu-setting-label side-menu-setting-label-short">
-            </label>
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <div>
+                        <em>
+                            <?php p($l->t('Same color')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-icon-invert-filter"
+                            name="icon-invert-filter"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['icon-invert-filter'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opposite color')); ?>
+                        </em>
+                    </div>
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-icon-opacity"
+                            name="icon-opacity"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['icon-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <div>
-            <em>
-                <?php p($l->t('Same color')); ?>
-            </em>
-
-            <input
-                type="range"
-                min="0" max="100"
-                id="side-menu-icon-invert-filter"
-                name="icon-invert-filter"
-                class="side-menu-setting side-menu-setting-live"
-                value="<?php echo $_['icon-invert-filter'] ?>"
-            >
-
-            <em>
-                <?php p($l->t('Opposite color')); ?>
-            </em>
-        </div>
-
-        <div>
-            <em>
-                <?php p($l->t('Transparent')); ?>
-            </em>
-
-            <input
-                type="range"
-                min="0" max="100"
-                id="side-menu-icon-opacity"
-                name="icon-opacity"
-                class="side-menu-setting side-menu-setting-live"
-                value="<?php echo $_['icon-opacity'] ?>"
-            >
-
-            <em>
-                <?php p($l->t('Opaque')); ?>
-            </em>
-        </div>
-    </div>
-
-    <div class="section">
-        <h2>
-            <?php p($l->t('Opener')); ?>
-        </h2>
-
         <div class="side-menu-setting-table">
             <?php
                 $choices = [
@@ -172,11 +197,10 @@ $choicesSizes = [
                 ];
             ?>
             <div class="side-menu-setting-row">
-                <div class="side-menu-setting-label">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
                     <?php p($l->t('Icon')); ?>
-                    <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
                 </div>
-                <div class="side-menu-setting-form">
+                <div class="side-menu-setting-form side-menu-setting-form-long">
                     <select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
                         <?php foreach ($choices as $label => $value): ?>
                             <option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
@@ -186,7 +210,179 @@ $choicesSizes = [
                     </select>
                 </div>
             </div>
+        </div>
 
+        <h2>
+            <?php p($l->t('Dark mode colors')); ?>
+        </h2>
+
+        <p>
+            <?php p($l->t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.')); ?>
+        </p>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-background-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-background-color']); ?>">
+                    <input
+                        name="dark-mode-background-color-to"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-background-color-to']); ?>">
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            id="side-menu-dark-mode-background-color-opacity"
+                            name="dark-mode-background-color-opacity"
+                            class="side-menu-setting side-menu-setting-live"
+                            value="<?php echo $_['dark-mode-background-color-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Background color of current app')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-current-app-background-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-current-app-background-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Text color')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-text-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-text-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Loader')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <input
+                        name="dark-mode-loader-color"
+                        type="color"
+                        class="side-menu-setting"
+                        value="<?php print_unescaped($_['dark-mode-loader-color']); ?>">
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <div>
+                        <em>
+                            <?php p($l->t('Same color')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            name="dark-mode-icon-invert-filter"
+                            class="side-menu-setting"
+                            value="<?php echo $_['dark-mode-icon-invert-filter'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opposite color')); ?>
+                        </em>
+                    </div>
+
+                    <div>
+                        <em>
+                            <?php p($l->t('Transparent')); ?>
+                        </em>
+
+                        <input
+                            type="range"
+                            min="0" max="100"
+                            name="dark-mode-icon-opacity"
+                            class="side-menu-setting"
+                            value="<?php echo $_['dark-mode-icon-opacity'] ?>"
+                        >
+
+                        <em>
+                            <?php p($l->t('Opaque')); ?>
+                        </em>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="side-menu-setting-table">
+            <?php
+                $choices = [
+                    'Default' => 'side-menu-opener',
+                    'Default (dark)' => 'side-menu-opener-dark',
+                    'Hamburger' => 'side-menu-opener-hamburger',
+                    'Hamburger (dark)' => 'side-menu-opener-hamburger-dark',
+                    'Hamburger 2' => 'side-menu-opener-hamburger-2',
+                    'Hamburger 2 (dark)' => 'side-menu-opener-hamburger-2-dark',
+                ];
+            ?>
+            <div class="side-menu-setting-row">
+                <div class="side-menu-setting-label side-menu-setting-label-short">
+                    <?php p($l->t('Icon')); ?>
+                </div>
+                <div class="side-menu-setting-form side-menu-setting-form-long">
+                    <select name="dark-mode-opener" class="side-menu-setting">
+                        <?php foreach ($choices as $label => $value): ?>
+                            <option value="<?php echo $value ?>" <?php if ($value === $_['dark-mode-opener']): ?>selected<?php endif; ?>>
+                                <?php echo $l->t($label);  ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="section">
+        <h2>
+            <?php p($l->t('Opener')); ?>
+        </h2>
+
+        <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <?php
                     $choices = [