From 5005cfbf0c19b5c47a0079f982fb1a730321cef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E6=81=92=E9=9C=96?=
<44224328+Magren0321@users.noreply.github.com>
Date: Fri, 26 May 2023 21:39:40 +0800
Subject: [PATCH 1/2] feat: darkMode
---
src/index.tsx | 54 +++++++++++++++++++++++++++++++--------------------
1 file changed, 33 insertions(+), 21 deletions(-)
diff --git a/src/index.tsx b/src/index.tsx
index c8b00ef..bbf1792 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -18,6 +18,10 @@ export type NextTopLoaderProps = {
* @default "#29d"
*/
color?: string;
+ /**
+ * Color for the TopLoader in dark mode.
+ */
+ darkColor?: string;
/**
* The initial position for the TopLoader in percentage, 0.08 is 8%.
* @default 0.08
@@ -60,10 +64,11 @@ export type NextTopLoaderProps = {
* @ you can disable it by setting it to `false`
*/
shadow?: string | false;
-}
+};
const NextTopLoader = ({
color: propColor,
+ darkColor: propDarkColor,
height: propHeight,
showSpinner,
crawl,
@@ -73,31 +78,31 @@ const NextTopLoader = ({
speed,
shadow,
}: NextTopLoaderProps) => {
+ const [isDarkMode, setIsDarkMode] = React.useState(false);
+
const defaultColor = '#29d';
const defaultHeight = 3;
const color = propColor ?? defaultColor;
+ const darkColor = propDarkColor ?? color;
const height = propHeight ?? defaultHeight;
// Any falsy (except undefined) will disable the shadow
- const boxShadow = !shadow && shadow !== undefined
- ? ''
- : shadow
+ const boxShadow =
+ !shadow && shadow !== undefined
+ ? ''
+ : shadow
? `box-shadow:${shadow}`
: `box-shadow:0 0 10px ${color},0 0 5px ${color}`;
const styles = (
<style>
{`#nprogress{pointer-events:none}#nprogress .bar{background:${
- color
- };position:fixed;z-index:1031;top:0;left:0;width:100%;height:${
- height
- }px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${
- boxShadow
- };opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${
- color
+ isDarkMode ? darkColor : color
+ };position:fixed;z-index:1031;top:0;left:0;width:100%;height:${height}px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;${boxShadow};opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:${
+ isDarkMode ? darkColor : color
};border-left-color:${
- color
+ isDarkMode ? darkColor : color
};border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`}
</style>
);
@@ -112,6 +117,15 @@ const NextTopLoader = ({
speed: speed ?? 200,
});
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+ function handleChange(event: MediaQueryListEvent) {
+ setIsDarkMode(event.matches);
+ }
+
+ mediaQuery.addEventListener('change', handleChange);
+ setIsDarkMode(mediaQuery.matches);
+
function isAnchorOfCurrentUrl(currentUrl: string, newUrl: string) {
const currentUrlObj = new URL(currentUrl);
const newUrlObj = new URL(newUrl);
@@ -146,13 +160,13 @@ const NextTopLoader = ({
if (anchor) {
const currentUrl = window.location.href;
const newUrl = (anchor as HTMLAnchorElement).href;
- const isExternalLink = (anchor as HTMLAnchorElement).target === "_blank";
+ const isExternalLink = (anchor as HTMLAnchorElement).target === '_blank';
const isAnchor = isAnchorOfCurrentUrl(currentUrl, newUrl);
if (newUrl === currentUrl || isAnchor || isExternalLink) {
NProgress.start();
NProgress.done();
[].forEach.call(npgclass, function (el: Element) {
- el.classList.remove("nprogress-busy");
+ el.classList.remove('nprogress-busy');
});
} else {
NProgress.start();
@@ -161,7 +175,7 @@ const NextTopLoader = ({
history.pushState = function () {
NProgress.done();
[].forEach.call(npgclass, function (el: Element) {
- el.classList.remove("nprogress-busy");
+ el.classList.remove('nprogress-busy');
});
// eslint-disable-next-line prefer-rest-params, @typescript-eslint/no-explicit-any
return pushState.apply(history, arguments as any);
@@ -178,11 +192,11 @@ const NextTopLoader = ({
}
// Add the global click event listener
- document.addEventListener("click", handleClick);
+ document.addEventListener('click', handleClick);
// Clean up the global click event listener when the component is unmounted
return () => {
- document.removeEventListener("click", handleClick);
+ document.removeEventListener('click', handleClick);
};
}, []);
@@ -192,6 +206,7 @@ export default NextTopLoader;
NextTopLoader.propTypes = {
color: PropTypes.string,
+ drakColor: PropTypes.string,
height: PropTypes.number,
showSpinner: PropTypes.bool,
crawl: PropTypes.bool,
@@ -199,8 +214,5 @@ NextTopLoader.propTypes = {
initialPosition: PropTypes.number,
easing: PropTypes.string,
speed: PropTypes.number,
- shadow: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.bool,
- ]),
+ shadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
};
From b75254542d21843591df9d76b6411155bd02e222 Mon Sep 17 00:00:00 2001
From: Magren <44224328+Magren0321@users.noreply.github.com>
Date: Sun, 28 May 2023 09:35:25 +0800
Subject: [PATCH 2/2] Update src/index.tsx
Co-authored-by: Ariel Vieira <17505779+arielvieira@users.noreply.github.com>
---
src/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/index.tsx b/src/index.tsx
index bbf1792..1023e91 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -206,7 +206,7 @@ export default NextTopLoader;
NextTopLoader.propTypes = {
color: PropTypes.string,
- drakColor: PropTypes.string,
+ darkColor: PropTypes.string,
height: PropTypes.number,
showSpinner: PropTypes.bool,
crawl: PropTypes.bool,