forked from pixel-point/pixelpoint-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgatsby-browser.js
39 lines (34 loc) · 1.65 KB
/
gatsby-browser.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import './src/styles/main.css';
// eslint-disable-next-line import/prefer-default-export
export const onRouteUpdate = ({ location }) => {
// TODO: Fix of gatsby-plugin-image bug, that prevents images from being displayed
// It happens because gatsby does not trigger a function that sets to an element opacity: 1
// Bug is very hard to reproduce, it happens only in production builds
const mainImages = document.querySelectorAll('.gatsby-image-wrapper [data-main-image]');
mainImages.forEach((mainImage) => {
if (mainImage.complete) {
mainImage.classList.add('loaded');
} else {
mainImage.addEventListener('load', () => {
mainImage.classList.add('loaded');
});
}
});
if (process.env.NODE_ENV === 'production' && typeof window.plausible !== 'undefined') {
window.plausible('pageview');
}
const isBlog = location.pathname.startsWith('/blog');
const isDarkModeSetInLocalStorage =
typeof localStorage !== 'undefined' && localStorage.theme === 'dark';
// prettier-ignore
const isSystemModeDark = !('theme' in localStorage) && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isBlog && (isDarkModeSetInLocalStorage || isSystemModeDark)) {
document.documentElement.classList.add('disable-transition');
document.documentElement.classList.add('dark');
setTimeout(() => document.documentElement.classList.remove('disable-transition'), 0);
} else {
document.documentElement.classList.add('disable-transition');
document.documentElement.classList.remove('dark');
setTimeout(() => document.documentElement.classList.remove('disable-transition'), 0);
}
};