Skip to content

[WebProfilerBundle] Improved the light/dark theme switching #41432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 23, 2021
Merged

[WebProfilerBundle] Improved the light/dark theme switching #41432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,18 @@
</head>
<body>
<script>
document.body.classList.add(
localStorage.getItem('symfony/profiler/theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light'),
localStorage.getItem('symfony/profiler/width') || 'width-normal'
);
if (null === localStorage.getItem('symfony/profiler/theme') || 'theme-auto' === localStorage.getItem('symfony/profiler/theme')) {
document.body.classList.add((matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light'));
} else {
document.body.classList.add(localStorage.getItem('symfony/profiler/theme'));
}
// needed to respond dynamically to OS changes without having to refresh the page
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
document.body.classList.remove(e.matches ? 'theme-light' : 'theme-dark');
document.body.classList.add(e.matches ? 'theme-dark' : 'theme-light');
});

document.body.classList.add(localStorage.getItem('symfony/profiler/width') || 'width-normal');
</script>

{% block body '' %}
Expand Down
53 changes: 34 additions & 19 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,21 +116,25 @@
<div class="modal-content">
<h4>Theme</h4>

<input class="config-option" type="radio" name="theme" value="auto" id="settings-theme-auto">
<label for="settings-theme-auto">Auto</label>
<p class="form-help"><strong>Default theme</strong>. It switches between Light and Dark automatically to match the operating system theme.</p>

<input class="config-option" type="radio" name="theme" value="light" id="settings-theme-light">
<label for="settings-theme-light">Light</label>
<p class="form-help">Default theme. Improves readability.</p>
<p class="form-help">Provides greatest readability, but requires a well-lit environment.</p>

<input class="config-option" type="radio" name="theme" value="dark" id="settings-theme-dark">
<label for="settings-theme-dark">Dark</label>
<p class="form-help">Reduces eye fatigue. Ideal for low light conditions.</p>
<p class="form-help">Reduces eye fatigue. Ideal for low light environments.</p>

<h4>Page Width</h4>

<input class="config-option" type="radio" name="width" value="light" id="settings-width-normal">
<input class="config-option" type="radio" name="width" value="normal" id="settings-width-normal">
<label for="settings-width-normal">Normal</label>
<p class="form-help">Fixed page width. Improves readability.</p>

<input class="config-option" type="radio" name="width" value="dark" id="settings-width-full">
<input class="config-option" type="radio" name="width" value="full" id="settings-width-full">
<label for="settings-width-full">Full-page</label>
<p class="form-help">Dynamic page width. As wide as the browser window.</p>
</div>
Expand All @@ -139,27 +143,38 @@

<script>
(function() {
let configOptions = document.querySelectorAll('.config-option');
let oppositeValues = { 'light': 'dark', 'dark': 'light', 'normal': 'full', 'full': 'normal' };
const configOptions = document.querySelectorAll('.config-option');
const allSettingValues = ['theme-auto', 'theme-ligh', 'theme-dark', 'width-normal', 'width-full'];
[...configOptions].forEach(option => {
option.addEventListener('click', function (event) {
let optionParts = option.id.split('-');
let optionName = optionParts[1];
let optionValue = optionParts[2];

document.body.classList.remove(optionName + '-' + oppositeValues[optionValue]);
document.body.classList.add(optionName + '-' + optionValue);
localStorage.setItem('symfony/profiler/' + optionName, optionName + '-' + optionValue);
option.addEventListener('change', function (event) {
const optionName = option.name;
const optionValue = option.value;
const settingName = 'symfony/profiler/' + optionName;
const settingValue = optionName + '-' + optionValue;

localStorage.setItem(settingName, settingValue);

document.body.classList.forEach((cssClass) => {
if (cssClass.startsWith(optionName)) {
document.body.classList.remove(cssClass);
}
});

if ('theme-auto' === settingValue) {
document.body.classList.add((matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light'));
} else {
document.body.classList.add(settingValue);
}
});
});

let openModalButton = document.getElementById('open-settings');
let modalWindow = document.getElementById('profiler-settings');
let closeModalButton = document.getElementsByClassName('close-modal')[0];
let modalWrapper = document.getElementsByClassName('modal-wrap')[0]
const openModalButton = document.getElementById('open-settings');
const modalWindow = document.getElementById('profiler-settings');
const closeModalButton = document.getElementsByClassName('close-modal')[0];
const modalWrapper = document.getElementsByClassName('modal-wrap')[0]

openModalButton.addEventListener('click', function(event) {
document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/theme') || 'theme-light')).checked = 'checked';
document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/theme') || 'theme-auto')).checked = 'checked';
document.getElementById('settings-' + (localStorage.getItem('symfony/profiler/width') || 'width-normal')).checked = 'checked';

modalWindow.classList.toggle('visible');
Expand Down