forked from deblan/side_menu
add dark mode colors
This commit is contained in:
parent
d8d6aededa
commit
9747820cb8
|
@ -111,3 +111,11 @@
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.side-menu-setting-label-short {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-setting-form-long {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
|
@ -65,29 +65,61 @@ class CssController extends Controller
|
||||||
|
|
||||||
protected function getConfig(): array
|
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');
|
$isForced = $this->config->getAppValueBool('force', '0');
|
||||||
$topMenuApps = $this->config->getAppValueArray('top-menu-apps', '[]');
|
$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) {
|
if ($this->user) {
|
||||||
$userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');
|
$userTopMenuApps = $this->config->getUserValueArray($this->user, 'top-menu-apps', '[]');
|
||||||
|
|
||||||
if (!empty($userTopMenuApps) && !$isForced) {
|
if (!empty($userTopMenuApps) && !$isForced) {
|
||||||
$topMenuApps = $userTopMenuApps;
|
$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');
|
||||||
|
} 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');
|
||||||
}
|
}
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'vars' => [
|
'vars' => [
|
||||||
'background-color' => $backgroundColor,
|
'background-color' => $backgroundColor,
|
||||||
'background-color-to' => $backgroundColorTo,
|
'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'),
|
'display-logo' => $this->config->getAppValueBool('display-logo', '1'),
|
||||||
'opener-only' => $this->config->getAppValueBool('opener-only', '0'),
|
'opener-only' => $this->config->getAppValueBool('opener-only', '0'),
|
||||||
|
|
|
@ -23,43 +23,47 @@ class ConfigProxy
|
||||||
$this->config = $config;
|
$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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -76,6 +76,9 @@ class Admin implements ISettings
|
||||||
$backgroundColor = $this->config->getAppValue('background-color', '#333333');
|
$backgroundColor = $this->config->getAppValue('background-color', '#333333');
|
||||||
$backgroundColorTo = $this->config->getAppValue('background-color-to', $backgroundColor);
|
$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 = [
|
$parameters = [
|
||||||
'background-color' => $backgroundColor,
|
'background-color' => $backgroundColor,
|
||||||
'background-color-to' => $backgroundColorTo,
|
'background-color-to' => $backgroundColorTo,
|
||||||
|
@ -83,10 +86,18 @@ class Admin implements ISettings
|
||||||
'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
|
'loader-color' => $this->config->getAppValue('loader-color', '#0e75ac'),
|
||||||
'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
|
'icon-invert-filter' => $this->config->getAppValueInt('icon-invert-filter', '0'),
|
||||||
'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
|
'icon-opacity' => $this->config->getAppValueInt('icon-opacity', '100'),
|
||||||
'loader-enabled' => $this->config->getAppValue('loader-enabled', '1'),
|
|
||||||
'text-color' => $this->config->getAppValue('text-color', '#FFFFFF'),
|
'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-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'),
|
'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'),
|
'always-displayed' => $this->config->getAppValue('always-displayed', '0'),
|
||||||
'big-menu' => $this->config->getAppValue('big-menu', '0'),
|
'big-menu' => $this->config->getAppValue('big-menu', '0'),
|
||||||
'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),
|
'big-menu-hidden-apps' => $this->config->getAppValueArray('big-menu-hidden-apps', '[]'),
|
||||||
|
|
|
@ -74,3 +74,4 @@
|
||||||
"Name": "Name"
|
"Name": "Name"
|
||||||
"Customed": "Kundenspezifisch"
|
"Customed": "Kundenspezifisch"
|
||||||
"Show and hide the list of categories": "Liste der Kategorien ein- und ausblenden"
|
"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."
|
||||||
|
|
|
@ -74,3 +74,4 @@
|
||||||
"Name": "Nom"
|
"Name": "Nom"
|
||||||
"Customed": "Personnalisé"
|
"Customed": "Personnalisé"
|
||||||
"Show and hide the list of categories": "Afficher et masquer la liste des catégories"
|
"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."
|
||||||
|
|
|
@ -48,118 +48,123 @@ $choicesSizes = [
|
||||||
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
|
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
|
||||||
</h2>
|
</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>
|
||||||
|
</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>
|
<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>
|
<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>
|
<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>
|
||||||
|
|
||||||
<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">
|
<div class="side-menu-setting-table">
|
||||||
<?php
|
<?php
|
||||||
$choices = [
|
$choices = [
|
||||||
|
@ -172,11 +177,10 @@ $choicesSizes = [
|
||||||
];
|
];
|
||||||
?>
|
?>
|
||||||
<div class="side-menu-setting-row">
|
<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')); ?>
|
<?php p($l->t('Icon')); ?>
|
||||||
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
|
|
||||||
</div>
|
</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">
|
<select id="side-menu-opener" name="opener" class="side-menu-setting side-menu-setting-live">
|
||||||
<?php foreach ($choices as $label => $value): ?>
|
<?php foreach ($choices as $label => $value): ?>
|
||||||
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
|
<option value="<?php echo $value ?>" <?php if ($value === $_['opener']): ?>selected<?php endif; ?>>
|
||||||
|
@ -186,7 +190,160 @@ $choicesSizes = [
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
</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-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">
|
<div class="side-menu-setting-row">
|
||||||
<?php
|
<?php
|
||||||
$choices = [
|
$choices = [
|
||||||
|
|
Loading…
Reference in a new issue