Adjust UI to Support Dark Mode

.storybook/preview.tsx

@@ -60,7 +60,7 @@ const Panel = styled.div<{ orientation: "right" | "bottom" }>(
     // Add a backdrop to the outline because appBorderColor is semi-transparent
     boxShadow: `0 0 0 1px ${theme.background.content}`,
     background: theme.background.content,
-    color: theme.color.defaultText,
+    color: theme.base === 'light' ? theme.color.mediumdark : theme.color.light,
     fontSize: theme.typography.size.s2 - 1,
   })
 );

src/components/BrowserSelector.tsx

@@ -1,6 +1,6 @@
 import { TooltipNote, WithTooltip } from "@storybook/components";
 import { ChevronDownIcon } from "@storybook/icons";
-import { styled } from "@storybook/theming";
+import { styled, useTheme } from "@storybook/theming";
 import React, { ComponentProps } from "react";
 
 import { Browser, BrowserInfo, ComparisonResult } from "../gql/graphql";
@@ -25,18 +25,18 @@ const IconWrapper = styled.div(({ theme }) => ({
   gap: 6,
   height: 16,
   margin: "6px 7px",
-  color: `${theme.color.defaultText}99`,
   svg: {
     verticalAlign: "top",
   },
 }));
 
-const Label = styled.span({
+const Label = styled.span(({ theme }) => ({
   display: "none",
   "@container (min-width: 300px)": {
     display: "inline-block",
   },
-});
+  color: theme.base === 'light' ? `${theme.color.defaultText}99` : theme.color.light,
+}));
 
 type BrowserData = Pick<BrowserInfo, "id" | "key" | "name">;
 
@@ -53,6 +53,7 @@ export const BrowserSelector = ({
   browserResults,
   onSelectBrowser,
 }: BrowserSelectorProps) => {
+  const theme = useTheme()
   const aggregate = aggregateResult(browserResults.map(({ result }) => result));
   if (!aggregate) return null;
 
@@ -91,7 +92,7 @@ export const BrowserSelector = ({
         <TooltipMenu placement="bottom" links={links}>
           {icon}
           <Label>{selectedBrowser.name}</Label>
-          <ChevronDownIcon style={{ width: 10, height: 10 }} />
+          <ChevronDownIcon style={{ width: 10, height: 10 }} color={theme.base === 'light' ? `${theme.color.defaultText}99` : theme.color.light}/>
         </TooltipMenu>
       ) : (
         <IconWrapper>

src/components/Button.tsx

@@ -30,8 +30,8 @@ export const Button = styled(BaseButton)<{
         boxShadow: "none",
         padding: 2,
         fontWeight: "normal",
-        color: theme.color.defaultText,
-        opacity: 0.5,
+        color: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
+        opacity: 0.6,
         transition: "opacity 150ms ease-out",
         "&:hover, &:focus": {
           opacity: 0.9,

src/components/Code.tsx

@@ -0,0 +1,9 @@
+import { Code as SBCode } from "@storybook/components";
+import {styled} from "@storybook/theming";
+
+export const Code = styled(SBCode)(({ theme }) => ({
+    color: theme.base === "dark" ? theme.color.lighter : theme.color.darker,
+    border: `1px solid ${theme.base === "dark" ? theme.color.mediumdark : "#ECF4F9"}`,
+    backgroundColor: theme.base === "dark" ? theme.color.dark : "#F7FAFC",
+    fontSize: "12px",
+  }));

src/components/Heading.tsx

@@ -1,7 +1,8 @@
 import { styled } from "@storybook/theming";
 
-export const Heading = styled.h1({
+export const Heading = styled.h1(({theme}) => ({
   margin: 0,
   fontSize: "1em",
   fontWeight: "bold",
-});
+  color: theme.base === 'light' ? theme.color.defaultText : theme.color.lightest,
+}));

src/components/ModeSelector.tsx

@@ -1,6 +1,6 @@
 import { TooltipNote, WithTooltip } from "@storybook/components";
 import { ChevronDownIcon, DiamondIcon } from "@storybook/icons";
-import { styled } from "@storybook/theming";
+import { styled, useTheme } from "@storybook/theming";
 import React from "react";
 
 import { ComparisonResult, TestMode } from "../gql/graphql";
@@ -17,15 +17,19 @@ const IconWrapper = styled.div(({ theme }) => ({
   color: `${theme.color.defaultText}99`,
   svg: {
     verticalAlign: "top",
+    path: {
+      fill: theme.base === 'light' ? `${theme.color.defaultText}99` : theme.color.light,
+    }
   },
 }));
 
-const Label = styled.span({
+const Label = styled.span(({ theme }) => ({
   display: "none",
   "@container (min-width: 300px)": {
     display: "inline-block",
   },
-});
+  color: theme.base === 'light' ? `${theme.color.defaultText}99` : theme.color.light,
+}));
 
 type ModeData = Pick<TestMode, "name">;
 
@@ -44,10 +48,11 @@ export const ModeSelector = ({
   onSelectMode,
   selectedMode,
 }: ModeSelectorProps) => {
+  const theme = useTheme()
   const aggregate = aggregateResult(modeResults.map(({ result }) => result));
   if (!aggregate) return null;
 
-  let icon = <DiamondIcon />;
+  let icon = <DiamondIcon fill={theme.base === 'light' ? `${theme.color.defaultText}99` : theme.color.light} />;
   if (!isAccepted && aggregate !== ComparisonResult.Equal) {
     icon = <StatusDotWrapper status={aggregate}>{icon}</StatusDotWrapper>;
   }

src/components/SidebarToggleButton.tsx

@@ -22,11 +22,15 @@ const Button = styled(IconButton)(
     !active &&
     css({
       "&:hover": {
-        color: theme.color.defaultText,
+        color: theme.base === 'light' ? theme.color.defaultText : theme.color.light,
       },
     })
 );
 
+const Label = styled.span(({theme}) => ({
+  color: theme.base === 'light' ? theme.color.defaultText : theme.color.light,
+}))
+
 interface SidebarToggleButtonProps {
   count: number;
   onEnable: () => void;
@@ -54,7 +58,7 @@ export const SidebarToggleButton = React.memo(function SidebarToggleButton({
       <Badge status="warning" data-badge={filter}>
         {count}
       </Badge>
-      <span>{pluralize("Change", count)}</span>
+      <Label>{pluralize("Change", count)}</Label>
     </Button>
   );
 });

src/components/SidebarTopButton.tsx

@@ -11,7 +11,7 @@ import { StatusDotWrapper } from "./StatusDot";
 export const TooltipContent = styled.div(({ theme }) => ({
   width: 220,
   padding: 3,
-  color: theme.color.defaultText,
+  color: theme.base === 'light' ? theme.color.defaultText : theme.color.light,
 
   "& > div": {
     margin: 7,

src/components/SnapshotImage.tsx

@@ -1,5 +1,5 @@
 import { PhotoIcon, ShareAltIcon } from "@storybook/icons";
-import { styled } from "@storybook/theming";
+import { styled, useTheme } from "@storybook/theming";
 import React, { ComponentProps } from "react";
 
 import { CaptureImage, CaptureOverlayImage, ComparisonResult, Test } from "../gql/graphql";
@@ -28,7 +28,6 @@ export const Container = styled.div<{ href?: string; target?: string }>(
       alignItems: "center",
       width: "100%",
       margin: "30px 15px",
-      color: theme.color.mediumdark,
       p: {
         maxWidth: 380,
         textAlign: "center",
@@ -92,6 +91,7 @@ export const SnapshotImage = ({
   focusVisible,
   ...props
 }: SnapshotImageProps & ComponentProps<typeof Container>) => {
+  const theme = useTheme()
   const hasDiff = !!latestImage && !!diffImage && comparisonResult === ComparisonResult.Changed;
   const hasError = comparisonResult === ComparisonResult.CaptureError;
   const hasFocus = hasDiff && !!focusImage;
@@ -140,13 +140,14 @@ export const SnapshotImage = ({
           style={{
             maxWidth: `${(focusImage.imageWidth / latestImage.imageWidth) * 100}%`,
             opacity: showFocus ? 1 : 0,
+            filter: showFocus ? "blur(2px)" : "none"
           }}
         />
       )}
       {hasDiff && <ShareAltIcon />}
       {hasError && !latestImage && (
         <div>
-          <PhotoIcon />
+          <PhotoIcon color={theme.base === 'light' ? 'currentColor': theme.color.medium} />
           <Text>
             A snapshot couldn’t be captured. This often occurs when a story has a code error.
             Confirm that this story successfully renders in your local Storybook and run the build

src/components/Text.tsx

@@ -1,7 +1,6 @@
-import { color, styled } from "@storybook/theming";
+import { styled } from "@storybook/theming";
 
 export const Text = styled.p({
-  color: color.mediumdark,
   margin: "8px 0",
   lineHeight: "18px",
   textAlign: "center",

src/components/design-system/Link.tsx

@@ -68,14 +68,14 @@ const StyledLink = styled.a<StyledLinkProps>(
     }),
 
     ...(props.secondary && {
-      color: color.mediumdark,
+      color: props.theme.base === "light" ? color.mediumdark: color.medium,
 
       "&:hover": {
-        color: color.dark,
+        color: props.theme.base === "light" ? color.dark: color.light,
       },
 
       "&:active": {
-        color: color.darker,
+        color: props.theme.base === "light" ? color.darker: color.lighter,
       },
     }),
 

src/screens/GitNotFound/GitNotFound.tsx

@@ -1,4 +1,3 @@
-import { Code } from "@storybook/components";
 import { styled } from "@storybook/theming";
 import React from "react";
 
@@ -10,7 +9,7 @@ import { VisualTestsIcon } from "../../components/icons/VisualTestsIcon";
 import { Section, Sections } from "../../components/layout";
 import { Stack } from "../../components/Stack";
 import { Text } from "../../components/Text";
-import { useUninstallAddon } from "../Uninstalled/UninstallContext";
+import { Code } from "../../components/Code";
 
 interface GitNotFoundProps {
   gitInfoError: Error;
@@ -36,15 +35,8 @@ const InfoSectionText = styled(Text)(({ theme }) => ({
   color: theme.base === "dark" ? theme.color.lighter : theme.color.darker,
 }));
 
-const StyledCode = styled(Code)(({ theme }) => ({
-  color: theme.base === "dark" ? theme.color.lighter : theme.color.darker,
-  border: `1px solid ${theme.base === "dark" ? theme.color.mediumdark : "#ECF4F9"}`,
-  backgroundColor: theme.base === "dark" ? theme.color.dark : "#F7FAFC",
-  fontSize: "12px",
-}));
 
 export const GitNotFound = ({ gitInfoError, setAccessToken }: GitNotFoundProps) => {
-  const { uninstallAddon } = useUninstallAddon();
   return (
     <Sections>
       <Section grow>
@@ -64,21 +56,18 @@ export const GitNotFound = ({ gitInfoError, setAccessToken }: GitNotFoundProps)
                 <b>Git not detected</b>
                 <br />
                 This addon requires Git to associate test results with commits and branches.
-                Initialize git (<StyledCode>git init</StyledCode>) and make your first commit (
-                <StyledCode>git commit -m</StyledCode>) to get started!
+                Initialize git (<Code>git init</Code>) and make your first commit (
+                <Code>git commit -m</Code>) to get started!
               </InfoSectionText>
             </InfoSection>
             <Link
               target="_blank"
-              href="https://www.chromatic.com/docs/visual-testing-addon/"
+              href="https://www.chromatic.com/docs/visual-tests-addon#git-addon"
               withArrow
+              secondary
             >
               Visual tests requirements
             </Link>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <Link withArrow onClick={() => uninstallAddon()}>
-              Uninstall
-            </Link>
           </Stack>
         </Container>
       </Section>

src/screens/LinkProject/LinkedProject.tsx

@@ -1,17 +1,19 @@
-import { Link } from "@storybook/components";
 import { CheckIcon } from "@storybook/icons";
 import { styled } from "@storybook/theming";
 import React from "react";
 import { useQuery } from "urql";
 
 import { Button } from "../../components/Button";
 import { Container } from "../../components/Container";
+import { Link } from "../../components/design-system";
 import { FooterSection } from "../../components/FooterSection";
 import { Heading } from "../../components/Heading";
-import { Col, Section, Sections, Text } from "../../components/layout";
+import { Text } from "../../components/Text";
+import { Col, Section, Sections } from "../../components/layout";
 import { Stack } from "../../components/Stack";
 import { graphql } from "../../gql";
 import { ProjectQueryQuery } from "../../gql/graphql";
+import { Code } from "../../components/Code";
 
 const Check = styled(CheckIcon)(({ theme }) => ({
   width: 40,
@@ -63,18 +65,18 @@ export const LinkedProject = ({
               <Stack>
                 <Check />
                 <Heading>Project linked!</Heading>
-                <Text style={{ maxWidth: 380 }}>
-                  The <code>projectId</code> for {data.project.name} has been added to this
-                  project's <code>{configFile}</code>. This will be used to sync with Chromatic.
+                <Text style={{ maxWidth: 500 }}>
+                  The <Code>projectId</Code> for {data.project.name} has been added to this
+                  project's <Code>{configFile}</Code>. This will be used to sync with Chromatic.
                   Please commit this change to continue using this addon.
                 </Text>
                 <Button variant="solid" size="medium" onClick={() => goToNext()}>
                   Catch a UI change
                 </Button>
                 <Text>
                   Why do we need a project ID?{" "}
-                  <Link href="https://www.chromatic.com/docs/cli" target="_blank">
-                    Learn More »
+                  <Link href="https://www.chromatic.com/docs/cli" target="_blank" withArrow secondary>
+                    Learn More
                   </Link>
                 </Text>
               </Stack>

src/screens/LinkProject/LinkingProjectFailed.tsx

@@ -1,10 +1,11 @@
-import { Code, Link } from "@storybook/components";
 import React from "react";
 import { dedent } from "ts-dedent";
 
+import { Code } from "../../components/Code";
 import { Container } from "../../components/Container";
 import { FooterSection } from "../../components/FooterSection";
 import { Heading } from "../../components/Heading";
+import { Link } from "../../components/design-system";
 import { Section, Sections } from "../../components/layout";
 import { Text as CenterText } from "../../components/Text";
 
@@ -40,7 +41,7 @@ export function LinkingProjectFailed({
           </Code>
           <CenterText>
             What is this for?{" "}
-            <Link withArrow target="_blank" href={configureDocsLink}>
+            <Link secondary withArrow target="_blank" href={configureDocsLink}>
               Learn more
             </Link>
           </CenterText>