Add themes

src/components/App.tsx

@@ -4,6 +4,9 @@ import Router from './Router'
 import GlobalStyle from './GlobalStyle'
 import { ThemeProvider } from 'styled-components'
 import { defaultTheme } from '../lib/styled/themes/default'
+import { darkTheme } from '../lib/styled/themes/dark'
+import { lightTheme } from '../lib/styled/themes/light'
+import { sepiaTheme } from '../lib/styled/themes/sepia'
 import { StyledAppContainer } from './styled'
 import ContextMenu from './ContextMenu'
 import Dialog from './Dialog/Dialog'
@@ -23,8 +26,7 @@ const App = () => {
   useEffect(() => {
     initialize()
   }, [initialize])
-  const { toggleClosed } = usePreferences()
-
+  const { toggleClosed, preferences } = usePreferences()
   const keyboardHandler = useMemo(() => {
     return (event: KeyboardEvent) => {
       switch (event.key) {
@@ -36,7 +38,6 @@ const App = () => {
     }
   }, [toggleClosed])
   useGlobalKeyDownHandler(keyboardHandler)
-
   const { generalStatus, setGeneralStatus } = useGeneralStatus()
   const updateSideBarWidth = useCallback(
     (leftWidth: number) => {
@@ -46,9 +47,8 @@ const App = () => {
     },
     [setGeneralStatus]
   )
-
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <ThemeProvider theme={selectTheme(preferences['general.theme'])}>
       <StyledAppContainer
         onDrop={(event: React.DragEvent) => {
           event.preventDefault()
@@ -74,5 +74,16 @@ const App = () => {
     </ThemeProvider>
   )
 }
-
+function selectTheme(theme: string) {
+  switch (theme) {
+    case 'dark':
+      return darkTheme
+    case 'light':
+      return lightTheme
+    case 'sepia':
+      return sepiaTheme
+    default:
+      return defaultTheme
+  }
+}
 export default App

src/components/NotePage/NoteList/NoteList.tsx

@@ -12,7 +12,7 @@ import Icon from '../../atoms/Icon'
 import {
   borderBottom,
   inputStyle,
-  uiTextColor
+  iconColor
 } from '../../../lib/styled/styleFunctions'
 
 export const StyledNoteListContainer = styled.div`
@@ -48,6 +48,7 @@ export const StyledNoteListContainer = styled.div`
       font-size: 20px;
       z-index: 0;
       pointer-events: none;
+      ${iconColor}
     }
     .input {
       position: relative;
@@ -64,7 +65,7 @@ export const StyledNoteListContainer = styled.div`
     font-size: 24px;
     background: transparent;
     border: none;
-    ${uiTextColor}
+    ${iconColor}
   }
 `
 

src/components/PreferencesModal/EditorTab.tsx

@@ -152,7 +152,7 @@ const EditorTab = () => {
             value={fontSize}
             onChange={updateFontSize}
           />{' '}
-          px
+           px
         </SectionControl>
       </Section>
       <Section>

src/components/PreferencesModal/GeneralTab.tsx

@@ -117,9 +117,7 @@ const GeneralTab = () => {
             <option value='auto'>{t('preferences.auto')}</option>
             <option value='light'>{t('preferences.light')}</option>
             <option value='dark'>{t('preferences.dark')}</option>
-            <option value='solarized-dark'>
-              {t('preferences.solarizedDark')}
-            </option>
+            <option value='sepia'>{t('preferences.sepia')}</option>
           </SectionSelect>
         </SectionControl>
       </Section>

src/components/PreferencesModal/styled.tsx

@@ -49,6 +49,7 @@ export const SectionControl = styled.div`
 export const SectionSelect = styled.select`
   ${selectStyle}
   padding: 0 16px;
+  width: 200px;
   height: 40px;
   border-radius: 2px;
 
@@ -79,6 +80,7 @@ export const SectionSecondaryButton = styled.button`
 export const SectionInput = styled.input`
   ${inputStyle}
   padding: 0 16px;
+  width: 200px;
   height: 40px;
   border-radius: 2px;
 `

src/components/SideNavigator/ControlButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '../../lib/styled'
 import Icon from '../atoms/Icon'
-import { uiTextColor } from '../../lib/styled/styleFunctions'
+import { sideBarTextColor, sideBarSecondaryTextColor } from '../../lib/styled/styleFunctions'
 
 const StyledButton = styled.button`
   width: 30px;
@@ -13,9 +13,13 @@ const StyledButton = styled.button`
   top: 2px;
   font-size: 20px;
   cursor: pointer;
-  ${uiTextColor}
-  &:focus {
+  ${sideBarSecondaryTextColor}
+  &:hover, &:active, &:focus {
     box-shadow: none;
+    ${sideBarTextColor}
+  }
+  svg {
+    vertical-align: middle;
   }
 `
 

src/components/SideNavigator/SideNavigator.tsx

@@ -17,9 +17,9 @@ import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { useContextMenu, MenuTypes } from '../../lib/contextMenu'
 import { usePreferences } from '../../lib/preferences'
 import {
-  backgroundColor,
-  iconColor,
-  textColor,
+  sideBarBackgroundColor,
+  sideBarTextColor,
+  sideBarSecondaryTextColor,
   uiTextColor
 } from '../../lib/styled/styleFunctions'
 import SideNavigatorItem from './SideNavigatorItem'
@@ -35,14 +35,14 @@ const Description = styled.nav`
   margin-left: 5px;
   margin-bottom: 10px;
   font-size: 18px;
-  color: ${textColor};
+  ${sideBarTextColor}
 `
 
 const StyledSideNavContainer = styled.nav`
   display: flex;
   flex-direction: column;
   height: 100%;
-  ${backgroundColor}
+  ${sideBarBackgroundColor}
   .topControl {
     height: 50px;
     display: flex;
@@ -54,7 +54,7 @@ const StyledSideNavContainer = styled.nav`
       height: 50px;
       background-color: transparent;
       border: none;
-      ${iconColor}
+      ${sideBarSecondaryTextColor}
       font-size: 24px;
     }
   }

src/components/SideNavigator/SideNavigatorItem.tsx

@@ -4,7 +4,8 @@ import styled from '../../lib/styled'
 import Icon from '../atoms/Icon'
 import { mdiChevronDown, mdiChevronRight } from '@mdi/js'
 import {
-  uiTextColor,
+  sideBarTextColor,
+  sideBarSecondaryTextColor,
   activeBackgroundColor
 } from '../../lib/styled/styleFunctions'
 import MdiIcon from '@mdi/react'
@@ -40,7 +41,7 @@ const FoldButton = styled.button`
   margin-right: 3px;
   border-radius: 2px;
   top: 2px;
-  ${uiTextColor}
+  ${sideBarSecondaryTextColor}
   &:focus {
     box-shadow: none;
   }
@@ -54,16 +55,17 @@ const ClickableContainer = styled.button`
   align-items: center;
   width: 100%;
 
-  color: ${({ theme }) => theme.uiTextColor};
+  ${sideBarTextColor}
   &:hover,
   &:focus,
   &:active,
   &.active {
-    color: ${({ theme }) => theme.activeUiTextColor};
+    ${sideBarTextColor}
   }
 
   .icon {
     margin-right: 4px;
+    ${sideBarSecondaryTextColor}
   }
 `
 

src/lib/i18n/enUS.ts

@@ -10,7 +10,7 @@ export default {
     'preferences.auto': 'Auto',
     'preferences.light': 'Light',
     'preferences.dark': 'Dark',
-    'preferences.solarizedDark': 'Solarized Dark',
+    'preferences.sepia': 'Sepia',
     'preferences.noteSorting': 'Note Sorting',
     'preferences.dateUpdated': 'Date Updated',
     'preferences.dateCreated': 'Date Created',

src/lib/i18n/ja.ts

@@ -10,7 +10,7 @@ export default {
     'preferences.auto': '自動',
     'preferences.light': 'ライト',
     'preferences.dark': 'ダーク',
-    'preferences.solarizedDark': 'Solarized Dark',
+    'preferences.sepia': 'セピア',
     'preferences.noteSorting': 'ノート整列',
     'preferences.dateUpdated': 'アプデート順',
     'preferences.dateCreated': '生成順',

src/lib/preferences/types.ts

@@ -1,6 +1,6 @@
 import { User } from '../accounts'
 
-export type GeneralThemeOptions = 'auto' | 'light' | 'dark' | 'solarized-dark'
+export type GeneralThemeOptions = 'auto' | 'light' | 'dark' | 'sepia'
 export type GeneralLanguageOptions = 'en-US' | 'ja'
 export type GeneralNoteSortingOptions =
   | 'date-updated'

src/lib/styled/styleFunctions.ts

@@ -13,6 +13,9 @@ export const secondaryBackgroundColor = ({ theme }: StyledProps) =>
 export const activeBackgroundColor = ({ theme }: StyledProps) =>
   `background-color: ${theme.activeBackgroundColor};`
 
+export const sideBarBackgroundColor = ({ theme }: StyledProps) =>
+  `background-color: ${theme.sideBarBackgroundColor};`
+
 export const iconColor = ({ theme }: StyledProps) => `color: ${theme.iconColor};
 &:hover,
 &:focus {
@@ -46,6 +49,12 @@ transition: 200ms color;
   color: ${theme.disabledUiTextColor};
 }`
 
+export const sideBarTextColor = ({ theme }: StyledProps) =>
+  `color: ${theme.sideBarTextColor};`
+
+export const sideBarSecondaryTextColor = ({ theme }: StyledProps) =>
+  `color: ${theme.sideBarSecondaryTextColor};`
+
 export const borderColor = ({ theme }: StyledProps) =>
   `border-color: ${theme.borderColor};`
 
@@ -79,7 +88,7 @@ color: ${theme.textColor};
 
 export const primaryButtonStyle = ({ theme }: StyledProps) => `border: none;
 background-color: ${theme.primaryColor};
-color: ${theme.textColor};
+color: ${theme.primaryButtonLabelColor};
 font-size: 13px;
 &:focus {
   box-shadow: 0 0 0 2px ${theme.primaryColor};
@@ -88,7 +97,7 @@ font-size: 13px;
 
 export const secondaryButtonStyle = ({ theme }: StyledProps) => `border: none;
 background-color: ${theme.inputBackground};
-color: ${theme.textColor};
+color: ${theme.secondaryButtonLabelColor};
 font-size: 13px;
 &:focus {
   box-shadow: 0 0 0 2px ${theme.primaryColor};

src/lib/styled/themes/dark.ts

@@ -0,0 +1,58 @@
+import { BaseTheme } from './types'
+
+const base1Color = '#2c2d30'
+const base2Color = '#1e2022'
+const primaryColor = '#03C588'
+
+const dark26Color = 'rgba(0,0,0,0.26)'
+const light70Color = 'rgba(255,255,255,0.7)'
+const light30Color = 'rgba(255,255,255,0.3)'
+const light12Color = 'rgba(255,255,255,0.12)'
+const light100Color = '#FFF'
+
+export const darkTheme: BaseTheme = {
+  colors: {
+    text: light70Color,
+    deemedText: light30Color,
+    inverseText: light100Color,
+    background: light100Color,
+    alternativeBackground: light12Color,
+    active: primaryColor,
+    border: dark26Color
+  },
+  fontSize: 15,
+  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
+
+  // General
+  textColor: light100Color,
+  uiTextColor: light70Color,
+  activeUiTextColor: light100Color,
+  disabledUiTextColor: light30Color,
+
+  primaryColor: primaryColor,
+  borderColor: dark26Color,
+  iconColor: light30Color,
+  activeIconColor: light70Color,
+  backgroundColor: base1Color,
+  secondaryBackgroundColor: base2Color,
+  activeBackgroundColor: base2Color,
+  shadow: '0 3px 5px rgba(0,0,0,0.1)',
+
+  scrollBarTrackColor: base2Color,
+  scrollBarThumbColor: light12Color,
+
+  // SideBar
+  sideBarBackgroundColor: base1Color,
+  sideBarTextColor: light70Color,
+  sideBarSecondaryTextColor: light30Color,
+
+  // Button
+  primaryButtonLabelColor: light100Color,
+  primaryButtonBackgroundColor: primaryColor,
+  secondaryButtonLabelColor: light100Color,
+  secondaryButtonBackgroundColor: 'transparent',
+
+  // Input
+  inputBackground: light12Color
+}