✨ feat: add 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
Martimex · Feb 7, 2024 · 34b65a7 · 34b65a7
1 parent e49da3c
commit 34b65a7
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 9 deletions.
diff --git a/src/app/events/handles/canvas.ts b/src/app/events/handles/canvas.ts
@@ -45,6 +45,10 @@ 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 };
diff --git a/src/components/canvas/index.tsx b/src/components/canvas/index.tsx
@@ -4,6 +4,8 @@ import { Reorder } from 'framer-motion';
 import {
   Trash as TrashIcon,
   Check as CheckIcon,
+  Moon as MoonIcon,
+  Sun as SunIcon,
   X as CloseIcon,
 } from '@styled-icons/feather';
 
@@ -24,7 +26,7 @@ import { CanvasErrorFallback } from './error';
 
 const Canvas = () => {
   const { extensions } = useExtensions();
-  const { sections, currentSection, previewMode } = useCanvas();
+  const { sections, currentSection, previewMode, lightTheme } = useCanvas();
   const [hasError, setHasError] = useState(false);
 
   const sectionIds = sections.map(section => section.id);
@@ -41,9 +43,26 @@ const Canvas = () => {
       <S.Container
         onContextMenu={handleOpenContextMenu}
         fullHeight={hasError || !hasSection}
+        isLightTheme={lightTheme}
       >
+        <S.Wrapper isLeftAligned={false}>
+          <Tooltip
+            position="right"
+            content={`Preview: ${lightTheme ? 'dark' : 'light'} mode`}
+            variant="info"
+          >
+            <S.Button
+              aria-label={`Preview: ${lightTheme ? 'dark' : 'light'} mode`}
+              onClick={() => events.canvas.switchTheme(lightTheme)}
+              variant="success"
+            >
+              {lightTheme ? <MoonIcon size={16} /> : <SunIcon size={16} />}
+            </S.Button>
+          </Tooltip>
+        </S.Wrapper>
+
         {hasSection && !previewMode && (
-          <S.Wrapper>
+          <S.Wrapper isLeftAligned={true}>
             <Tooltip position="left" content="Clear canvas" variant="danger">
               <S.Button
                 aria-label="Clear canvas"
@@ -61,7 +80,7 @@ const Canvas = () => {
           onChange={setHasError}
         >
           {previewMode && (
-            <S.Wrapper>
+            <S.Wrapper isLeftAligned={true}>
               <Tooltip position="left" content="Use template" variant="success">
                 <S.Button
                   aria-label="Use template"

diff --git a/src/components/canvas/styles.ts b/src/components/canvas/styles.ts
@@ -2,10 +2,15 @@ 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 }) => css`
+  ${({ theme, fullHeight, isLightTheme }) => css`
     padding: ${theme.spacings.xlarge};
     border-radius: ${theme.border.radius};
     border-width: ${theme.border.width};
@@ -16,6 +21,10 @@ 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;
+
     &::-webkit-scrollbar {
       width: 0.8rem;
       overflow: hidden;
@@ -31,8 +40,8 @@ export const Container = styled.div<ContainerProps>`
   `}
 `;
 
-export const Wrapper = styled.div`
-  ${({ theme }) => css`
+export const Wrapper = styled.div<WrapperProps>`
+  ${({ theme, isLeftAligned }) => css`
     width: 3rem;
     position: absolute;
     display: flex;
@@ -44,7 +53,7 @@ export const Wrapper = styled.div`
     color: ${theme.colors.text};
 
     top: ${theme.spacings.medium};
-    left: 0;
+    left: ${isLeftAligned ? '0%' : '100%'};
     transform: translateX(-50%);
     transition: 0.3s;
 
@@ -75,6 +84,12 @@ const buttonModifiers = {
       color: ${theme.colors.secondary};
     }
   `,
+
+  info: (theme: DefaultTheme) => css`
+    &:hover {
+      color: ${theme.colors.primary};
+    }
+  `,
 };
 
 export const Button = styled.button<ButtonsProps>`

diff --git a/src/contexts/canvas.tsx b/src/contexts/canvas.tsx
@@ -18,6 +18,7 @@ type CanvasContextData = {
   sections: CanvasSection[];
   currentSection?: CanvasSection;
   previewMode: boolean;
+  lightTheme: boolean;
 };
 
 type CanvasProviderProps = {
@@ -32,6 +33,7 @@ const CanvasProvider = ({ children }: CanvasProviderProps) => {
     []
   );
 
+  const [lightTheme, setLightTheme] = useState(false);
   const [currentSection, setCurrentSection] = useState<CanvasSection>();
   const [previewTemplate, setPreviewTemplate] = useState<CanvasSection[]>([]);
 
@@ -135,6 +137,10 @@ const CanvasProvider = ({ children }: CanvasProviderProps) => {
 
   const handleClearCanvas = () => setSections([]);
 
+  const handleSwitchTheme = () => {
+    setLightTheme(!lightTheme);
+  };
+
   useEffect(() => {
     // Canvas events
 
@@ -144,6 +150,7 @@ 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);
@@ -152,8 +159,9 @@ 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]);
+  }, [sections, currentSection, lightTheme]);
 
   useEffect(() => {
     // Canvas events
@@ -182,7 +190,12 @@ const CanvasProvider = ({ children }: CanvasProviderProps) => {
 
   return (
     <CanvasContext.Provider
-      value={{ sections: canvas, currentSection, previewMode }}
+      value={{
+        sections: canvas,
+        currentSection,
+        previewMode,
+        lightTheme: lightTheme,
+      }}
     >
       {children}
     </CanvasContext.Provider>

diff --git a/src/types/events.ts b/src/types/events.ts
@@ -6,6 +6,7 @@ export enum Events {
   CANVAS_REORDER_SECTIONS = 'canvas.section.reorder',
   CANVAS_DUPLICATE_SECTION = 'canvas.section.duplicate',
   CANVAS_CLEAR_SECTIONS = 'canvas.clear',
+  CANVAS_SWITCH_THEME = 'canvas.switchTheme',
 
   TEMPLATE_USE = 'template.use',
   TEMPLATE_PREVIEW = 'template.preview',