add dark mode colors
This commit is contained in:
Simon Vieille
+262
-105
@@ -48,118 +48,123 @@ $choicesSizes = [
|
||||
<small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<label for="side-menu-background-color">
|
||||
<?php p($l->t('Background color')); ?>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="side-menu-background-color"
|
||||
name="background-color"
|
||||
type="color"
|
||||
class="side-menu-setting side-menu-setting-live"
|
||||
value="<?php print_unescaped($_['background-color']); ?>">
|
||||
<input
|
||||
id="side-menu-background-color-to"
|
||||
name="background-color-to"
|
||||
type="color"
|
||||
class="side-menu-setting side-menu-setting-live"
|
||||
value="<?php print_unescaped($_['background-color-to']); ?>">
|
||||
<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
|
||||
id="side-menu-background-color"
|
||||
name="background-color"
|
||||
type="color"
|
||||
class="side-menu-setting side-menu-setting-live"
|
||||
value="<?php print_unescaped($_['background-color']); ?>">
|
||||
<input
|
||||
id="side-menu-background-color-to"
|
||||
name="background-color-to"
|
||||
type="color"
|
||||
class="side-menu-setting side-menu-setting-live"
|
||||
value="<?php print_unescaped($_['background-color-to']); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="side-menu-current-app-background-color">
|
||||
<?php p($l->t('Background color of current app')); ?>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="side-menu-current-app-background-color"
|
||||
name="current-app-background-color"
|
||||
type="color"
|
||||
class="side-menu-setting side-menu-setting-live"
|
||||
value="<?php print_unescaped($_['current-app-background-color']); ?>">
|
||||
<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
|
||||
id="side-menu-current-app-background-color"
|
||||
name="current-app-background-color"
|
||||
type="color"
|
||||
class="side-menu-setting side-menu-setting-live"
|
||||
value="<?php print_unescaped($_['current-app-background-color']); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="side-menu-text-color">
|
||||
<?php p($l->t('Text color')); ?>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="side-menu-text-color"
|
||||
name="text-color"
|
||||
type="color"
|
||||
class="side-menu-setting side-menu-setting-live"
|
||||
value="<?php print_unescaped($_['text-color']); ?>">
|
||||
<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
|
||||
id="side-menu-text-color"
|
||||
name="text-color"
|
||||
type="color"
|
||||
class="side-menu-setting side-menu-setting-live"
|
||||
value="<?php print_unescaped($_['text-color']); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="side-menu-text-color">
|
||||
<?php p($l->t('Loader')); ?>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
id="side-menu-loader-color"
|
||||
name="loader-color"
|
||||
type="color"
|
||||
class="side-menu-setting"
|
||||
value="<?php print_unescaped($_['loader-color']); ?>">
|
||||
<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
|
||||
id="side-menu-loader-color"
|
||||
name="loader-color"
|
||||
type="color"
|
||||
class="side-menu-setting"
|
||||
value="<?php print_unescaped($_['loader-color']); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="side-menu-icon-invert-filter">
|
||||
<?php p($l->t('Icon')); ?>
|
||||
</label>
|
||||
<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"
|
||||
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 +177,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 +190,160 @@ $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>
|
||||
</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">
|
||||
<?php
|
||||
$choices = [
|
||||
|
||||
Reference in New Issue
Block a user