External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

added dark mode

Browse Source
This commit is contained in:
plebbitor
2023-03-08 13:13:55 +01:00
parent 8053276f06
commit a9dad1cbe3
3 changed files with 102 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Board.jsx
+34
View File
@@ -95,6 +95,40 @@ const Board = ({ setBodyStyle }) => {
}
}, [location.pathname]);
// automatic dark mode without interefering with user's selected style
useEffect(() => {
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const isDarkMode = darkModeMediaQuery.matches;
if (isDarkMode) {
setSelectedStyle('Tomorrow');
setBodyStyle({
background: '#1d1f21 none',
color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif'
});
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
}
const darkModeListener = (e) => {
if (e.matches) {
setSelectedStyle('Tomorrow');
setBodyStyle({
background: '#1d1f21 none',
color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif'
});
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
}
};
darkModeMediaQuery.addEventListener('change', darkModeListener);
return () => {
darkModeMediaQuery.removeEventListener('change', darkModeListener);
};
}, []);
const tryLoadMore = async () => {
src/components/Catalog.jsx
+34
View File
@@ -81,6 +81,40 @@ const Catalog = ({ setBodyStyle }) => {
}
}, [location.pathname]);
// automatic dark mode without interefering with user's selected style
useEffect(() => {
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const isDarkMode = darkModeMediaQuery.matches;
if (isDarkMode) {
setSelectedStyle('Tomorrow');
setBodyStyle({
background: '#1d1f21 none',
color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif'
});
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
}
const darkModeListener = (e) => {
if (e.matches) {
setSelectedStyle('Tomorrow');
setBodyStyle({
background: '#1d1f21 none',
color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif'
});
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
}
};
darkModeMediaQuery.addEventListener('change', darkModeListener);
return () => {
darkModeMediaQuery.removeEventListener('change', darkModeListener);
};
}, []);
const tryLoadMore = async () => {
src/components/Thread.jsx
+34
View File
@@ -79,6 +79,40 @@ const Thread = ({ setBodyStyle }) => {
}
}, [location.pathname]);
// automatic dark mode without interefering with user's selected style
useEffect(() => {
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const isDarkMode = darkModeMediaQuery.matches;
if (isDarkMode) {
setSelectedStyle('Tomorrow');
setBodyStyle({
background: '#1d1f21 none',
color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif'
});
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
}
const darkModeListener = (e) => {
if (e.matches) {
setSelectedStyle('Tomorrow');
setBodyStyle({
background: '#1d1f21 none',
color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif'
});
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true });
}
};
darkModeMediaQuery.addEventListener('change', darkModeListener);
return () => {
darkModeMediaQuery.removeEventListener('change', darkModeListener);
};
}, []);
const handleVoidClick = () => {}