Add dark theme

src/taskpane/components/App.tsx

@@ -7,14 +7,17 @@ import ProtectedRoutes from '../../utils/ProtectedRoutes';
 import { CitationStoreProvider } from '../contexts/CitationStoreContext';
 import { CiteSupportProvider } from '../contexts/CiteSupportContext';
 import Wrapper from './Wrapper';
+import { ThemeContextProvider } from '../contexts/ThemeContext';
+import { Theme } from '../../../types';
 
 export interface AppProps {
   title: string;
+  theme: Theme;
   isOfficeInitialized: boolean;
 }
 
 function App(props: AppProps): ReactElement {
-  const { isOfficeInitialized, title } = props;
+  const { isOfficeInitialized, title, theme } = props;
 
   if (!isOfficeInitialized) {
     return (
@@ -23,20 +26,22 @@ function App(props: AppProps): ReactElement {
   }
 
   return (
-    <Wrapper>
-      <Switch>
-        <Route path="/login">
-          <Login />
-        </Route>
-        <ProtectedRoutes path="/">
-          <CiteSupportProvider>
-            <CitationStoreProvider>
-              <Layout />
-            </CitationStoreProvider>
-          </CiteSupportProvider>
-        </ProtectedRoutes>
-      </Switch>
-    </Wrapper>
+    <ThemeContextProvider initTheme={theme}>
+      <Wrapper>
+        <Switch>
+          <Route path="/login">
+            <Login />
+          </Route>
+          <ProtectedRoutes path="/">
+            <CiteSupportProvider>
+              <CitationStoreProvider>
+                <Layout />
+              </CitationStoreProvider>
+            </CiteSupportProvider>
+          </ProtectedRoutes>
+        </Switch>
+      </Wrapper>
+    </ThemeContextProvider>
   );
 }
 export default App;

src/taskpane/components/Footer.tsx

@@ -1,7 +1,10 @@
 import { Stack, ActionButton } from '@fluentui/react';
 import React, { ReactElement } from 'react';
+import { Theme } from '../../../types';
 
 import {
+  light,
+  dark,
   Signout,
   SyncBib,
   imageProps,
@@ -13,9 +16,11 @@ import {
 interface FooterProps {
   onSyncBibliography: () => void;
   onLogout: () => void;
+  onThemeChange: () => void;
+  theme: Theme;
 }
 
-function Footer({ onSyncBibliography, onLogout }: FooterProps): ReactElement {
+function Footer({ onSyncBibliography, onLogout, onThemeChange, theme }: FooterProps): ReactElement {
   return (
     <Stack styles={footerStackStyle}>
       <Stack
@@ -26,6 +31,12 @@ function Footer({ onSyncBibliography, onLogout }: FooterProps): ReactElement {
       >
         <img {...imageProps} alt="jabref logo" />
         <Stack horizontal>
+          <ActionButton
+            iconProps={theme === Theme.LIGHT ? light : dark}
+            styles={footerIconOnlyButton}
+            ariaLabel="Change theme"
+            onClick={onThemeChange}
+          />
           <ActionButton
             iconProps={SyncBib}
             styles={footerIconOnlyButton}

src/taskpane/components/ReferenceView.style.tsx

@@ -2,13 +2,13 @@ import { getTheme, IStackItemStyles, IStackStyles, ITheme } from '@fluentui/reac
 import globalStyles from '../../theme/index';
 
 const theme: ITheme = getTheme();
-const { fonts } = theme;
+const { fonts, semanticColors } = theme;
 
 export const referenceViewContainer: IStackStyles = {
   root: {
     padding: `0.5rem ${globalStyles.margin}`,
     cursor: 'pointer',
-    minHeight: '6rem',
+    minHeight: '4rem',
   },
 };
 
@@ -30,19 +30,17 @@ export const referenceDetailsContainer: IStackItemStyles = {
 export const heading: IStackItemStyles = {
   root: {
     fontSize: fonts.medium.fontSize,
-    fontWeight: 700,
-    lineHeight: '1.2rem',
-    height: '2.4rem',
+    fontWeight: 900,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
 };
 
 export const authorStyle: IStackItemStyles = {
   root: {
-    fontWeight: 500,
+    fontWeight: 700,
     fontSize: fonts.medium.fontSize,
     paddingTop: '0.5rem',
-    fontStyle: 'italic',
+    color: semanticColors.disabledBodyText,
   },
 };

src/taskpane/contexts/ThemeContext.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ThemeProvider } from '@fluentui/react/lib/utilities/ThemeProvider/ThemeProvider';
+import React, { createContext } from 'react';
+import { Theme } from '../../../types/index';
+import UserPreferences from '../../utils/UserPreferences';
+import darkTheme from '../../theme/Dark';
+import lightTheme from '../../theme/Light';
+
+interface ThemeContextProps {
+  children: React.ReactNode;
+  initTheme: Theme;
+}
+
+interface ThemeContextInterface {
+  theme: Theme;
+  changeTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextInterface>(null);
+
+const getTheme = (theme: Theme) => (theme === Theme.DARK ? darkTheme : lightTheme);
+
+export function ThemeContextProvider({ children, initTheme }: ThemeContextProps): JSX.Element {
+  const [theme, setThemeValue] = React.useState(initTheme);
+  const changeTheme = () => {
+    setThemeValue((prevVal) => {
+      const newVal = prevVal === Theme.DARK ? Theme.LIGHT : Theme.DARK;
+      UserPreferences.setTheme(newVal);
+      UserPreferences.syncPreferences();
+      return newVal;
+    });
+  };
+  const value = { theme, changeTheme };
+  return (
+    <ThemeContext.Provider value={value}>
+      <ThemeProvider theme={getTheme(theme)}>{children} </ThemeProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = (): ThemeContextInterface => {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error(
+      'useTheme must be used within a ThemeContextProvider. Wrap a parent component in <ThemeContextProvider> to fix this error.'
+    );
+  }
+  return context;
+};
+
+export default ThemeContext;

src/taskpane/index.tsx

@@ -14,11 +14,13 @@ import { initializeIcons, ThemeProvider } from '@fluentui/react';
 import { HashRouter as Router } from 'react-router-dom';
 import App from './components/App';
 import client from '../plugins/apollo/apolloClient';
+import { Theme } from '../../types';
+import UserPreferences from '../utils/UserPreferences';
 
 initializeIcons();
 
+let theme: Theme;
 let isOfficeInitialized = false;
-
 const title = 'JabRef Task Pane Add-in';
 
 const render = (Component) => {
@@ -27,7 +29,7 @@ const render = (Component) => {
       <AppContainer>
         <ThemeProvider>
           <Router>
-            <Component title={title} isOfficeInitialized={isOfficeInitialized} />
+            <Component title={title} theme={theme} isOfficeInitialized={isOfficeInitialized} />
           </Router>
         </ThemeProvider>
       </AppContainer>
@@ -40,6 +42,7 @@ const render = (Component) => {
 // eslint-disable-next-line no-void
 void Office.onReady(() => {
   isOfficeInitialized = true;
+  theme = UserPreferences.getTheme();
   render(App);
 });
 

src/taskpane/layout/Layout.tsx

@@ -7,6 +7,7 @@ import { pivotStyle, scrollableStack } from './Layout.style';
 import { useCiteSupport } from '../contexts/CiteSupportContext';
 import { useLogoutMutation } from '../../generated/graphql';
 import client from '../../plugins/apollo/apolloClient';
+import { useTheme } from '../contexts/ThemeContext';
 
 type pivotItem = 'citationStyle' | 'dashboard';
 
@@ -15,6 +16,8 @@ const getTabId = (itemKey: string) => {
 };
 
 function Layout(): JSX.Element {
+  const { theme, changeTheme } = useTheme();
+
   const [selectedKey, setSelectedKey] = useState<pivotItem>('dashboard');
 
   const handleLinkClick = (item?: PivotItem) => {
@@ -51,7 +54,12 @@ function Layout(): JSX.Element {
         {selectedKey === 'dashboard' ? <Dashboard /> : <CitationStyle />}
       </StackItem>
       <Stack.Item>
-        <Footer onLogout={onLogout} onSyncBibliography={onSyncBibliography} />
+        <Footer
+          theme={theme}
+          onLogout={onLogout}
+          onThemeChange={changeTheme}
+          onSyncBibliography={onSyncBibliography}
+        />
       </Stack.Item>
     </Stack>
   );

src/taskpane/pages/Dashboard.tsx

@@ -8,6 +8,7 @@ import { useCiteSupport } from '../contexts/CiteSupportContext';
 import ReferenceList from '../components/ReferenceList';
 import ButtonGroup from '../components/ButtonGroup';
 import { scrollableStack } from '../layout/Layout.style';
+import { Mode } from '../../../types';
 
 const buttonLabel = (length: number) =>
   length > 0
@@ -27,6 +28,7 @@ function containsSearchTerm(keyword: string) {
 function Dashboard(): ReactElement {
   const originalItems = data; // TODO: Replace with getData hooK
   const citeSupport = useCiteSupport();
+  const [mode, setMode] = useState<Mode>(Mode.REST);
   const { selectedCitations, dispatch } = useCitationStore();
   const [referenceList, setReferenceList] = useState<Array<MetaData>>(originalItems);
   const [citationItems, _setCitationItems] = useState<Array<CitationItem | null>>([]);
@@ -74,6 +76,16 @@ function Dashboard(): ReactElement {
     return () => citeSupport.wordApi.removeEventListener();
   }, [citeSupport.wordApi, getSelectedCitation]);
 
+  useEffect(() => {
+    if (selectedCitations.length && !itemsInSelectedCitation.current.length) {
+      setMode(Mode.CITE);
+    } else if (itemsInSelectedCitation.current.length) {
+      setMode(Mode.EDIT);
+    } else {
+      setMode(Mode.REST);
+    }
+  }, [selectedCitations, itemsInSelectedCitation.current.length, setMode]);
+
   return (
     <Stack verticalFill>
       <Stack.Item>
@@ -82,7 +94,7 @@ function Dashboard(): ReactElement {
       <Stack.Item grow styles={scrollableStack}>
         <ReferenceList referenceList={referenceList} />
       </Stack.Item>
-      {selectedCitations.length && !itemsInSelectedCitation.current.length ? (
+      {mode === Mode.CITE ? (
         <ButtonGroup
           label1={buttonLabel(selectedCitations.length)}
           label2="Cancel"
@@ -92,7 +104,7 @@ function Dashboard(): ReactElement {
           disabled2={false}
         />
       ) : null}
-      {itemsInSelectedCitation.current.length ? (
+      {mode === Mode.EDIT ? (
         <ButtonGroup
           label1={buttonLabel(selectedCitations.length)}
           label2="Cancel"

src/theme/Dark.tsx

@@ -0,0 +1,31 @@
+import { createTheme } from '@fluentui/react';
+import globalStyles from '.';
+
+const darkTheme = createTheme({
+  defaultFontStyle: { fontFamily: globalStyles.fontFamily },
+  palette: {
+    themePrimary: '#106ebe',
+    themeLighterAlt: '#010408',
+    themeLighter: '#02111f',
+    themeLight: '#052139',
+    themeTertiary: '#094173',
+    themeSecondary: '#0d60a8',
+    themeDarkAlt: '#2279c6',
+    themeDark: '#3e8bcf',
+    themeDarker: '#6aa7db',
+    neutralLighterAlt: '#302e2e',
+    neutralLighter: '#383636',
+    neutralLight: '#464444',
+    neutralQuaternaryAlt: '#4e4c4c',
+    neutralQuaternary: '#555353',
+    neutralTertiaryAlt: '#727070',
+    neutralTertiary: '#eaeaea',
+    neutralSecondary: '#eeeeee',
+    neutralPrimaryAlt: '#f1f1f1',
+    neutralPrimary: '#e0e0e0',
+    neutralDark: '#f8f8f8',
+    black: '#fbfbfb',
+    white: '#272626',
+  },
+});
+export default darkTheme;

src/theme/Light.tsx

@@ -0,0 +1,32 @@
+import { createTheme } from '@fluentui/react';
+import globalStyles from '.';
+
+const lightTheme = createTheme({
+  defaultFontStyle: { fontFamily: globalStyles.fontFamily },
+  palette: {
+    themePrimary: '#0078d4',
+    themeLighterAlt: '#eff6fc',
+    themeLighter: '#deecf9',
+    themeLight: '#c7e0f4',
+    themeTertiary: '#71afe5',
+    themeSecondary: '#2b88d8',
+    themeDarkAlt: '#106ebe',
+    themeDark: '#005a9e',
+    themeDarker: '#004578',
+    neutralLighterAlt: '#faf9f8',
+    neutralLighter: '#f3f2f1',
+    neutralLight: '#edebe9',
+    neutralQuaternaryAlt: '#e1dfdd',
+    neutralQuaternary: '#d0d0d0',
+    neutralTertiaryAlt: '#c8c6c4',
+    neutralTertiary: '#a19f9d',
+    neutralSecondary: '#605e5c',
+    neutralPrimaryAlt: '#3b3a39',
+    neutralPrimary: '#323130',
+    neutralDark: '#201f1e',
+    black: '#000000',
+    white: '#ffffff',
+  },
+});
+
+export default lightTheme;

src/utils/UserPreferences.ts

@@ -1,3 +1,4 @@
+import { Theme } from '../../types';
 import DocumentStorage from '../services/DocumentStorage';
 
 export default class UserPreferences {
@@ -12,4 +13,12 @@ export default class UserPreferences {
   static syncPreferences(): void {
     DocumentStorage.save();
   }
+
+  static getTheme(): Theme {
+    return DocumentStorage.getItem('theme') === '1' ? Theme.DARK : Theme.LIGHT;
+  }
+
+  static setTheme(theme: Theme): void {
+    DocumentStorage.setItem('theme', theme.toString());
+  }
 }

types/index.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-shadow */
+/* eslint-disable import/prefer-default-export */
+
+export enum Theme {
+  LIGHT,
+  DARK,
+}
+
+export enum Mode {
+  REST,
+  EDIT,
+  CITE,
+}