✨ feat: update light/dark theme switch

Include a new switch button that allows users to
preview their README files for both light and
dark themes (default theme is dark one).

This feature aims to reduce the issue with black
colored icons (mostly devicons / simple icons)
being barely visible on the dark canvas. Also it
is a nice UX enhancement for those users who
simply prefer light theming.

Fixes: maurodesouza#44

Author: Martimex

src/app/events/handles/app.ts

@@ -0,0 +1,17 @@
+import { themes } from "styles"
+import { Events } from 'types';
+
+import { BaseEventHandle } from './base';
+
+class AppHandleEvents extends BaseEventHandle {
+    constructor() {
+    super();
+
+    }
+
+    theme = (theme: keyof typeof themes) => {
+        this.emit(Events.APP_SET_THEME, theme);
+    }
+}
+
+export { AppHandleEvents };

src/app/events/handles/canvas.ts

@@ -45,10 +45,6 @@ class CanvasHandleEvents extends BaseEventHandle {
   currentSection = (sectionId: string) => {
     this.emit(Events.CANVAS_SET_CURRENT_SECTION, sectionId);
   };
-
-  switchTheme = (theme: boolean) => {
-    this.emit(Events.CANVAS_SWITCH_THEME, theme);
-  };
 }
 
 export { CanvasHandleEvents };

src/app/events/handles/index.ts

@@ -1,3 +1,4 @@
+import { AppHandleEvents } from './app';
 import { CanvasHandleEvents } from './canvas';
 import { ContextMenuHandleEvents } from './context-menu';
 import { SettingsHandleEvents } from './settings';
@@ -8,6 +9,7 @@ import { TemplateHandleEvents } from './template';
 import { ExtensionsHandleEvents } from './extensions';
 
 class Handles {
+  app = new AppHandleEvents();
   canvas = new CanvasHandleEvents();
   contextmenu = new ContextMenuHandleEvents();
   settings = new SettingsHandleEvents();

src/components/canvas/index.tsx

@@ -1,4 +1,5 @@
 import { MouseEvent, useMemo, useState } from 'react';
+import { useTheme } from 'styled-components';
 import { Reorder } from 'framer-motion';
 
 import {
@@ -26,9 +27,11 @@ import { CanvasErrorFallback } from './error';
 
 const Canvas = () => {
   const { extensions } = useExtensions();
-  const { sections, currentSection, previewMode, lightTheme } = useCanvas();
+  const { sections, currentSection, previewMode } = useCanvas();
   const [hasError, setHasError] = useState(false);
 
+  const currentTheme = useTheme();
+
   const sectionIds = sections.map(section => section.id);
   const hasSection = !!sections.length;
 
@@ -38,49 +41,56 @@ const Canvas = () => {
     !previewMode && events.contextmenu.open(ContextMenus.SECTION, e);
   };
 
+  const getNextThemeName = (themeName: string) => {
+    if(themeName === 'dark') return 'light';
+    return 'dark';
+  }
+
+  const handleSetTheme  = () => {
+    events.app.theme(getNextThemeName(currentTheme.NAME));
+  }
+
   return (
     <OnlyClientSide>
       <S.Container
         onContextMenu={handleOpenContextMenu}
         fullHeight={hasError || !hasSection}
-        isLightTheme={lightTheme}
       >
-        <S.Wrapper isLeftAligned={false}>
+        <S.Wrapper>
           <Tooltip
-            position="right"
-            content={`Preview: ${lightTheme ? 'dark' : 'light'} mode`}
+            position="left"
+            content={`Preview: ${getNextThemeName(currentTheme.NAME)} mode`}
             variant="info"
           >
             <S.Button
-              aria-label={`Preview: ${lightTheme ? 'dark' : 'light'} mode`}
-              onClick={() => events.canvas.switchTheme(lightTheme)}
-              variant="success"
+              aria-label={`Preview: ${getNextThemeName(currentTheme.NAME)} mode`}
+              onClick={() => handleSetTheme()}
             >
-              {lightTheme ? <MoonIcon size={16} /> : <SunIcon size={16} />}
+              {getNextThemeName(currentTheme.NAME) === 'dark' ? <MoonIcon size={16} /> : <SunIcon size={16} />}
             </S.Button>
           </Tooltip>
+          
+          {hasSection && !previewMode && (
+            
+              <Tooltip position="left" content="Clear canvas" variant="danger">
+                <S.Button
+                  aria-label="Clear canvas"
+                  onClick={events.canvas.clear}
+                  variant="warn"
+                >
+                  <TrashIcon size={16} />
+                </S.Button>
+              </Tooltip>
+            
+          )}
         </S.Wrapper>
 
-        {hasSection && !previewMode && (
-          <S.Wrapper isLeftAligned={true}>
-            <Tooltip position="left" content="Clear canvas" variant="danger">
-              <S.Button
-                aria-label="Clear canvas"
-                onClick={events.canvas.clear}
-                variant="warn"
-              >
-                <TrashIcon size={16} />
-              </S.Button>
-            </Tooltip>
-          </S.Wrapper>
-        )}
-
         <ErrorBoundary
           fallback={<CanvasErrorFallback />}
           onChange={setHasError}
         >
           {previewMode && (
-            <S.Wrapper isLeftAligned={true}>
+            <S.Wrapper>
               <Tooltip position="left" content="Use template" variant="success">
                 <S.Button
                   aria-label="Use template"

src/components/canvas/styles.ts

@@ -2,15 +2,10 @@ import styled, { css, DefaultTheme } from 'styled-components';
 
 type ContainerProps = {
   fullHeight: boolean;
-  isLightTheme: boolean;
-};
-
-type WrapperProps = {
-  isLeftAligned: boolean;
 };
 
 export const Container = styled.div<ContainerProps>`
-  ${({ theme, fullHeight, isLightTheme }) => css`
+  ${({ theme, fullHeight }) => css`
     padding: ${theme.spacings.xlarge};
     border-radius: ${theme.border.radius};
     border-width: ${theme.border.width};
@@ -21,9 +16,7 @@ export const Container = styled.div<ContainerProps>`
     padding-right: ${theme.spacings.small};
     height: ${fullHeight ? '100%' : 'auto'};
 
-    background: ${isLightTheme && '#eee'};
-    color: ${isLightTheme && theme.colors.bg};
-    transition: color 0.25s linear, background 0.25s linear;
+    border: 2px solid ${theme.colors.border};
 
     &::-webkit-scrollbar {
       width: 0.8rem;
@@ -40,8 +33,8 @@ export const Container = styled.div<ContainerProps>`
   `}
 `;
 
-export const Wrapper = styled.div<WrapperProps>`
-  ${({ theme, isLeftAligned }) => css`
+export const Wrapper = styled.div`
+  ${({ theme }) => css`
     width: 3rem;
     position: absolute;
     display: flex;
@@ -53,7 +46,7 @@ export const Wrapper = styled.div<WrapperProps>`
     color: ${theme.colors.text};
 
     top: ${theme.spacings.medium};
-    left: ${isLeftAligned ? '0%' : '100%'};
+    left: 0;
     transform: translateX(-50%);
     transition: 0.3s;
 

src/contexts/canvas.tsx

@@ -18,7 +18,6 @@ type CanvasContextData = {
   sections: CanvasSection[];
   currentSection?: CanvasSection;
   previewMode: boolean;
-  lightTheme: boolean;
 };
 
 type CanvasProviderProps = {
@@ -33,7 +32,6 @@ const CanvasProvider = ({ children }: CanvasProviderProps) => {
     []
   );
 
-  const [lightTheme, setLightTheme] = useState(false);
   const [currentSection, setCurrentSection] = useState<CanvasSection>();
   const [previewTemplate, setPreviewTemplate] = useState<CanvasSection[]>([]);
 
@@ -137,10 +135,6 @@ const CanvasProvider = ({ children }: CanvasProviderProps) => {
 
   const handleClearCanvas = () => setSections([]);
 
-  const handleSwitchTheme = () => {
-    setLightTheme(!lightTheme);
-  };
-
   useEffect(() => {
     // Canvas events
 
@@ -150,7 +144,6 @@ const CanvasProvider = ({ children }: CanvasProviderProps) => {
     events.on(Events.CANVAS_REORDER_SECTIONS, handleReorderSections);
     events.on(Events.CANVAS_DUPLICATE_SECTION, handleDuplicateSection);
     events.on(Events.CANVAS_CLEAR_SECTIONS, handleClearCanvas);
-    events.on(Events.CANVAS_SWITCH_THEME, handleSwitchTheme);
 
     return () => {
       events.off(Events.CANVAS_EDIT_SECTION, handleEditSection);
@@ -159,9 +152,8 @@ const CanvasProvider = ({ children }: CanvasProviderProps) => {
       events.off(Events.CANVAS_REORDER_SECTIONS, handleReorderSections);
       events.off(Events.CANVAS_DUPLICATE_SECTION, handleDuplicateSection);
       events.off(Events.CANVAS_CLEAR_SECTIONS, handleClearCanvas);
-      events.off(Events.CANVAS_SWITCH_THEME, handleSwitchTheme);
     };
-  }, [sections, currentSection, lightTheme]);
+  }, [sections, currentSection]);
 
   useEffect(() => {
     // Canvas events
@@ -194,7 +186,6 @@ const CanvasProvider = ({ children }: CanvasProviderProps) => {
         sections: canvas,
         currentSection,
         previewMode,
-        lightTheme: lightTheme,
       }}
     >
       {children}

src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useEffect } from 'react';
+import React, { MouseEvent, useEffect, useState, useRef } from 'react';
 import Head from 'next/head';
 
 import { AppProps } from 'next/app';
@@ -10,22 +10,41 @@ import { config, events } from 'app';
 import { ContextMenu, Modal } from 'components';
 
 import { Features } from 'features';
-import { theme, GlobalStyles } from 'styles';
+import { themes, GlobalStyles } from 'styles';
+import { Events } from 'types';
 
 const App = ({ Component, pageProps }: AppProps) => {
   const appUrl = config.general.urls.app;
 
+  const [currTheme, setCurrTheme] = useState(themes['dark']);
+  const isTransition = useRef(false);
+
   const handlePreventRightClick = (e: MouseEvent) => {
     e.preventDefault();
 
     events.contextmenu.close();
   };
 
+  const handleSetTheme = async(e: CustomEvent) => {
+    document.querySelectorAll(`ul`).forEach(el => el.classList.add('no-animate'));
+    if(!isTransition.current) {
+      isTransition.current = true;
+      setCurrTheme(themes[e.detail]);
+      document.body.animate([{}], { duration: 450, iterations: 1, direction: 'alternate'}); 
+      Promise.all(document.body.getAnimations().map((animation) => animation.finished)).then(async() => {
+        return new Promise((resolve) => 
+          resolve(document.querySelectorAll(`ul`).forEach(el => el.classList.remove('no-animate')))
+        ).then(() => isTransition.current = false)
+      });
+  }}
+
   useEffect(() => {
     events.on('contextmenu', handlePreventRightClick);
+    events.on(Events.APP_SET_THEME, handleSetTheme);
 
     return () => {
       events.on('contextmenu', handlePreventRightClick);
+      events.off(Events.APP_SET_THEME, handleSetTheme);
     };
   }, []);
 
@@ -34,7 +53,7 @@ const App = ({ Component, pageProps }: AppProps) => {
     'Beautify your github profile with this amazing tool, creating the readme your way in a simple and fast way! The best profile readme generator you will find!';
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={currTheme}>
       <Head>
         <title>{title}</title>
 

src/styles/global.ts

@@ -15,11 +15,21 @@ const GlobalStyles = createGlobalStyle`
 
   html {
     font-size: 10px;
+    transition: background-color .45s linear !important;
+  }
+
+  ul.no-animate li {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+    transform: none !important;
   }
 
   ul,
   li {
     list-style: none;
+    transition: 0 all linear;
   }
 
   a {

src/styles/themes/default.ts

@@ -1,4 +1,6 @@
 const defaultTheme = {
+  NAME: 'dark',
+
   grid: {
     container: '104rem',
   },

src/styles/themes/index.ts

@@ -1 +1,16 @@
-export { defaultTheme as theme } from './default';
+import { DefaultTheme } from 'styled-components';
+import { defaultTheme } from './default';
+import { lightTheme } from './light';
+
+const themes: ThemeObject = { 
+    dark: defaultTheme,
+    light: lightTheme
+}
+
+type ThemeObject = {
+    [key: string]: DefaultTheme;
+    dark: DefaultTheme,
+    light: DefaultTheme
+}
+
+export { themes }