New icons for theme button.

assets/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44,837.55C335.89,611,288.08,273.54,418.71,0A734.31,734.31,0,0,0,215.54,143.73c-287.39,287.39-287.39,753.33,0,1040.72s753.33,287.4,1040.74,0A733.8,733.8,0,0,0,1400,981.29C1126.45,1111.92,789,1064.09,562.44,837.55Z"/></svg>

assets/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43,422.13a54.44,54.44,0,0,1-38.66-16L205,282.35A54.69,54.69,0,0,1,282.37,205L406.11,328.79a54.68,54.68,0,0,1-38.68,93.34Z"/><path d="M1156.3,1211a54.51,54.51,0,0,1-38.67-16L993.89,1071.21a54.68,54.68,0,1,1,77.34-77.33L1195,1117.65A54.7,54.7,0,0,1,1156.3,1211Z"/><path d="M243.7,1211A54.7,54.7,0,0,1,205,1117.65L328.74,993.89a54.69,54.69,0,0,1,77.36,77.32L282.37,1195A54.51,54.51,0,0,1,243.7,1211Z"/><path d="M1032.57,422.13a54.68,54.68,0,0,1-38.68-93.34L1117.61,205A54.69,54.69,0,0,1,1195,282.35L1071.23,406.11A54.44,54.44,0,0,1,1032.57,422.13Z"/><path d="M229.69,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M1345.31,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M700,1400a54.68,54.68,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.68,54.68,0,0,1,700,1400Z"/><path d="M700,284.38a54.7,54.7,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.7,54.7,0,0,1,700,284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>

assets/toggle-off.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 96c42.738 0 82.917 16.643 113.137 46.863S544 213.262 544 256s-16.643 82.917-46.863 113.137S426.738 416 384 416H192c-42.738 0-82.917-16.643-113.137-46.863S32 298.738 32 256s16.643-82.917 46.863-113.137S149.262 96 192 96h192m0-32H192C85.961 64 0 149.961 0 256s85.961 192 192 192h192c106.039 0 192-85.961 192-192S490.039 64 384 64zm-192 96c52.935 0 96 43.065 96 96s-43.065 96-96 96-96-43.065-96-96 43.065-96 96-96m0-32c-70.692 0-128 57.307-128 128s57.308 128 128 128 128-57.307 128-128-57.308-128-128-128z"/></svg>

assets/toggle-on.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M384 96c88.426 0 160 71.561 160 160 0 88.426-71.561 160-160 160H192c-88.426 0-160-71.561-160-160 0-88.425 71.561-160 160-160h192m0-32H192C85.961 64 0 149.961 0 256s85.961 192 192 192h192c106.039 0 192-85.961 192-192S490.039 64 384 64zm0 304c61.856 0 112-50.144 112-112s-50.144-112-112-112-112 50.144-112 112c0 28.404 10.574 54.339 27.999 74.082C320.522 353.335 350.548 368 384 368z"/></svg>

components/settings/ThemeButton.js

@@ -1,22 +1,44 @@
 import React from 'react';
+import { useTransition, animated } from 'react-spring';
 import Button from 'components/common/Button';
 import useTheme from 'hooks/useTheme';
-import ToggleOn from 'assets/toggle-on.svg';
-import ToggleOff from 'assets/toggle-off.svg';
+import Sun from 'assets/sun.svg';
+import Moon from 'assets/moon.svg';
+import styles from './ThemeButton.module.css';
+import Icon from '../common/Icon';
 
 export default function ThemeButton() {
   const [theme, setTheme] = useTheme();
 
+  const transitions = useTransition(theme, theme => theme, {
+    from: {
+      opacity: 0,
+      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
+    },
+    enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
+    leave: {
+      opacity: 0,
+      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
+    },
+  });
+
   function handleClick() {
     setTheme(theme === 'light' ? 'dark' : 'light');
   }
 
   return (
-    <Button
-      icon={theme === 'light' ? <ToggleOff /> : <ToggleOn />}
-      size="large"
-      variant="light"
-      onClick={handleClick}
-    />
+    <Button className={styles.button} variant="light" onClick={handleClick}>
+      {transitions.map(({ item, key, props }) =>
+        item === 'light' ? (
+          <animated.div key={key} style={props}>
+            <Icon icon={<Sun />} />
+          </animated.div>
+        ) : (
+          <animated.div key={key} style={props}>
+            <Icon icon={<Moon />} />
+          </animated.div>
+        ),
+      )}
+    </Button>
   );
 }

components/settings/ThemeButton.module.css

@@ -1,43 +1,3 @@
-.icon {
+.button svg {
   position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  line-height: 16px;
-}
-
-.sun {
-  height: 16px;
-  width: 16px;
-  border-radius: 100%;
-  background: var(--gray900);
-  z-index: 1;
-}
-
-.moon {
-  height: 16px;
-  width: 16px;
-  border-radius: 100%;
-  background: var(--gray900);
-}
-
-.moon:before {
-  content: '';
-  position: absolute;
-  height: 13px;
-  width: 13px;
-  left: -2px;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  border-radius: 100%;
-  background: var(--gray50);
-}
-
-.light .moon {
-  display: none;
-}
-
-.dark .sun {
-  display: none;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

styles/index.css

@@ -92,6 +92,10 @@ main {
   flex: 1;
 }
 
+svg {
+  shape-rendering: geometricPrecision;
+}
+
 #__next {
   display: flex;
   flex-direction: column;