@anatoliygatt/dark-mode-toggle
Version:
A dark mode toggle component for React.
159 lines (136 loc) • 6.16 kB
JavaScript
var E=Object.create;var u=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var U=(e,r)=>{for(var i in r)u(e,i,{get:r[i],enumerable:!0})},v=(e,r,i,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of F(r))!_.call(e,a)&&a!==i&&u(e,a,{get:()=>r[a],enumerable:!(t=N(r,a))||t.enumerable});return e};var b=(e,r,i)=>(i=e!=null?E(G(e)):{},v(r||!e||!e.__esModule?u(i,"default",{value:e,enumerable:!0}):i,e)),q=e=>v(u({},"__esModule",{value:!0}),e);var B={};U(B,{DarkModeToggle:()=>j});module.exports=q(B);var l=b(require("react"));var c=require("react");var f=require("react");function g(){let e=(0,f.useRef)(!0);return e.current?(e.current=!1,!0):e.current}var p=require("react");function k(e){let r=(0,p.useRef)();return(0,p.useEffect)(()=>{r.current=e}),r.current}function T(e,r){let i=g(),t=k(e),[a,d]=(0,c.useState)(!1),n=(0,c.useRef)();return(0,c.useEffect)(()=>{e!==t&&(d(!0),n.current&&clearTimeout(n.current),n.current=setTimeout(()=>{d(!1),n.current=void 0},r))},[e,t,r]),i?!0:a}var m=b(require("@emotion/styled")),s=250;function o(e){switch(e){case"sm":return 1;case"md":return 1.5;case"lg":return 2}}var h=m.default.div`
display: inline-flex;
align-items: center;
user-select: none;
-webkit-tap-highlight-color: transparent;
span {
transition: color ${s}ms ease-in-out;
padding: ${e=>8*o(e.size)}px
${e=>12*o(e.size)}px;
cursor: pointer;
font-size: ${e=>12*o(e.size)}px;
font-weight: 600;
text-transform: uppercase;
&:nth-of-type(1) {
&:hover {
color: ${e=>e.activeLabelColorOnHover};
}
&:active {
color: ${e=>e.activeLabelColorOnActive};
}
}
&:nth-of-type(2) {
&:hover {
color: ${e=>e.inactiveLabelColorOnHover};
}
&:active {
color: ${e=>e.inactiveLabelColorOnActive};
}
}
}
input {
position: relative;
overflow: hidden;
transition: all ${s}ms ease-in-out;
transition-property: box-shadow, background-color;
appearance: none;
margin: 0;
outline: none;
border-radius: ${e=>14*o(e.size)}px;
width: ${e=>48*o(e.size)}px;
height: ${e=>28*o(e.size)}px;
background-color: ${e=>e.inactiveTrackColor};
cursor: pointer;
user-select: none;
&:checked {
background-color: ${e=>e.activeTrackColor};
&:hover,
&:hover::after {
background-color: ${e=>e.activeTrackColorOnHover};
}
&:active,
&:active::after {
background-color: ${e=>e.activeTrackColorOnActive};
}
&::before {
left: ${e=>24*o(e.size)}px;
background-color: ${e=>e.activeThumbColor};
}
&::after {
top: ${e=>12*o(e.size)}px;
right: ${e=>2*o(e.size)}px;
width: ${e=>1*o(e.size)}px;
height: ${e=>1*o(e.size)}px;
border-radius: ${e=>.5*o(e.size)}px;
background-color: ${e=>e.activeTrackColor};
}
}
&:hover,
&:hover::after {
background-color: ${e=>e.inactiveTrackColorOnHover};
}
&:focus,
&:focus-visible {
box-shadow: 0 0 0 ${e=>2*o(e.size)}px
${e=>e.focusRingColor};
}
&:focus:not(:focus-visible) {
box-shadow: none;
}
&:active,
&:active::after {
background-color: ${e=>e.inactiveTrackColorOnActive};
}
&::before {
content: '';
position: absolute;
top: ${e=>4*o(e.size)}px;
left: ${e=>4*o(e.size)}px;
display: block;
transition: all ${s}ms ease-in-out;
transition-property: left, background-color;
width: ${e=>20*o(e.size)}px;
height: ${e=>20*o(e.size)}px;
border-radius: ${e=>12*o(e.size)}px;
background-color: ${e=>e.inactiveThumbColor};
}
&::after {
content: '';
position: absolute;
top: ${e=>-2*o(e.size)}px;
right: ${e=>2*o(e.size)}px;
display: block;
transition: all ${s}ms ease-in-out;
transition-property: top, right, width, height, border-radius,
background-color;
width: ${e=>32*o(e.size)}px;
height: ${e=>32*o(e.size)}px;
border-radius: ${e=>16*o(e.size)}px;
background-color: ${e=>e.inactiveTrackColor};
}
}
&[data-checked='false'] {
span {
color: ${e=>e.inactiveLabelColor};
&:nth-of-type(1) {
pointer-events: none;
}
}
}
&[data-checked='true'] {
span {
color: ${e=>e.activeLabelColor};
&:nth-of-type(2) {
pointer-events: none;
}
}
}
&[data-transition-disabled='true'] {
*,
*::before,
*::after {
transition-duration: 0ms;
}
}
`;function j({mode:e="dark",dark:r,light:i,onChange:t,size:a="sm",inactiveLabelColor:d="#b9bdc1",inactiveLabelColorOnHover:n="#fcfefe",inactiveLabelColorOnActive:$="#cdd1d5",activeLabelColor:x="#5b5e62",activeLabelColorOnHover:C="#404346",activeLabelColorOnActive:z="#010101",inactiveTrackColor:O="#dce0e3",inactiveTrackColorOnHover:y="#fcfefe",inactiveTrackColorOnActive:L="#cdd1d5",activeTrackColor:A="#404346",activeTrackColorOnHover:S="#2d2f31",activeTrackColorOnActive:R="#141516",inactiveThumbColor:w="#2d2f31",activeThumbColor:H="#dce0e3",focusRingColor:D="rgb(59 130 246 / 0.5)",ariaLabel:M}){let I=T(a,s);return l.createElement(h,{size:a,inactiveLabelColor:d,inactiveLabelColorOnHover:n,inactiveLabelColorOnActive:$,activeLabelColor:x,activeLabelColorOnHover:C,activeLabelColorOnActive:z,inactiveTrackColor:O,inactiveTrackColorOnHover:y,inactiveTrackColorOnActive:L,activeTrackColor:A,activeTrackColorOnHover:S,activeTrackColorOnActive:R,inactiveThumbColor:w,activeThumbColor:H,focusRingColor:D,"data-transition-disabled":I,"data-checked":e==="light","data-testid":"dark-mode-toggle"},r&&l.createElement("span",{onClick:()=>{t==null||t("dark")},"aria-hidden":"true"},r),l.createElement("input",{type:"checkbox",role:"switch",checked:e==="light","aria-label":M,onChange:P=>{t==null||t(P.target.checked?"light":"dark")}}),i&&l.createElement("span",{onClick:()=>{t==null||t("light")},"aria-hidden":"true"},i))}
//# sourceMappingURL=index.js.map