mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-02-25 18:45:27 -06:00
Dark mode button
This commit is contained in:
James Cole
parent
3d1d064720
commit
88fd76f0f1
@ -100,11 +100,12 @@ abstract class Controller extends BaseController
|
||||
$this->monthFormat = (string)trans('config.month_js', [], $locale);
|
||||
$this->monthAndDayFormat = (string)trans('config.month_and_day_js', [], $locale);
|
||||
$this->dateTimeFormat = (string)trans('config.date_time_js', [], $locale);
|
||||
|
||||
$darkMode = 'browser';
|
||||
// get shown-intro-preference:
|
||||
if (auth()->check()) {
|
||||
$language = app('steam')->getLanguage();
|
||||
$locale = app('steam')->getLocale();
|
||||
$darkMode = app('preferences')->get('darkMode', 'browser')->data;
|
||||
$page = $this->getPageName();
|
||||
$shownDemo = $this->hasSeenDemo();
|
||||
app('view')->share('language', $language);
|
||||
@ -113,6 +114,7 @@ abstract class Controller extends BaseController
|
||||
app('view')->share('current_route_name', $page);
|
||||
app('view')->share('original_route_name', Route::currentRouteName());
|
||||
}
|
||||
app('view')->share('darkMode', $darkMode);
|
||||
|
||||
return $next($request);
|
||||
}
|
||||
|
||||
@ -32,9 +32,9 @@ use Illuminate\Contracts\View\Factory;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Routing\Redirector;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
use Illuminate\View\View;
|
||||
use JsonException;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
use Psr\Container\ContainerExceptionInterface;
|
||||
use Psr\Container\NotFoundExceptionInterface;
|
||||
|
||||
@ -102,14 +102,15 @@ class PreferencesController extends Controller
|
||||
$languages = config('firefly.languages');
|
||||
$locale = app('preferences')->get('locale', config('firefly.default_locale', 'equal'))->data;
|
||||
$listPageSize = app('preferences')->get('listPageSize', 50)->data;
|
||||
$darkMode = app('preferences')->get('darkMode', 'browser')->data;
|
||||
$slackUrl = app('preferences')->get('slack_webhook_url', '')->data;
|
||||
$customFiscalYear = app('preferences')->get('customFiscalYear', 0)->data;
|
||||
$fiscalYearStartStr = app('preferences')->get('fiscalYearStart', '01-01')->data;
|
||||
$fiscalYearStart = date('Y').'-'.$fiscalYearStartStr;
|
||||
$tjOptionalFields = app('preferences')->get('transaction_journal_optional_fields', [])->data;
|
||||
$availableDarkModes = config('firefly.available_dark_modes');
|
||||
|
||||
// notification preferences (single value for each):
|
||||
|
||||
$notifications = [];
|
||||
foreach (config('firefly.available_notifications') as $notification) {
|
||||
$notifications[$notification] = app('preferences')->get(sprintf('notification_%s', $notification), true)->data;
|
||||
@ -140,6 +141,8 @@ class PreferencesController extends Controller
|
||||
'isDocker',
|
||||
'frontPageAccounts',
|
||||
'languages',
|
||||
'darkMode',
|
||||
'availableDarkModes',
|
||||
'notifications',
|
||||
'slackUrl',
|
||||
'locales',
|
||||
@ -257,6 +260,12 @@ class PreferencesController extends Controller
|
||||
];
|
||||
app('preferences')->set('transaction_journal_optional_fields', $optionalTj);
|
||||
|
||||
// dark mode
|
||||
$darkMode = $request->get('darkMode') ?? 'browser';
|
||||
if(in_array($darkMode, config('firefly.available_dark_modes'), true)) {
|
||||
app('preferences')->set('darkMode', $darkMode);
|
||||
}
|
||||
|
||||
session()->flash('success', (string)trans('firefly.saved_preferences'));
|
||||
app('preferences')->mark();
|
||||
|
||||
|
||||
@ -205,6 +205,7 @@ return [
|
||||
],
|
||||
|
||||
// default user-related values
|
||||
'darkMode' => 'browser',
|
||||
'list_length' => 10, // to be removed if v1 is cancelled.
|
||||
'default_preferences' => [
|
||||
'frontPageAccounts' => [],
|
||||
@ -241,6 +242,7 @@ return [
|
||||
TransactionJournal::class,
|
||||
Recurrence::class,
|
||||
],
|
||||
'available_dark_modes' => ['light', 'dark', 'browser'],
|
||||
'bill_reminder_periods' => [90, 30, 14, 7, 0],
|
||||
'valid_view_ranges' => ['1D', '1W', '1M', '3M', '6M', '1Y',],
|
||||
'allowedMimes' => [
|
||||
|
||||
@ -1262,7 +1262,12 @@ return [
|
||||
|
||||
|
||||
// preferences
|
||||
'dark_mode_option_browser' => 'Let your browser decide',
|
||||
'dark_mode_option_light' => 'Always light',
|
||||
'dark_mode_option_dark' => 'Always dark',
|
||||
'equal_to_language' => '(equal to language)',
|
||||
'dark_mode_preference' => 'Dark mode',
|
||||
'dark_mode_preference_help' => 'Tell Firefly III when to use dark mode.',
|
||||
'pref_home_screen_accounts' => 'Home screen accounts',
|
||||
'pref_home_screen_accounts_help' => 'Which accounts should be displayed on the home page?',
|
||||
'pref_view_range' => 'View range',
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
|
||||
{# the theme #}
|
||||
<link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% if 'browser' == darkMode %}
|
||||
<script nonce="{{ JS_NONCE }}">
|
||||
// If `prefers-color-scheme` is not supported, fall back to light mode.
|
||||
// In this case, light.css will be downloaded with `highest` priority.
|
||||
@ -40,9 +41,15 @@
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
|
||||
<link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
|
||||
{% endif %}
|
||||
{% if 'dark' == darkMode %}
|
||||
<link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% endif %}
|
||||
{% if 'light' == darkMode %}
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% endif %}
|
||||
{# Firefly III customisations #}
|
||||
<link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
|
||||
{# the theme #}
|
||||
<link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% if 'browser' == darkMode %}
|
||||
<script nonce="{{ JS_NONCE }}">
|
||||
// If `prefers-color-scheme` is not supported, fall back to light mode.
|
||||
// In this case, light.css will be downloaded with `highest` priority.
|
||||
@ -31,8 +32,15 @@
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
|
||||
<link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: dark)">
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
|
||||
{% endif %}
|
||||
{% if 'dark' == darkMode %}
|
||||
<link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% endif %}
|
||||
{% if 'light' == darkMode %}
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% endif %}
|
||||
|
||||
{# Firefly III customisations #}
|
||||
<link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
|
||||
{# the theme #}
|
||||
<link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% if 'browser' == darkMode %}
|
||||
<script nonce="{{ JS_NONCE }}">
|
||||
// If `prefers-color-scheme` is not supported, fall back to light mode.
|
||||
// In this case, light.css will be downloaded with `highest` priority.
|
||||
@ -37,12 +38,19 @@
|
||||
document.documentElement.style.display = 'none';
|
||||
document.head.insertAdjacentHTML(
|
||||
'beforeend',
|
||||
'<link rel="stylesheet" href="v1/lib/adminlte/css/skins/skin-light.css?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}" onload="document.documentElement.style.display = \'\'">',
|
||||
'<link rel="stylesheet" href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}" onload="document.documentElement.style.display = \'\'">',
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
|
||||
<link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: dark)">
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}" media="(prefers-color-scheme: light)">
|
||||
{% endif %}
|
||||
{% if 'dark' == darkMode %}
|
||||
<link href="v1/lib/adminlte/css/skins/skin-dark.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% endif %}
|
||||
{% if 'light' == darkMode %}
|
||||
<link href="v1/lib/adminlte/css/skins/skin-light.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
{% endif %}
|
||||
|
||||
{# Firefly III customisations #}
|
||||
<link href="v1/css/firefly.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
|
||||
|
||||
@ -283,6 +283,19 @@
|
||||
<p class="text-info">{{ 'list_page_size_help'|_ }}</p>
|
||||
{{ ExpandedForm.integer('listPageSize',listPageSize,{'label' : 'list_page_size_label'|_}) }}
|
||||
</div>
|
||||
<div class="preferences-box">
|
||||
<h3>{{ 'dark_mode_preference'|_ }}</h3>
|
||||
<p class="text-info">{{ 'dark_mode_preference_help'|_ }}</p>
|
||||
{% for mode in availableDarkModes %}
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="darkMode"
|
||||
value="{{ mode }}" {% if darkMode == mode %} checked {% endif %}>
|
||||
{{ ('dark_mode_option_'~mode)|_ }}
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user