feat: dark mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-iconly",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "React component for Iconly icons",
   "author": "jrgarciadev",
   "license": "MIT",

src/lib/withIcon.js

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef } from 'react'
+import React, { memo } from 'react'
 import { getSize, getThemeProp, getStroke, getOpacity } from './utils'
 import { IconlyContext } from './context'
 import PropTypes from 'prop-types'
@@ -33,7 +33,6 @@ function withIcon(Component) {
 
       return (
         <svg
-          ref={this.props.innerRef}
           xmlns='http://www.w3.org/2000/svg'
           width={iconSize}
           height={iconSize}
@@ -120,10 +119,7 @@ function withIcon(Component) {
   }
 
   const MemoIcon = memo(IconWrapper)
-  const forwardedIcon = forwardRef((props, ref) => (
-    <MemoIcon innerRef={ref} {...props} />
-  ))
-  return forwardedIcon
+  return MemoIcon
 }
 
 export default withIcon

website/package.json

@@ -31,14 +31,15 @@
     "p-iteration": "^1.1.8",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-iconly": "^1.1.1",
+    "react-iconly": "^2.2.2",
     "react-instantsearch-dom": "^6.8.2",
     "react-outside-click-handler": "^1.3.0",
     "react-tippy": "^1.4.0",
     "react-virtualized": "^9.22.2",
     "styled-components": "^5.2.0",
     "styled-tools": "^1.7.2",
-    "svgo": "^1.3.2"
+    "svgo": "^1.3.2",
+    "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",

website/src/components/Badge/index.js

@@ -4,7 +4,7 @@ import { StyledBadge } from './styles'
 
 const Badge = ({ label, onClick, ...props }) => {
   return (
-    <StyledBadge onClick={isFunction(onClick) && onClick} {...props}>
+    <StyledBadge onClick={isFunction(onClick) ? onClick : undefined} {...props}>
       {label || 'Badge'}
     </StyledBadge>
   )

website/src/components/Checkbox/styles.js

@@ -17,10 +17,10 @@ export const CheckboxInput = styled.input`
 
   &:hover ~ label:before {
     background-color: ${(props) => props.theme.bg.default};
-    border-color: rgba(0, 0, 0, 0.4);
+    border-color: ${(props) => props.theme.accents.a6};
   }
   &:focus ~ label:before {
-    border-color: rgba(0, 0, 0, 0.2);
+    border-color: ${(props) => props.theme.accents.a6};
     box-shadow: 0 0 0 2px ${(props) => hexa(props.theme.colors.primary, 0.6)};
   }
   &:checked ~ label:before {
@@ -35,7 +35,7 @@ export const CheckboxInput = styled.input`
   &:checked ~ label:after {
     top: 0.4rem;
     left: 1.5rem;
-    background-color: ${(props) => props.theme.bg.default};
+    background-color: ${(props) => props.theme.colors.white};
     border-color: ${(props) => props.theme.bg.default};
   }
   &:disabled ~ label {
@@ -44,7 +44,7 @@ export const CheckboxInput = styled.input`
   }
   &:disabled ~ label:before {
     background-color: ${(props) => props.theme.bg.default};
-    border-color: ${(props) => hexa(props.theme.bg.reverse, 0.3)};
+    border-color: ${(props) => props.theme.accents.a6};
   }
   &:disabled:checked ~ label:before {
     background-color: ${(props) => props.theme.colors.primary};
@@ -88,7 +88,7 @@ export const CheckboxLabel = styled.label`
     top: 0;
     left: 0;
     background-color: ${(props) => props.theme.bg.default};
-    border: 1px solid ${(props) => hexa(props.theme.bg.reverse, 0.3)};
+    border: 1px solid ${(props) => props.theme.accents.a6};
     border-radius: 3rem;
   }
   &:after {
@@ -98,8 +98,8 @@ export const CheckboxLabel = styled.label`
     width: 1.6rem;
     top: 0.4rem;
     left: 0.5rem;
-    background-color: ${(props) => hexa(props.theme.bg.reverse, 0.2)};
-    border: 0 solid ${(props) => hexa(props.theme.bg.reverse, 0.2)};
+    background-color: ${(props) => props.theme.accents.a6};
+    border: 0 solid ${(props) => props.theme.accents.a6};
     border-radius: 50%;
   }
 

website/src/components/Icon/index.js

@@ -1,19 +1,25 @@
 import { useContext } from 'react'
 import { StyledIcon } from './styles'
 import { IconDataContext } from '@lib/context'
+import { Iconly } from 'react-iconly'
 import * as gtag from '@lib/gtag'
+import useDarkMode from 'use-dark-mode'
 
 const Icon = (icon) => {
   const { updateIcon } = useContext(IconDataContext)
+  const darkMode = useDarkMode()
   const handleClick = () => {
     updateIcon(icon)
     gtag.event({ action: 'selected', category: 'icon', label: icon.name })
   }
   return (
     <StyledIcon
+      set={icon.set}
       onClick={handleClick}
-      dangerouslySetInnerHTML={{ __html: icon.svgPath }}
-    />
+      isDarkMode={darkMode.value}
+    >
+      <Iconly name={icon.componentName} set={icon.set} />
+    </StyledIcon>
   )
 }
 

website/src/components/Icon/styles.js

@@ -1,4 +1,5 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+import { ifProp, prop } from 'styled-tools'
 
 export const StyledIcon = styled.div`
   ${({ theme }) => theme.mixins.flexCenter};
@@ -16,6 +17,18 @@ export const StyledIcon = styled.div`
   &:active {
     transform: scale(0.8);
   }
+  ${ifProp(
+    'isDarkMode',
+    css`
+      box-shadow: none;
+      background: ${prop('theme.accents.a8')};
+      border: 1px solid ${prop('theme.accents.a7')};
+      &:hover,
+      &:focus {
+        border-color: ${prop('theme.colors.primary')};
+      }
+    `
+  )}
   @media (max-width: ${(props) => props.theme.breakpoints.sm}) {
     width: 60px;
     height: 60px;

website/src/components/IconCode/styles.js

@@ -1,9 +1,8 @@
 import styled from 'styled-components'
-import { hexa } from '@utils'
 
 export const StyledCodeContainer = styled.code`
   ${({ theme }) => theme.mixins.flexCenter};
-  background: ${({ theme }) => hexa(theme.colors.primary, 0.25)};
+  background: ${({ theme }) => theme.colors.accent2};
   border-radius: ${({ theme }) => theme.borderRadius};
   padding: 0 14px;
   height: 50px;

website/src/components/IconDetail/index.js

@@ -30,7 +30,6 @@ const IconDetail = () => {
           svgPath={icon?.svgPath}
           set={icon?.set}
         />
-
         <Tooltip position='top' content='Download'>
           <div className='download' onClick={handleDownload}>
             <Download set='bulk' primaryColor='white' />

website/src/components/IconDetail/styles.js

@@ -12,7 +12,7 @@ export const StyledContainer = styled.div`
   margin: 0 20%;
   min-height: 100px;
   border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.bg.reverse};
+  background: ${({ theme }) => theme.colors.accent5};
   transition: ${({ theme }) => theme.transitions.default};
   overflow: auto;
   p {

website/src/components/IconSets/index.js

@@ -11,7 +11,7 @@ const IconSets = ({ items, refine }) => {
         {items.map((item, i) => (
           <Tabs.Item
             key={i}
-            badgeText={item.label === 'curved' && 'New'}
+            badgeText={item.label === 'curved' ? 'New' : ''}
             label={startCase(item.label)}
             value={item.label}
           />

website/src/components/Icons/index.js

@@ -0,0 +1,2 @@
+export { default as Moon } from './moon'
+export { default as Sun } from './sun'

website/src/components/Icons/moon.js

@@ -0,0 +1,51 @@
+/* eslint-disable max-len */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { withTheme } from 'styled-components'
+
+function Moon({ theme, fill, filled, size, height, width, label, ...props }) {
+  if (filled) {
+    return (
+      <svg
+        viewBox='0 0 512 512'
+        width={size || width || 24}
+        height={size || height || 24}
+        {...props}
+      >
+        <path
+          fill={fill || theme.colors.primary}
+          d='M152.62 126.77c0-33 4.85-66.35 17.23-94.77C87.54 67.83 32 151.89 32 247.38 32 375.85 136.15 480 264.62 480c95.49 0 179.55-55.54 215.38-137.85-28.42 12.38-61.8 17.23-94.77 17.23-128.47 0-232.61-104.14-232.61-232.61z'
+        />
+      </svg>
+    )
+  }
+  return (
+    <svg
+      viewBox='0 0 512 512'
+      width={size || width || 24}
+      height={size || height || 24}
+      {...props}
+    >
+      <path
+        d='M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z'
+        fill='none'
+        stroke={fill || theme.accents.a3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={32}
+      />
+    </svg>
+  )
+}
+
+Moon.propTypes = {
+  theme: PropTypes.object,
+  filled: PropTypes.bool,
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  label: PropTypes.string
+}
+
+export default withTheme(Moon)

website/src/components/Icons/sun.js

@@ -0,0 +1,61 @@
+/* eslint-disable max-len */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { withTheme } from 'styled-components'
+
+function Sun({ theme, fill, filled, size, height, width, label, ...props }) {
+  if (filled) {
+    return (
+      <svg
+        viewBox='0 0 512 512'
+        width={size || width || 24}
+        height={size || height || 24}
+        {...props}
+      >
+        <path
+          fill={fill || theme.colors.primary}
+          d='M256 118a22 22 0 01-22-22V48a22 22 0 0144 0v48a22 22 0 01-22 22zM256 486a22 22 0 01-22-22v-48a22 22 0 0144 0v48a22 22 0 01-22 22zM369.14 164.86a22 22 0 01-15.56-37.55l33.94-33.94a22 22 0 0131.11 31.11l-33.94 33.94a21.93 21.93 0 01-15.55 6.44zM108.92 425.08a22 22 0 01-15.55-37.56l33.94-33.94a22 22 0 1131.11 31.11l-33.94 33.94a21.94 21.94 0 01-15.56 6.45zM464 278h-48a22 22 0 010-44h48a22 22 0 010 44zM96 278H48a22 22 0 010-44h48a22 22 0 010 44zM403.08 425.08a21.94 21.94 0 01-15.56-6.45l-33.94-33.94a22 22 0 0131.11-31.11l33.94 33.94a22 22 0 01-15.55 37.56zM142.86 164.86a21.89 21.89 0 01-15.55-6.44l-33.94-33.94a22 22 0 0131.11-31.11l33.94 33.94a22 22 0 01-15.56 37.55zM256 358a102 102 0 11102-102 102.12 102.12 0 01-102 102z'
+        />
+      </svg>
+    )
+  }
+  return (
+    <svg
+      viewBox='0 0 512 512'
+      width={size || width || 24}
+      height={size || height || 24}
+      {...props}
+    >
+      <path
+        fill='none'
+        stroke={fill || theme.accents.a3}
+        strokeLinecap='round'
+        strokeMiterlimit={10}
+        strokeWidth={32}
+        d='M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94'
+      />
+      <circle
+        cx={256}
+        cy={256}
+        r={80}
+        fill='none'
+        stroke={fill || theme.accents.a3}
+        strokeLinecap='round'
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+    </svg>
+  )
+}
+
+Sun.propTypes = {
+  theme: PropTypes.object,
+  filled: PropTypes.bool,
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  label: PropTypes.string
+}
+
+export default withTheme(Sun)

website/src/components/Search/index.js

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { Search as SearchIcon } from 'react-iconly'
-// import { Select } from '@components'
+import useDarkMode from 'use-dark-mode'
 import { withTheme } from 'styled-components'
 import { connectSearchBox } from 'react-instantsearch-dom'
 import { IconDataContext } from '@lib/context'
@@ -13,13 +13,15 @@ import {
 
 const Search = ({ theme, currentRefinement, refine }) => {
   const { removeIcon } = useContext(IconDataContext)
+  const darkMode = useDarkMode()
   return (
     <StyledForm noValidate action='' role='search'>
       <StyledIconContainer>
         <SearchIcon primaryColor={theme.colors.accent3} />
       </StyledIconContainer>
       <StyledInput
         autoFocus
+        isDarkMode={darkMode.value}
         type='search'
         onFocus={removeIcon}
         focusShortcuts={['s', '/']}

website/src/components/Search/styles.js

@@ -1,4 +1,5 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+import { ifProp, prop } from 'styled-tools'
 
 export const StyledForm = styled.form`
   position: relative;
@@ -22,7 +23,6 @@ export const StyledIconContainer = styled.div`
   width: 14%;
   height: 100%;
   overflow: hidden;
-}
 `
 
 export const StyledInput = styled.input`
@@ -32,11 +32,10 @@ export const StyledInput = styled.input`
   padding: 10px 0px;
   padding-left: 70px;
   padding-right: 220px;
-  background: white;
+  background: ${prop('theme.bg.default')};
   font-size: ${(props) => props.theme.fontSize.lg};
   border-radius: ${(props) => props.theme.borderRadius};
   box-shadow: ${(props) => props.theme.shadows.medium};
-  transition: all 0.4s ease;
   ::placeholder {
     color: ${(props) => props.theme.colors.accent3};
     opacity: 0.6;
@@ -46,6 +45,20 @@ export const StyledInput = styled.input`
     padding-right: 140px;
     font-size: ${(props) => props.theme.fontSize.md};
   }
+
+  ${ifProp(
+    'isDarkMode',
+    css`
+      box-shadow: none;
+      color: ${prop('theme.bg.reverse')};
+      caret-color: ${prop('theme.colors.primary')};
+      border: 1.8px solid ${prop('theme.accents.a5')};
+      &:hover,
+      &:focus {
+        border-color: ${prop('theme.colors.primary')};
+      }
+    `
+  )}
 `
 
 export const StyledSelectContainer = styled.div`