Skip to content
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

Theme Toggling Feature #2972

Closed
wants to merge 33 commits into from
Closed

Theme Toggling Feature #2972

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
b85d15e
Intial theme toggle within settings page
ayanaar Oct 3, 2023
9605154
Add theme selector mockups (#2971)
mathjazz Oct 3, 2023
09a018a
Intial theme toggle within settings page
ayanaar Oct 3, 2023
b169c96
Make suggested changes and add updated UI
ayanaar Oct 3, 2023
b309221
Resolving conflicts
ayanaar Oct 3, 2023
776df7f
Deleting old migration
ayanaar Oct 3, 2023
b308185
Update UserProfile model
ayanaar Oct 3, 2023
4793129
Satisfy linters
ayanaar Oct 3, 2023
e7f93df
Add requested changes
ayanaar Oct 3, 2023
0ff60fd
Satisfy linters
ayanaar Oct 3, 2023
b8865f8
Remove extra space
ayanaar Oct 3, 2023
771f4d1
Add link to dark-theme.css in base.html
ayanaar Oct 3, 2023
4f14364
Add updates
ayanaar Oct 10, 2023
2982ad1
Remove extra theme-switcher.js file
ayanaar Oct 10, 2023
9340418
Update theme-switcher.js and translate.html
ayanaar Oct 12, 2023
c99db80
Implemented dynamic theme switching based on user preferences and sys…
ayanaar Oct 12, 2023
b7bbe71
Fix spacing in settings.html
ayanaar Oct 12, 2023
5a99d21
Fixing header and inconsistencies
ayanaar Oct 16, 2023
90b707c
Add system theme switching in translate view
ayanaar Oct 16, 2023
34f18a6
Remove console.log statements
ayanaar Oct 16, 2023
8b5a713
Satisfy linters
ayanaar Oct 16, 2023
5e8960e
Satisfy prettier
ayanaar Oct 16, 2023
d8b3a81
Modify templates and update Theme.tsx logic
ayanaar Oct 17, 2023
05b8510
Fix insights page
ayanaar Oct 17, 2023
832b621
Fix profile and insights page, refactor templates, and modify Theme.tsx
ayanaar Oct 17, 2023
6f370dd
Fix migrations and inconsistencies
ayanaar Oct 18, 2023
9737f59
Update model to fix pytests
ayanaar Oct 18, 2023
afcd620
Remove theme field from forms
ayanaar Oct 18, 2023
b4e63cc
Fix python linter
ayanaar Oct 18, 2023
f590ee1
Remove spec files
ayanaar Oct 19, 2023
ba8a87b
Update light theme file
ayanaar Oct 19, 2023
2d73318
Add light theme spec
ayanaar Oct 19, 2023
d99376e
Update light theme spec
ayanaar Oct 19, 2023
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
4 changes: 2 additions & 2 deletions pontoon/base/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@
</head>

<body
class="{% block class %}{% endblock %} {% if request.user.is_authenticated %}{{ user.profile.theme }}-theme{% endif %}"
class="{% block class %}{% endblock %} {% if request.user.is_authenticated %}{{ user.profile.theme }}{% else %}dark{% endif %}-theme"
mathjazz marked this conversation as resolved.
Show resolved Hide resolved
{% if csrf_token %}data-csrf="{{ csrf_token }}"{% endif %}
data-theme="{% if user.profile.theme %}{{ user.profile.theme }}{% else %}system{% endif %}">
data-theme="{% if request.user.is_authenticated %}{{ user.profile.theme }}{% else %}dark{% endif %}">
{% block content %}

{% include "addon_promotion.html" %}
Expand Down
2 changes: 1 addition & 1 deletion translate/public/translate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

{% include "tracker.html" %}
</head>
<body class="{% block class %}{% endblock %}{% if request.user.is_authenticated %}{{user.profile.theme}}-theme{% endif %}" data-theme="{% if request.user.is_authenticated %}{{user.profile.theme}}{% else %}system{% endif %}">
<body class="{% block class %}{% endblock %} {% if request.user.is_authenticated %}{{ user.profile.theme }}{% else %}dark{% endif %}-theme" data-theme="{% if request.user.is_authenticated %}{{ user.profile.theme }}{% else %}dark{% endif %}">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
Expand Down
34 changes: 21 additions & 13 deletions translate/src/context/Theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,36 +16,44 @@ function getSystemTheme() {
}

export function ThemeProvider({ children }: { children: React.ReactElement }) {
const [theme] = useState(() => {
const currentTheme = document.body.getAttribute('data-theme') || 'system';
if (currentTheme === 'system') {
return getSystemTheme();
}
return currentTheme;
});
const [theme] = useState(() => document.body.getAttribute('data-theme')!);
mathjazz marked this conversation as resolved.
Show resolved Hide resolved

useEffect(() => {
function applyTheme(newTheme: string) {
if (newTheme === 'system') {
newTheme = getSystemTheme();
}
document.body.classList.remove('dark-theme', 'light-theme');
document.body.classList.remove(
'dark-theme',
'light-theme',
'system-theme',
);
document.body.classList.add(`${newTheme}-theme`);
}

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function handleThemeChange(e: MediaQueryListEvent) {
let userThemeSetting =
document.body.getAttribute('data-theme') || 'system';
let userThemeSetting = document.body.getAttribute('data-theme')!;

if (userThemeSetting === 'system') {
applyTheme(e.matches ? 'dark' : 'light');
if (e.matches) {
applyTheme('dark');
} else {
applyTheme('light');
}
mathjazz marked this conversation as resolved.
Show resolved Hide resolved
} else {
applyTheme(userThemeSetting);
}
}

mediaQuery.addEventListener('change', handleThemeChange);

applyTheme(theme);
if (document.body.classList.contains('system-theme')) {
let systemTheme = getSystemTheme();
document.body.classList.remove('system-theme');
document.body.classList.add(`${systemTheme}-theme`);
} else {
applyTheme(document.body.getAttribute('data-theme')!);
}
mathjazz marked this conversation as resolved.
Show resolved Hide resolved

return () => {
mediaQuery.removeEventListener('change', handleThemeChange);
Expand Down