IntenseFinance/firefly-iii
3
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-02-25 18:45:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode button

Browse Source
This commit is contained in:
James Cole 2023-04-08 06:55:38 +02:00
parent 3d1d064720
commit 88fd76f0f1
No known key found for this signature in database
GPG Key ID: B49A324B7EAD6D80
8 changed files with 86 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Controllers/Controller.php
View File

@ -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);
}

13
app/Http/Controllers/PreferencesController.php
View File

@ -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();

2
config/firefly.php
View File

@ -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' => [

5
resources/lang/en_US/firefly.php
View File

@ -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',

13
resources/views/layout/default.twig
View File

@ -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-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 }}">

34
resources/views/layout/empty.twig
View File

@ -20,19 +20,27 @@
{# the theme #}
<link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
<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.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<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)">
{% 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.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<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-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 }}">

34
resources/views/layout/guest.twig
View File

@ -30,19 +30,27 @@
{# the theme #}
<link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css" nonce="{{ JS_NONCE }}">
<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.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
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 = \'\'">',
);
}
</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)">
{% 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.
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<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-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 }}">

13
resources/views/preferences/index.twig
View File

@ -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>