From 98f4dcb1e0b5e0970348dfc0ff8a43f841acae72 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Mon, 7 Feb 2022 23:00:09 +0100
Subject: [PATCH 1/4] Begin on dark mode colors

---
 ui/src/components/albumGallery/AlbumBox.tsx |  4 ++--
 ui/src/components/header/Header.tsx         |  2 +-
 ui/src/components/layout/MainMenu.tsx       | 16 ++++++++--------
 ui/src/components/sidebar/Sidebar.tsx       |  2 +-
 ui/src/index.css                            |  4 ++++
 ui/src/index.tsx                            |  2 ++
 ui/src/primitives/form/Dropdown.tsx         |  1 +
 ui/src/primitives/form/Input.tsx            |  2 ++
 ui/tailwind.config.js                       | 12 +++++++++++-
 9 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/albumGallery/AlbumBox.tsx b/ui/src/components/albumGallery/AlbumBox.tsx
index f0dd946d..06fe5674 100644
--- a/ui/src/components/albumGallery/AlbumBox.tsx
+++ b/ui/src/components/albumGallery/AlbumBox.tsx
@@ -25,7 +25,7 @@ const AlbumBoxImage = ({ src, ...props }: AlbumBoxImageProps) => {
   let placeholder = null
   if (!loaded) {
     placeholder = (
-      <div className="bg-gray-100 animate-pulse w-full h-full rounded-lg absolute top-0"></div>
+      <div className="bg-gray-100 dark:bg-[#191c1f] animate-pulse w-full h-full rounded-lg absolute top-0"></div>
     )
   }
 
@@ -44,7 +44,7 @@ type AlbumBoxProps = {
 
 export const AlbumBox = ({ album, customLink, ...props }: AlbumBoxProps) => {
   const wrapperClasses =
-    'inline-block text-center text-gray-900 mx-3 my-2 xs:h-60 xs:w-[220px]'
+    'inline-block text-center text-gray-900 dark:text-gray-200 mx-3 my-2 xs:h-60 xs:w-[220px]'
 
   if (album) {
     return (
diff --git a/ui/src/components/header/Header.tsx b/ui/src/components/header/Header.tsx
index e0d53623..5c8c11df 100644
--- a/ui/src/components/header/Header.tsx
+++ b/ui/src/components/header/Header.tsx
@@ -11,7 +11,7 @@ const Header = () => {
   return (
     <div
       className={classNames(
-        'sticky top-0 z-10 bg-white flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none',
+        'sticky top-0 z-10 bg-white dark:bg-dark-bg flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none',
         { 'mr-[404px]': pinned }
       )}
     >
diff --git a/ui/src/components/layout/MainMenu.tsx b/ui/src/components/layout/MainMenu.tsx
index 76681d83..035ffe01 100644
--- a/ui/src/components/layout/MainMenu.tsx
+++ b/ui/src/components/layout/MainMenu.tsx
@@ -63,7 +63,7 @@ const MenuButton = ({
 }
 
 const MenuSeparator = () => (
-  <hr className="hidden lg:block my-3 border-gray-200" />
+  <hr className="hidden lg:block my-3 border-gray-200 dark:border-[#3B3B3B]" />
 )
 
 export const MainMenu = () => {
@@ -81,15 +81,15 @@ export const MainMenu = () => {
     !!faceDetectionEnabledQuery?.data?.siteInfo?.faceDetectionEnabled
 
   return (
-    <div className="fixed w-full bottom-0 lg:bottom-auto lg:top-[84px] z-30 bg-white shadow-separator lg:shadow-none lg:w-[240px] lg:ml-8 lg:mr-5 flex-shrink-0">
+    <div className="fixed w-full bottom-0 lg:bottom-auto lg:top-[84px] z-30 bg-white dark:bg-dark-bg shadow-separator lg:shadow-none lg:w-[240px] lg:ml-8 lg:mr-5 flex-shrink-0">
       <ul className="flex justify-around py-2 px-2 max-w-lg mx-auto lg:flex-col lg:p-0">
         <MenuButton
           to="/timeline"
           exact
           label={t('sidemenu.photos', 'Timeline')}
           background="#8ac5f4"
-          activeClasses="ring-[#f1f8ff] bg-[#f1f8ff]"
-          className="outline-none focus:ring-2 focus:ring-blue-200 focus:ring-offset-2"
+          activeClasses="ring-[#f1f8ff] bg-[#f1f8ff] dark:bg-[#171f28] dark:ring-[#171f28]"
+          className="outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-[#283849] focus:ring-offset-2"
           icon={
             <svg viewBox="0 0 24 24" fill="white">
               <path d="M5.62503136,14 L9.60031266,17.978 L5.38724257,24 L2.99995461,24 C1.45289603,24 0.179346174,22.8289699 0.0173498575,21.3249546 L5.62503136,14 Z M15.7557572,10 L24.0173027,21.526562 C23.7684095,22.9323278 22.5405695,24 21.0633614,24 L21.0633614,24 L5.88324257,24 L15.7557572,10 Z"></path>
@@ -101,7 +101,7 @@ export const MainMenu = () => {
           exact
           label={t('sidemenu.albums', 'Albums')}
           background="#ff797b"
-          activeClasses="ring-[#fff1f2] bg-[#fff1f2]"
+          activeClasses="ring-[#fff1f2] bg-[#fff1f2] dark:ring-[#1d1516] dark:bg-[#1d1516]"
           className="outline-none focus:ring-2 focus:ring-red-200 focus:ring-offset-2"
           icon={
             <svg viewBox="0 0 24 24" fill="white">
@@ -115,7 +115,7 @@ export const MainMenu = () => {
             exact
             label={t('sidemenu.places', 'Places')}
             background="#92e072"
-            activeClasses="ring-[#e3fee5] bg-[#e3fee5]"
+            activeClasses="ring-[#e3fee5] bg-[#e3fee5] dark:ring-[#0c1c0f] dark:bg-[#0c1c0f]"
             className="outline-none focus:ring-2 focus:ring-green-100 focus:ring-offset-2"
             icon={
               <svg viewBox="0 0 24 24" fill="white">
@@ -130,7 +130,7 @@ export const MainMenu = () => {
             exact
             label={t('sidemenu.people', 'People')}
             background="#fbcd78"
-            activeClasses="ring-[#fff7e4] bg-[#fff7e4]"
+            activeClasses="ring-[#fff7e4] bg-[#fff7e4] dark:ring-[#1a1b13] dark:bg-[#1a1b13]"
             className="outline-none focus:ring-2 focus:ring-yellow-100 focus:ring-offset-2"
             icon={
               <svg viewBox="0 0 24 24" fill="white">
@@ -145,7 +145,7 @@ export const MainMenu = () => {
           exact
           label={t('sidemenu.settings', 'Settings')}
           background="#aacbd0"
-          activeClasses="ring-[#e4f0f8] bg-[#e4f0f8]"
+          activeClasses="ring-[#e4f0f8] bg-[#e4f0f8] dark:ring-[#0f1f23] dark:bg-[#0f1f23]"
           className="outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2"
           icon={
             <svg viewBox="0 0 24 24" fill="white">
diff --git a/ui/src/components/sidebar/Sidebar.tsx b/ui/src/components/sidebar/Sidebar.tsx
index 2688ff90..090ce533 100644
--- a/ui/src/components/sidebar/Sidebar.tsx
+++ b/ui/src/components/sidebar/Sidebar.tsx
@@ -89,7 +89,7 @@ export const Sidebar = () => {
 
   return (
     <div
-      className={`fixed top-[72px] bg-white bottom-0 w-full overflow-y-auto transform transition-transform motion-reduce:transition-none ${
+      className={`fixed top-[72px] bg-white dark:bg-dark-bg2 bottom-0 w-full overflow-y-auto transform transition-transform motion-reduce:transition-none ${
         content == null && !pinned ? 'translate-x-full' : 'translate-x-0'
       } ${
         pinned ? 'lg:border-l' : 'lg:shadow-separator'
diff --git a/ui/src/index.css b/ui/src/index.css
index 37adde1c..299943b5 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -12,6 +12,10 @@ html {
   font-family: 'Source Sans Pro', sans-serif;
 }
 
+body.dark {
+  @apply bg-dark-bg text-dark-text;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index c2ab5141..8024eff5 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -24,6 +24,8 @@ const Main = () => (
   </ApolloProvider>
 )
 
+document.getElementsByTagName('body')[0].classList.add('dark')
+
 ReactDOM.render(<Main />, document.getElementById('root'))
 
 serviceWorkerRegistration.register()
diff --git a/ui/src/primitives/form/Dropdown.tsx b/ui/src/primitives/form/Dropdown.tsx
index 81950a19..c68dc969 100644
--- a/ui/src/primitives/form/Dropdown.tsx
+++ b/ui/src/primitives/form/Dropdown.tsx
@@ -44,6 +44,7 @@ const Dropdown = ({
     <DropdownStyledSelect
       className={classNames(
         'bg-gray-50 px-2 py-0.5 pr-6 rounded border border-gray-200 focus:outline-none focus:border-blue-300 text-[#222] hover:bg-gray-100 disabled:hover:bg-gray-50 disabled:text-gray-500 disabled:cursor-default',
+        'dark:bg-dark-input-bg dark:border-dark-input-border dark:text-dark-input-text dark:focus:border-blue-300',
         className
       )}
       value={selected}
diff --git a/ui/src/primitives/form/Input.tsx b/ui/src/primitives/form/Input.tsx
index 6d9cd97f..9b6613a8 100644
--- a/ui/src/primitives/form/Input.tsx
+++ b/ui/src/primitives/form/Input.tsx
@@ -58,6 +58,7 @@ export const TextField = forwardRef(
         onKeyUp={keyUpEvent}
         className={classNames(
           'block border rounded-md focus:ring-2 focus:outline-none px-2',
+          'dark:bg-dark-input-bg dark:border-dark-input-border',
           variant,
           sizeVariant == 'big' ? 'py-2' : 'py-1',
           { 'w-full': fullWidth },
@@ -147,6 +148,7 @@ type ButtonProps = {
 const buttonStyles = ({ variant, background }: ButtonProps) =>
   classNames(
     'px-6 py-0.5 rounded border border-gray-200 focus:outline-none focus:border-blue-300 text-[#222] hover:bg-gray-100 whitespace-nowrap',
+    'dark:bg-dark-input-bg dark:border-dark-input-border dark:text-dark-input-text dark:focus:border-blue-300',
     variant == 'negative' &&
       'text-red-600 hover:bg-red-600 hover:border-red-700 hover:text-white transition-colors focus:border-red-600 focus:hover:border-red-700',
     variant == 'positive' &&
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 36c0a1e1..227ee406 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   mode: 'jit',
   purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: 'class',
   theme: {
     extend: {
       screens: {
@@ -23,6 +23,16 @@ module.exports = {
           800: '#006624',
           900: '#00541d',
         },
+        dark: {
+          bg: '#24292e',
+          bg2: '#30363e',
+          text: '#fafafa',
+          input: {
+            bg: '#383e46',
+            border: '#4a515a',
+            text: '#ccdbe4',
+          },
+        },
       },
     },
   },

From c9d59a634e232cf49c46da61e5a604b83d03e414 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Mon, 7 Feb 2022 23:27:04 +0100
Subject: [PATCH 2/4] Add user preference for changing theme

---
 ui/src/Pages/SettingsPage/SettingsPage.tsx    |  2 +-
 ui/src/Pages/SettingsPage/UserPreferences.tsx | 47 ++++++++++++++++++-
 ui/src/index.css                              |  3 +-
 ui/src/index.tsx                              |  4 +-
 ui/src/theme.ts                               | 34 ++++++++++++++
 5 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/theme.ts

diff --git a/ui/src/Pages/SettingsPage/SettingsPage.tsx b/ui/src/Pages/SettingsPage/SettingsPage.tsx
index 6febb717..e9769cd9 100644
--- a/ui/src/Pages/SettingsPage/SettingsPage.tsx
+++ b/ui/src/Pages/SettingsPage/SettingsPage.tsx
@@ -18,7 +18,7 @@ export const SectionTitle = ({ children, nospace }: SectionTitleProps) => {
   return (
     <h2
       className={classNames(
-        'pb-1 border-b border-gray-200 text-xl mb-5',
+        'pb-1 border-b border-gray-200 dark:border-[#3B3B3B] text-xl mb-5',
         !nospace && 'mt-6'
       )}
     >
diff --git a/ui/src/Pages/SettingsPage/UserPreferences.tsx b/ui/src/Pages/SettingsPage/UserPreferences.tsx
index 8f596020..79e79849 100644
--- a/ui/src/Pages/SettingsPage/UserPreferences.tsx
+++ b/ui/src/Pages/SettingsPage/UserPreferences.tsx
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@apollo/client'
 import gql from 'graphql-tag'
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import { LanguageTranslation } from '../../__generated__/globalTypes'
@@ -16,6 +16,8 @@ import {
   changeUserPreferencesVariables,
 } from './__generated__/changeUserPreferences'
 import { myUserPreferences } from './__generated__/myUserPreferences'
+import { TranslationFn } from '../../localization'
+import { changeTheme, getTheme } from '../../theme'
 
 const languagePreferences = [
   { key: 1, label: 'English', flag: 'uk', value: LanguageTranslation.English },
@@ -47,6 +49,24 @@ const languagePreferences = [
   },
 ]
 
+const themePreferences = (t: TranslationFn) => [
+  {
+    key: 1,
+    label: t('settings.user_preferences.theme.auto.label', 'Same as system'),
+    value: 'auto',
+  },
+  {
+    key: 2,
+    label: t('settings.user_preferences.theme.light.label', 'Light'),
+    value: 'light',
+  },
+  {
+    key: 2,
+    label: t('settings.user_preferences.theme.dark.label', 'Dark'),
+    value: 'dark',
+  },
+]
+
 const CHANGE_USER_PREFERENCES = gql`
   mutation changeUserPreferences($language: String) {
     changeUserPreferences(language: $language) {
@@ -86,6 +106,12 @@ const UserPreferencesWrapper = styled.div`
 
 const UserPreferences = () => {
   const { t } = useTranslation()
+  const [theme, setTheme] = useState(getTheme())
+
+  const changeStateTheme = (value: string) => {
+    changeTheme(value)
+    setTheme(value)
+  }
 
   const { data } = useQuery<myUserPreferences>(MY_USER_PREFERENCES)
 
@@ -109,7 +135,7 @@ const UserPreferences = () => {
         {t('settings.user_preferences.title', 'User preferences')}
       </SectionTitle>
       <LogoutButton />
-      <label id="user_pref_change_language_field">
+      <label htmlFor="user_pref_change_language_field">
         <InputLabelTitle>
           {t(
             'settings.user_preferences.change_language.label',
@@ -140,6 +166,23 @@ const UserPreferences = () => {
         selected={data?.myUserPreferences.language || undefined}
         disabled={loadingPrefs}
       />
+      <label htmlFor="user_pref_change_theme_field">
+        <InputLabelTitle>
+          {t('settings.user_preferences.theme.title', 'Theme preferences')}
+        </InputLabelTitle>
+        <InputLabelDescription>
+          {t(
+            'settings.user_preferences.theme.description',
+            'Change the appearance of the website'
+          )}
+        </InputLabelDescription>
+      </label>
+      <Dropdown
+        id="user_pref_change_theme_field"
+        items={themePreferences(t)}
+        setSelected={changeStateTheme}
+        selected={theme}
+      />
     </UserPreferencesWrapper>
   )
 }
diff --git a/ui/src/index.css b/ui/src/index.css
index 299943b5..63ef9800 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -12,7 +12,8 @@ html {
   font-family: 'Source Sans Pro', sans-serif;
 }
 
-body.dark {
+body.dark,
+html.dark {
   @apply bg-dark-bg text-dark-text;
 }
 
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 8024eff5..b39c6034 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -7,11 +7,13 @@ import client from './apolloClient'
 import { ApolloProvider } from '@apollo/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { setupLocalization } from './localization'
+import { updateTheme } from './theme'
 import * as serviceWorkerRegistration from './serviceWorkerRegistration'
 
 import './index.css'
 import { SidebarProvider } from './components/sidebar/Sidebar'
 
+updateTheme()
 setupLocalization()
 
 const Main = () => (
@@ -24,8 +26,6 @@ const Main = () => (
   </ApolloProvider>
 )
 
-document.getElementsByTagName('body')[0].classList.add('dark')
-
 ReactDOM.render(<Main />, document.getElementById('root'))
 
 serviceWorkerRegistration.register()
diff --git a/ui/src/theme.ts b/ui/src/theme.ts
new file mode 100644
index 00000000..9599b810
--- /dev/null
+++ b/ui/src/theme.ts
@@ -0,0 +1,34 @@
+export const updateTheme = () => {
+  if (
+    localStorage.theme === 'dark' ||
+    (!('theme' in localStorage) &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+export const changeTheme = (value: string) => {
+  if (value == 'light') {
+    localStorage.theme = 'light'
+  } else if (value == 'dark') {
+    localStorage.theme = 'dark'
+  } else {
+    // use OS preference
+    localStorage.removeItem('theme')
+  }
+
+  updateTheme()
+}
+
+export const getTheme = () => {
+  if (localStorage.theme == 'light') {
+    return 'light'
+  } else if (localStorage.theme == 'dark') {
+    return 'dark'
+  } else {
+    return 'auto'
+  }
+}

From 414ad11953b8f935fbe7014c7b9238970834498e Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Tue, 8 Feb 2022 21:14:10 +0100
Subject: [PATCH 3/4] Further work on dark mode

---
 ui/src/Pages/SettingsPage/SettingsPage.tsx    |  2 +-
 ui/src/components/album/AlbumFilter.tsx       |  9 +-
 ui/src/components/album/AlbumTitle.tsx        |  4 +-
 ui/src/components/layout/MainMenu.tsx         |  2 +-
 ui/src/components/mapbox/MapboxMap.tsx        |  5 +-
 ui/src/components/sidebar/AlbumCovers.tsx     |  4 +-
 .../sidebar/MediaSidebar/MediaSidebar.tsx     |  4 +-
 ui/src/components/sidebar/Sharing.tsx         | 25 +++--
 ui/src/components/sidebar/Sidebar.tsx         |  2 +-
 .../sidebar/SidebarDownloadMedia.tsx          |  6 +-
 ui/src/components/sidebar/SidebarHeader.tsx   |  4 +-
 ui/src/components/sidebar/SidebarItem.tsx     | 22 +----
 .../sidebar/icons/closeSidebarIcon.svg        |  2 +-
 .../sidebar/icons/pinSidebarIconFilled.svg    |  2 +-
 .../sidebar/icons/pinSidebarIconOutline.svg   |  2 +-
 .../extractedTranslations/da/translation.json | 37 ++++---
 .../da/translation_old.json                   | 52 +++++-----
 .../extractedTranslations/de/translation.json | 37 ++++---
 .../de/translation_old.json                   | 76 +++++++-------
 .../extractedTranslations/en/translation.json | 37 ++++---
 .../en/translation_old.json                   | 38 ++++---
 .../extractedTranslations/es/translation.json | 37 ++++---
 .../es/translation_old.json                   | 82 +++++++++-------
 .../extractedTranslations/fr/translation.json | 42 +++++---
 .../fr/translation_old.json                   | 42 +++++---
 .../extractedTranslations/it/translation.json | 37 ++++---
 .../it/translation_old.json                   | 80 ++++++++-------
 .../extractedTranslations/pl/translation.json | 52 ++++++----
 .../pl/translation_old.json                   | 98 +++++++++----------
 .../extractedTranslations/pt/translation.json | 37 ++++---
 .../pt/translation_old.json                   | 18 +++-
 .../extractedTranslations/ru/translation.json | 52 ++++++----
 .../ru/translation_old.json                   | 96 +++++++++---------
 .../extractedTranslations/sv/translation.json | 37 ++++---
 .../sv/translation_old.json                   | 82 +++++++++-------
 .../zh-CN/translation.json                    | 27 +++--
 .../zh-CN/translation_old.json                | 12 +--
 .../zh-HK/translation.json                    | 27 +++--
 .../zh-HK/translation_old.json                | 12 +--
 ui/src/helpers/utils.ts                       |  5 +-
 ui/src/primitives/form/Input.tsx              |  2 +-
 ui/src/theme.ts                               |  3 +
 ui/tailwind.config.js                         |  2 +
 43 files changed, 754 insertions(+), 500 deletions(-)

diff --git a/ui/src/Pages/SettingsPage/SettingsPage.tsx b/ui/src/Pages/SettingsPage/SettingsPage.tsx
index e9769cd9..9da1757d 100644
--- a/ui/src/Pages/SettingsPage/SettingsPage.tsx
+++ b/ui/src/Pages/SettingsPage/SettingsPage.tsx
@@ -18,7 +18,7 @@ export const SectionTitle = ({ children, nospace }: SectionTitleProps) => {
   return (
     <h2
       className={classNames(
-        'pb-1 border-b border-gray-200 dark:border-[#3B3B3B] text-xl mb-5',
+        'pb-1 border-b border-gray-200 dark:border-dark-border text-xl mb-5',
         !nospace && 'mt-6'
       )}
     >
diff --git a/ui/src/components/album/AlbumFilter.tsx b/ui/src/components/album/AlbumFilter.tsx
index c0109319..9995c8a0 100644
--- a/ui/src/components/album/AlbumFilter.tsx
+++ b/ui/src/components/album/AlbumFilter.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as SortingIcon } from './icons/sorting.svg'
 import { ReactComponent as DirectionIcon } from './icons/direction-arrow.svg'
 
 import Dropdown from '../../primitives/form/Dropdown'
+import classNames from 'classnames'
 
 export type FavoriteCheckboxProps = {
   onlyFavorites: boolean
@@ -94,9 +95,11 @@ const SortingOptions = ({ setOrdering, ordering }: SortingOptionsProps) => {
         <button
           title="Sort direction"
           aria-label="Sort direction"
-          className={`bg-gray-50 h-[30px] align-top px-2 py-1 rounded ml-2 border border-gray-200 focus:outline-none focus:border-blue-300 text-[#8b8b8b] hover:bg-gray-100 hover:text-[#777] ${
-            ordering?.orderDirection == OrderDirection.ASC ? 'flip-y' : null
-          }`}
+          className={classNames(
+            'bg-gray-50 h-[30px] align-top px-2 py-1 rounded ml-2 border border-gray-200 focus:outline-none focus:border-blue-300 text-[#8b8b8b] hover:bg-gray-100 hover:text-[#777]',
+            'dark:bg-dark-input-bg dark:border-dark-input-border dark:text-dark-input-text dark:focus:border-blue-300',
+            { 'flip-y': ordering?.orderDirection == OrderDirection.ASC }
+          )}
           onClick={changeOrderDirection}
         >
           <DirectionIcon />
diff --git a/ui/src/components/album/AlbumTitle.tsx b/ui/src/components/album/AlbumTitle.tsx
index 189deb9d..4774b94e 100644
--- a/ui/src/components/album/AlbumTitle.tsx
+++ b/ui/src/components/album/AlbumTitle.tsx
@@ -9,6 +9,8 @@ import { albumPathQuery } from './__generated__/albumPathQuery'
 import useDelay from '../../hooks/useDelay'
 
 import { ReactComponent as GearIcon } from './icons/gear.svg'
+import { tailwindClassNames } from '../../helpers/utils'
+import { buttonStyles } from '../../primitives/form/Input'
 
 export const BreadcrumbList = styled.ol<{ hideLastArrow?: boolean }>`
   &
@@ -105,7 +107,7 @@ const AlbumTitle = ({ album, disableLink = false }: AlbumTitleProps) => {
         <button
           title="Album options"
           aria-label="Album options"
-          className="bg-gray-50 p-2 rounded ml-2 border border-gray-200 focus:outline-none focus:border-blue-300 text-[#8b8b8b] hover:bg-gray-100 hover:text-[#777]"
+          className={tailwindClassNames(buttonStyles({}), 'px-2 py-2 ml-2')}
           onClick={() => {
             updateSidebar(<AlbumSidebar albumId={album.id} />)
           }}
diff --git a/ui/src/components/layout/MainMenu.tsx b/ui/src/components/layout/MainMenu.tsx
index 035ffe01..e5181062 100644
--- a/ui/src/components/layout/MainMenu.tsx
+++ b/ui/src/components/layout/MainMenu.tsx
@@ -63,7 +63,7 @@ const MenuButton = ({
 }
 
 const MenuSeparator = () => (
-  <hr className="hidden lg:block my-3 border-gray-200 dark:border-[#3B3B3B]" />
+  <hr className="hidden lg:block my-3 border-gray-200 dark:border-dark-border" />
 )
 
 export const MainMenu = () => {
diff --git a/ui/src/components/mapbox/MapboxMap.tsx b/ui/src/components/mapbox/MapboxMap.tsx
index 071bd062..b2a30877 100644
--- a/ui/src/components/mapbox/MapboxMap.tsx
+++ b/ui/src/components/mapbox/MapboxMap.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 
 import 'mapbox-gl/dist/mapbox-gl.css'
 import { mapboxToken } from './__generated__/mapboxToken'
+import { isDarkMode } from '../../theme'
 
 const MAPBOX_TOKEN_QUERY = gql`
   query mapboxToken {
@@ -59,7 +60,9 @@ const useMapboxMap = ({
 
     map.current = new mapboxLibrary.Map({
       container: mapContainer.current,
-      style: 'mapbox://styles/mapbox/streets-v11',
+      style: isDarkMode()
+        ? 'mapbox://styles/mapbox/dark-v10'
+        : 'mapbox://styles/mapbox/streets-v11',
       ...mapboxOptions,
     })
 
diff --git a/ui/src/components/sidebar/AlbumCovers.tsx b/ui/src/components/sidebar/AlbumCovers.tsx
index 4b0d7abb..f4c04aaa 100644
--- a/ui/src/components/sidebar/AlbumCovers.tsx
+++ b/ui/src/components/sidebar/AlbumCovers.tsx
@@ -76,7 +76,7 @@ export const SidebarPhotoCover = ({ cover_id }: SidebarPhotoCoverProps) => {
       <div>
         <table className="border-collapse w-full">
           <tfoot>
-            <tr className="text-left border-gray-100 border-b border-t">
+            <tr className="text-left border-gray-100 dark:border-dark-border2 border-b border-t">
               <td colSpan={2} className="pl-4 py-2">
                 <button
                   className="disabled:opacity-50 text-green-500 font-bold uppercase text-xs"
@@ -133,7 +133,7 @@ export const SidebarAlbumCover = ({ id }: SidebarAlbumCoverProps) => {
       <div>
         <table className="border-collapse w-full">
           <tfoot>
-            <tr className="text-left border-gray-100 border-b border-t">
+            <tr className="text-left border-gray-100 dark:border-dark-border2 border-b border-t">
               <td colSpan={2} className="pl-4 py-2">
                 <button
                   className="disabled:opacity-50 text-red-500 font-bold uppercase text-xs"
diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
index fdadac8b..8c053735 100644
--- a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
+++ b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
@@ -183,7 +183,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
     const pathElms = [...(mediaAlbum.path ?? []), mediaAlbum].map(album => (
       <li key={album.id} className="inline-block hover:underline">
         <Link
-          className="text-blue-900 hover:underline"
+          className="text-blue-900 dark:text-blue-200 hover:underline"
           to={`/album/${album.id}`}
         >
           {album.title}
@@ -193,7 +193,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
 
     albumPath = (
       <div className="mx-4 my-4">
-        <h2 className="uppercase text-xs text-gray-900 font-semibold">
+        <h2 className="uppercase text-xs text-gray-900 dark:text-gray-300 font-semibold">
           {t('sidebar.media.album_path', 'Album path')}
         </h2>
         <BreadcrumbList hideLastArrow={true}>{pathElms}</BreadcrumbList>
diff --git a/ui/src/components/sidebar/Sharing.tsx b/ui/src/components/sidebar/Sharing.tsx
index 04d3a29c..4541a7a6 100644
--- a/ui/src/components/sidebar/Sharing.tsx
+++ b/ui/src/components/sidebar/Sharing.tsx
@@ -108,7 +108,7 @@ const DELETE_SHARE_MUTATION = gql`
 
 export const ArrowPopoverPanel = styled.div.attrs({
   className:
-    'absolute -top-3 bg-white rounded shadow-md border border-gray-200 z-10',
+    'absolute -top-3 bg-white dark:bg-dark-bg rounded shadow-md border border-gray-200 dark:border-dark-border z-10',
 })<{ width: number; flipped?: boolean }>`
   width: ${({ width }) => width}px;
 
@@ -269,7 +269,7 @@ const MorePopover = ({ id, share, query }: MorePopoverProps) => {
       <Popover.Panel>
         <ArrowPopoverPanel width={260}>
           <MorePopoverSectionPassword id={id} share={share} query={query} />
-          <div className="px-4 py-2 border-t border-gray-200 mt-2 mb-2">
+          <div className="px-4 py-2 border-t border-gray-200 dark:border-dark-border mt-2 mb-2">
             <Checkbox label="Expiration date" />
             <TextField className="mt-2 w-full" />
           </div>
@@ -405,9 +405,12 @@ const SidebarShare = ({
   }
 
   const optionsRows = shares.map(share => (
-    <tr key={share.token} className="border-gray-100 border-b border-t">
+    <tr
+      key={share.token}
+      className="border-gray-100 dark:border-dark-border2 border-b border-t"
+    >
       <td className="pl-4 py-2 w-full">
-        <span className="text-[#585858] mr-2">
+        <span className="text-[#585858] dark:text-[#C0C3C4] mr-2">
           <LinkIcon className="inline-block mr-2" />
           <span className="text-xs uppercase font-bold">
             {t('sidebar.sharing.public_link', 'Public Link') + ' '}
@@ -415,7 +418,7 @@ const SidebarShare = ({
         </span>
         <span className="text-sm">{share.token}</span>
       </td>
-      <td className="pr-6 py-2 whitespace-nowrap text-[#5C6A7F] flex">
+      <td className="pr-6 py-2 whitespace-nowrap text-[#5C6A7F] dark:text-[#7599ca] flex">
         <button
           className="align-middle p-1 ml-2"
           title={t('sidebar.sharing.copy_link', 'Copy Link')}
@@ -443,8 +446,14 @@ const SidebarShare = ({
 
   if (optionsRows.length == 0) {
     optionsRows.push(
-      <tr key="no-shares" className="border-gray-100 border-b border-t">
-        <td colSpan={2} className="pl-4 py-2 italic text-gray-600">
+      <tr
+        key="no-shares"
+        className="border-gray-100 dark:border-dark-border2 border-b border-t"
+      >
+        <td
+          colSpan={2}
+          className="pl-4 py-2 italic text-gray-600 dark:text-gray-300"
+        >
           {t('sidebar.sharing.no_shares_found', 'No shares found')}
         </td>
       </tr>
@@ -460,7 +469,7 @@ const SidebarShare = ({
         <table className="border-collapse w-full">
           <tbody>{optionsRows}</tbody>
           <tfoot>
-            <tr className="text-left border-gray-100 border-b border-t">
+            <tr className="text-left border-gray-100 dark:border-dark-border2 border-b border-t">
               <td colSpan={2} className="pl-4 py-2">
                 <button
                   className="text-green-500 font-bold uppercase text-xs"
diff --git a/ui/src/components/sidebar/Sidebar.tsx b/ui/src/components/sidebar/Sidebar.tsx
index 090ce533..9ac5c77d 100644
--- a/ui/src/components/sidebar/Sidebar.tsx
+++ b/ui/src/components/sidebar/Sidebar.tsx
@@ -89,7 +89,7 @@ export const Sidebar = () => {
 
   return (
     <div
-      className={`fixed top-[72px] bg-white dark:bg-dark-bg2 bottom-0 w-full overflow-y-auto transform transition-transform motion-reduce:transition-none ${
+      className={`fixed top-[72px] bg-white dark:bg-dark-bg2 dark:border-dark-border2 bottom-0 w-full overflow-y-auto transform transition-transform motion-reduce:transition-none ${
         content == null && !pinned ? 'translate-x-full' : 'translate-x-0'
       } ${
         pinned ? 'lg:border-l' : 'lg:shadow-separator'
diff --git a/ui/src/components/sidebar/SidebarDownloadMedia.tsx b/ui/src/components/sidebar/SidebarDownloadMedia.tsx
index 01d4f5ef..ecb06043 100644
--- a/ui/src/components/sidebar/SidebarDownloadMedia.tsx
+++ b/ui/src/components/sidebar/SidebarDownloadMedia.tsx
@@ -212,7 +212,7 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
   const bytes = formatBytes(t)
   const downloadRows = rows.map(x => (
     <tr
-      className="cursor-pointer border-gray-100 border-b hover:bg-gray-50 focus:bg-gray-50"
+      className="cursor-pointer border-gray-100 dark:border-dark-border2 border-b hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-[#3c4759] dark:focus:bg-[#3c4759]"
       key={x.url}
       onClick={() => download(x.url)}
       tabIndex={0}
@@ -226,8 +226,8 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
 
   return (
     <table className="table-fixed w-full">
-      <thead className="bg-[#f9f9fb]">
-        <tr className="text-left uppercase text-xs border-gray-100 border-b border-t">
+      <thead className="bg-[#f9f9fb] dark:bg-[#2B3037]">
+        <tr className="text-left uppercase text-xs border-gray-100 dark:border-dark-border2 border-b border-t">
           <th className="w-2/6 pl-4 py-2">
             {t('sidebar.download.table_columns.name', 'Name')}
           </th>
diff --git a/ui/src/components/sidebar/SidebarHeader.tsx b/ui/src/components/sidebar/SidebarHeader.tsx
index feb98ebe..0a6d39ce 100644
--- a/ui/src/components/sidebar/SidebarHeader.tsx
+++ b/ui/src/components/sidebar/SidebarHeader.tsx
@@ -21,7 +21,7 @@ const SidebarHeader = ({ title }: SidebarHeaderProps) => {
         title="Close sidebar"
         onClick={() => updateSidebar(null)}
       >
-        <CloseIcon className="m-2" />
+        <CloseIcon className="m-2 text-[#1F2021] dark:text-[#abadaf]" />
       </button>
       <span className="flex-grow -mt-1 ml-2">{title}</span>
       <button
@@ -29,7 +29,7 @@ const SidebarHeader = ({ title }: SidebarHeaderProps) => {
         title="Pin sidebar"
         onClick={() => setPinned(!pinned)}
       >
-        <PinIcon className="m-2" />
+        <PinIcon className="m-2 text-[#1F2021] dark:text-[#abadaf]" />
       </button>
     </div>
   )
diff --git a/ui/src/components/sidebar/SidebarItem.tsx b/ui/src/components/sidebar/SidebarItem.tsx
index 1608f733..9a111d3b 100644
--- a/ui/src/components/sidebar/SidebarItem.tsx
+++ b/ui/src/components/sidebar/SidebarItem.tsx
@@ -1,20 +1,4 @@
 import React from 'react'
-import styled from 'styled-components'
-
-const ItemName = styled.div`
-  display: inline-block;
-  width: 100px;
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: #888;
-  text-align: right;
-  margin-right: 0.5rem;
-`
-
-const ItemValue = styled.div`
-  display: inline-block;
-  font-size: 1rem;
-`
 
 type SidebarItemProps = {
   name: string
@@ -23,8 +7,10 @@ type SidebarItemProps = {
 
 const SidebarItem = ({ name, value }: SidebarItemProps) => (
   <div>
-    <ItemName>{name}</ItemName>
-    <ItemValue>{value}</ItemValue>
+    <div className="inline-block w-[100px] font-semibold text-sm text-[#888] text-right mr-2">
+      {name}
+    </div>
+    <div className="inline-block text-base">{value}</div>
   </div>
 )
 
diff --git a/ui/src/components/sidebar/icons/closeSidebarIcon.svg b/ui/src/components/sidebar/icons/closeSidebarIcon.svg
index 1d73015f..18eefbbe 100644
--- a/ui/src/components/sidebar/icons/closeSidebarIcon.svg
+++ b/ui/src/components/sidebar/icons/closeSidebarIcon.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <path stroke="none" stroke-width="1" fill="none" d="M1,11 L11,1 M11,11 L1,1" stroke="#1F2021" stroke-width="2"></path>
+  <path stroke="none" stroke-width="1" fill="none" d="M1,11 L11,1 M11,11 L1,1" stroke="currentColor" stroke-width="2"></path>
 </svg>
\ No newline at end of file
diff --git a/ui/src/components/sidebar/icons/pinSidebarIconFilled.svg b/ui/src/components/sidebar/icons/pinSidebarIconFilled.svg
index a363dc03..0abac820 100644
--- a/ui/src/components/sidebar/icons/pinSidebarIconFilled.svg
+++ b/ui/src/components/sidebar/icons/pinSidebarIconFilled.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(8, 8.5) rotate(-330) translate(-8, -8.5) translate(4, 2)" stroke="#1F2021" fill="#1F2021">
+        <g transform="translate(8, 8.5) rotate(-330) translate(-8, -8.5) translate(4, 2)" stroke="currentColor" fill="currentColor">
             <path d="M6.76850191,0.434840963 C6.04896114,1.86467297 5.79279384,3.20120746 6,4.44444444 C6.17989677,5.52382504 6.63266329,6.48919052 7.35829958,7.34054088 C7.50158762,7.50867286 7.48146228,7.76112984 7.31333862,7.90442763 C7.24096223,7.96611661 7.14897427,8 7.053875,8 L0.922873286,8 C0.701919553,8.00007212 0.522801161,7.82095373 0.522801161,7.59999999 C0.522801161,7.50599929 0.555900634,7.41500023 0.616293108,7.34296634 C1.36567981,6.44912577 1.82691544,5.48295181 2,4.44444444 C2.19754347,3.25918364 1.93688287,1.92116674 1.21801821,0.430393743 C1.14595115,0.281147735 1.2086138,0.10177184 1.35789863,0.0297852978 C1.39855358,0.0101811032 1.44310701,8.29112604e-18 1.4882418,0 L6.50055336,0 C6.666219,3.58349532e-05 6.80051754,0.134334371 6.80051754,0.300000012 C6.80051754,0.346829895 6.78955305,0.393009303 6.76850191,0.434840963 Z" stroke-linejoin="round"></path>
             <line x1="4" y1="8" x2="4" y2="13" stroke-linecap="round"></line>
         </g>
diff --git a/ui/src/components/sidebar/icons/pinSidebarIconOutline.svg b/ui/src/components/sidebar/icons/pinSidebarIconOutline.svg
index 08eab7ac..2ba7e90d 100644
--- a/ui/src/components/sidebar/icons/pinSidebarIconOutline.svg
+++ b/ui/src/components/sidebar/icons/pinSidebarIconOutline.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(8, 8.5) rotate(-330) translate(-8, -8.5) translate(4, 2)" stroke="#1F2021">
+        <g transform="translate(8, 8.5) rotate(-330) translate(-8, -8.5) translate(4, 2)" stroke="currentColor">
             <path d="M6.76850191,0.434840963 C6.04896114,1.86467297 5.79279384,3.20120746 6,4.44444444 C6.17989677,5.52382504 6.63266329,6.48919052 7.35829958,7.34054088 C7.50158762,7.50867286 7.48146228,7.76112984 7.31333862,7.90442763 C7.24096223,7.96611661 7.14897427,8 7.053875,8 L0.922873286,8 C0.701919553,8.00007212 0.522801161,7.82095373 0.522801161,7.59999999 C0.522801161,7.50599929 0.555900634,7.41500023 0.616293108,7.34296634 C1.36567981,6.44912577 1.82691544,5.48295181 2,4.44444444 C2.19754347,3.25918364 1.93688287,1.92116674 1.21801821,0.430393743 C1.14595115,0.281147735 1.2086138,0.10177184 1.35789863,0.0297852978 C1.39855358,0.0101811032 1.44310701,8.29112604e-18 1.4882418,0 L6.50055336,0 C6.666219,3.58349532e-05 6.80051754,0.134334371 6.80051754,0.300000012 C6.80051754,0.346829895 6.78955305,0.393009303 6.76850191,0.434840963 Z" stroke-linejoin="round"></path>
             <line x1="4" y1="8" x2="4" y2="13" stroke-linecap="round"></line>
         </g>
diff --git a/ui/src/extractedTranslations/da/translation.json b/ui/src/extractedTranslations/da/translation.json
index 61a39493..f06f1be5 100644
--- a/ui/src/extractedTranslations/da/translation.json
+++ b/ui/src/extractedTranslations/da/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Vis kun favoritter",
     "sort": "Sorter",
+    "sort_by": "Sorter efter",
     "sorting_options": {
       "date_imported": "Dato for importering",
       "date_shot": "Dato",
       "title": "Titel",
       "type": "Type"
-    },
-    "sort_by": "Sorter efter"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Vælg sprog"
       },
+      "theme": {
+        "auto": {
+          "label": "Samme som system"
+        },
+        "dark": {
+          "label": "Mørk"
+        },
+        "description": "Ændre hjemmesidens udseende",
+        "light": {
+          "label": "Lys"
+        },
+        "title": "Temaindstillinger"
+      },
       "title": "Brugerindstillinger"
     },
     "users": {
@@ -240,16 +253,16 @@
     },
     "download": {
       "filesize": {
-        "byte": "{{count}} Byte",
-        "byte_plural": "{{count}} Bytes",
-        "giga_byte": "{{count}} GB",
-        "giga_byte_plural": "",
-        "kilo_byte": "{{count}} KB",
-        "kilo_byte_plural": "",
-        "mega_byte": "{{count}} MB",
-        "mega_byte_plural": "",
-        "tera_byte": "{{count}} TB",
-        "tera_byte_plural": ""
+        "byte_one": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimension",
diff --git a/ui/src/extractedTranslations/da/translation_old.json b/ui/src/extractedTranslations/da/translation_old.json
index ec51c670..9818ce91 100644
--- a/ui/src/extractedTranslations/da/translation_old.json
+++ b/ui/src/extractedTranslations/da/translation_old.json
@@ -20,6 +20,12 @@
     }
   },
   "people_page": {
+    "action_label": {
+      "change_label": null,
+      "detach_face": null,
+      "merge_face": null,
+      "move_faces": null
+    },
     "face_group": {
       "action": {
         "add_label": "Tilføj navn",
@@ -29,20 +35,6 @@
         "move_faces": "Flyt ansigter"
       }
     },
-    "table": {
-      "select_face_group": {
-        "search_faces_placeholder": "Søg ansigter..."
-      },
-      "select_image_faces": {
-        "search_images_placeholder": "Søg billeder..."
-      }
-    },
-    "action_label": {
-      "change_label": null,
-      "merge_face": null,
-      "detach_face": null,
-      "move_faces": null
-    },
     "modal": {
       "merge_people_groups": {
         "description": "Alle billeder fra denne gruppe vil blive flettet sammen med den valgte gruppe",
@@ -51,6 +43,14 @@
         },
         "title": "Vælg gruppe at flette med"
       }
+    },
+    "table": {
+      "select_face_group": {
+        "search_faces_placeholder": "Søg ansigter..."
+      },
+      "select_image_faces": {
+        "search_images_placeholder": "Søg billeder..."
+      }
     }
   },
   "settings": {
@@ -64,25 +64,31 @@
   },
   "sidebar": {
     "album": {
-      "title": "Indstillinger for album",
       "album_cover": null,
       "cover_photo": "",
       "reset_cover": null,
-      "set_cover": null
-    },
-    "sharing": {
-      "table_header": "Offentlige delinger"
+      "set_cover": null,
+      "title": "Indstillinger for album"
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
-        "kilo_byte_plural": null,
-        "mega_byte_plural": null,
-        "tera_byte_plural": null
+        "byte": "{{count}} Byte",
+        "byte_plural": "{{count}} Bytes",
+        "giga_byte": "{{count}} GB",
+        "giga_byte_plural": "",
+        "kilo_byte": "{{count}} KB",
+        "kilo_byte_plural": "",
+        "mega_byte": "{{count}} MB",
+        "mega_byte_plural": "",
+        "tera_byte": "{{count}} TB",
+        "tera_byte_plural": ""
       }
     },
     "media": {
       "album": "Album"
+    },
+    "sharing": {
+      "table_header": "Offentlige delinger"
     }
   },
   "timeline_filter": {
diff --git a/ui/src/extractedTranslations/de/translation.json b/ui/src/extractedTranslations/de/translation.json
index a5157e5f..a1b28c83 100644
--- a/ui/src/extractedTranslations/de/translation.json
+++ b/ui/src/extractedTranslations/de/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Nur Favoriten anzeigen",
     "sort": "",
+    "sort_by": "Sortieren nach",
     "sorting_options": {
       "date_imported": "Importdatum",
       "date_shot": "Aufnahmedatum",
       "title": "Titel",
       "type": "Typ"
-    },
-    "sort_by": "Sortieren nach"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Sprache auswählen"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "Persönliche Einstellungen"
     },
     "users": {
@@ -240,16 +253,16 @@
     },
     "download": {
       "filesize": {
-        "byte": "{{count}} Byte",
-        "byte_plural": "{{count}} Bytes",
-        "giga_byte": "{{count}} GB",
-        "giga_byte_plural": "",
-        "kilo_byte": "{{count}} KB",
-        "kilo_byte_plural": "",
-        "mega_byte": "{{count}} MB",
-        "mega_byte_plural": "",
-        "tera_byte": "{{count}} TB",
-        "tera_byte_plural": ""
+        "byte_one": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimension",
diff --git a/ui/src/extractedTranslations/de/translation_old.json b/ui/src/extractedTranslations/de/translation_old.json
index d21d24f8..24693bef 100644
--- a/ui/src/extractedTranslations/de/translation_old.json
+++ b/ui/src/extractedTranslations/de/translation_old.json
@@ -1,4 +1,7 @@
 {
+  "album_filter": {
+    "sort": null
+  },
   "albums_page": {
     "title": "Alben"
   },
@@ -15,12 +18,18 @@
   "header": {
     "search": {
       "result_type": {
-        "photos": "Fotos",
-        "media": null
+        "media": null,
+        "photos": "Fotos"
       }
     }
   },
   "people_page": {
+    "action_label": {
+      "change_label": null,
+      "detach_face": null,
+      "merge_face": null,
+      "move_faces": null
+    },
     "face_group": {
       "action": {
         "add_label": null,
@@ -50,6 +59,13 @@
         },
         "title": null
       },
+      "merge_people_groups": {
+        "description": "",
+        "destination_table": {
+          "title": ""
+        },
+        "title": ""
+      },
       "move_image_faces": {
         "description": null,
         "destination_face_group_table": {
@@ -61,13 +77,6 @@
           "title": null
         },
         "title": null
-      },
-      "merge_people_groups": {
-        "description": "",
-        "destination_table": {
-          "title": ""
-        },
-        "title": ""
       }
     },
     "table": {
@@ -78,12 +87,6 @@
         "search_images_placeholder": null
       }
     },
-    "action_label": {
-      "change_label": null,
-      "merge_face": null,
-      "detach_face": null,
-      "move_faces": null
-    },
     "tableselect_face_group": {
       "search_faces_placeholder": null
     },
@@ -101,38 +104,41 @@
       }
     }
   },
+  "share_page": {
+    "protected_share": {
+      "password_required_error": null
+    }
+  },
   "sidebar": {
     "album": {
-      "title": "Album Optionen",
-      "title_placeholder": null,
       "album_cover": null,
       "cover_photo": "",
       "reset_cover": null,
-      "set_cover": null
-    },
-    "sharing": {
-      "table_header": "Öffentliche Freigabe",
-      "delete": null,
-      "more": null
+      "set_cover": null,
+      "title": "Album Optionen",
+      "title_placeholder": null
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
-        "kilo_byte_plural": null,
-        "mega_byte_plural": null,
-        "tera_byte_plural": null
+        "byte": "{{count}} Byte",
+        "byte_plural": "{{count}} Bytes",
+        "giga_byte": "{{count}} GB",
+        "giga_byte_plural": "",
+        "kilo_byte": "{{count}} KB",
+        "kilo_byte_plural": "",
+        "mega_byte": "{{count}} MB",
+        "mega_byte_plural": "",
+        "tera_byte": "{{count}} TB",
+        "tera_byte_plural": ""
       }
     },
     "media": {
       "album": ""
-    }
-  },
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
+    },
+    "sharing": {
+      "delete": null,
+      "more": null,
+      "table_header": "Öffentliche Freigabe"
     }
   },
   "timeline_filter": {
diff --git a/ui/src/extractedTranslations/en/translation.json b/ui/src/extractedTranslations/en/translation.json
index 791c7d2b..54848d99 100644
--- a/ui/src/extractedTranslations/en/translation.json
+++ b/ui/src/extractedTranslations/en/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Show only favorites",
     "sort": "Sort",
+    "sort_by": "Sort by",
     "sorting_options": {
       "date_imported": "Date imported",
       "date_shot": "Date shot",
       "title": "Title",
       "type": "Kind"
-    },
-    "sort_by": "Sort by"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Select language"
       },
+      "theme": {
+        "auto": {
+          "label": "Same as system"
+        },
+        "dark": {
+          "label": "Dark"
+        },
+        "description": "Change the appearance of the website",
+        "light": {
+          "label": "Light"
+        },
+        "title": "Theme preferences"
+      },
       "title": "User preferences"
     },
     "users": {
@@ -240,16 +253,16 @@
     },
     "download": {
       "filesize": {
-        "byte": "{{count}} Byte",
-        "byte_plural": "{{count}} Bytes",
-        "giga_byte": "{{count}} GB",
-        "giga_byte_plural": "{{count}} GB",
-        "kilo_byte": "{{count}} KB",
-        "kilo_byte_plural": "{{count}} KB",
-        "mega_byte": "{{count}} MB",
-        "mega_byte_plural": "{{count}} MB",
-        "tera_byte": "{{count}} TB",
-        "tera_byte_plural": "{{count}} TB"
+        "byte_one": "{{count}} Byte",
+        "byte_other": "{{count}} Bytes",
+        "giga_byte_one": "{{count}} GB",
+        "giga_byte_other": "{{count}} GB",
+        "kilo_byte_one": "{{count}} KB",
+        "kilo_byte_other": "{{count}} KB",
+        "mega_byte_one": "{{count}} MB",
+        "mega_byte_other": "{{count}} MB",
+        "tera_byte_one": "{{count}} TB",
+        "tera_byte_other": "{{count}} TB"
       },
       "table_columns": {
         "dimensions": "Dimensions",
diff --git a/ui/src/extractedTranslations/en/translation_old.json b/ui/src/extractedTranslations/en/translation_old.json
index 1a503606..aab7604f 100644
--- a/ui/src/extractedTranslations/en/translation_old.json
+++ b/ui/src/extractedTranslations/en/translation_old.json
@@ -29,14 +29,6 @@
         "move_faces": "Move Faces"
       }
     },
-    "table": {
-      "select_face_group": {
-        "search_faces_placeholder": "Search faces..."
-      },
-      "select_image_faces": {
-        "search_images_placeholder": "Search images..."
-      }
-    },
     "modal": {
       "merge_people_groups": {
         "description": "All images within this face group will be merged into the selected face group.",
@@ -45,6 +37,14 @@
         },
         "title": "Merge Face Groups"
       }
+    },
+    "table": {
+      "select_face_group": {
+        "search_faces_placeholder": "Search faces..."
+      },
+      "select_image_faces": {
+        "search_images_placeholder": "Search images..."
+      }
     }
   },
   "settings": {
@@ -58,14 +58,28 @@
   },
   "sidebar": {
     "album": {
-      "title": "Album options",
-      "cover_photo": "Album cover"
+      "cover_photo": "Album cover",
+      "title": "Album options"
     },
-    "sharing": {
-      "table_header": "Public shares"
+    "download": {
+      "filesize": {
+        "byte": "{{count}} Byte",
+        "byte_plural": "{{count}} Bytes",
+        "giga_byte": "{{count}} GB",
+        "giga_byte_plural": "{{count}} GB",
+        "kilo_byte": "{{count}} KB",
+        "kilo_byte_plural": "{{count}} KB",
+        "mega_byte": "{{count}} MB",
+        "mega_byte_plural": "{{count}} MB",
+        "tera_byte": "{{count}} TB",
+        "tera_byte_plural": "{{count}} TB"
+      }
     },
     "media": {
       "album": "Album"
+    },
+    "sharing": {
+      "table_header": "Public shares"
     }
   }
 }
diff --git a/ui/src/extractedTranslations/es/translation.json b/ui/src/extractedTranslations/es/translation.json
index 8003028d..cad81fd1 100644
--- a/ui/src/extractedTranslations/es/translation.json
+++ b/ui/src/extractedTranslations/es/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Solo mostrar favoritos",
     "sort": "",
+    "sort_by": "Ordenar por",
     "sorting_options": {
       "date_imported": "Fecha de importado",
       "date_shot": "Fecha de la foto",
       "title": "Título",
       "type": "Tipo"
-    },
-    "sort_by": "Ordenar por"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Seleccionar idioma"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "Preferencias de usuario"
     },
     "users": {
@@ -240,16 +253,16 @@
     },
     "download": {
       "filesize": {
-        "byte": "{{count}} Byte",
-        "byte_plural": "{{count}} Bytes",
-        "giga_byte": "{{count}} GB",
-        "giga_byte_plural": "",
-        "kilo_byte": "{{count}} KB",
-        "kilo_byte_plural": "",
-        "mega_byte": "{{count}} MB",
-        "mega_byte_plural": "",
-        "tera_byte": "{{count}} TB",
-        "tera_byte_plural": ""
+        "byte_one": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimensiones",
diff --git a/ui/src/extractedTranslations/es/translation_old.json b/ui/src/extractedTranslations/es/translation_old.json
index eee880ee..61afe489 100644
--- a/ui/src/extractedTranslations/es/translation_old.json
+++ b/ui/src/extractedTranslations/es/translation_old.json
@@ -1,4 +1,7 @@
 {
+  "album_filter": {
+    "sort": null
+  },
   "albums_page": {
     "title": "Álbumes"
   },
@@ -15,12 +18,18 @@
   "header": {
     "search": {
       "result_type": {
-        "photos": "Fotos",
-        "media": null
+        "media": null,
+        "photos": "Fotos"
       }
     }
   },
   "people_page": {
+    "action_label": {
+      "change_label": null,
+      "detach_face": null,
+      "merge_face": null,
+      "move_faces": null
+    },
     "face_group": {
       "action": {
         "add_label": null,
@@ -50,6 +59,13 @@
         },
         "title": null
       },
+      "merge_people_groups": {
+        "description": "",
+        "destination_table": {
+          "title": ""
+        },
+        "title": ""
+      },
       "move_image_faces": {
         "description": null,
         "destination_face_group_table": {
@@ -61,13 +77,6 @@
           "title": null
         },
         "title": null
-      },
-      "merge_people_groups": {
-        "description": "",
-        "destination_table": {
-          "title": ""
-        },
-        "title": ""
       }
     },
     "table": {
@@ -78,12 +87,6 @@
         "search_images_placeholder": null
       }
     },
-    "action_label": {
-      "change_label": null,
-      "merge_face": null,
-      "detach_face": null,
-      "move_faces": null
-    },
     "tableselect_face_group": {
       "search_faces_placeholder": null
     },
@@ -106,41 +109,41 @@
       "version_title": null
     }
   },
+  "share_page": {
+    "protected_share": {
+      "password_required_error": null
+    }
+  },
   "sidebar": {
     "album": {
-      "title": "opciones de álbum",
-      "title_placeholder": null,
       "album_cover": null,
       "cover_photo": "",
       "reset_cover": null,
-      "set_cover": null
-    },
-    "sharing": {
-      "table_header": "Compartidos públicos",
-      "delete": null,
-      "more": null
+      "set_cover": null,
+      "title": "opciones de álbum",
+      "title_placeholder": null
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
-        "kilo_byte_plural": null,
-        "mega_byte_plural": null,
-        "tera_byte_plural": null
+        "byte": "{{count}} Byte",
+        "byte_plural": "{{count}} Bytes",
+        "giga_byte": "{{count}} GB",
+        "giga_byte_plural": "",
+        "kilo_byte": "{{count}} KB",
+        "kilo_byte_plural": "",
+        "mega_byte": "{{count}} MB",
+        "mega_byte_plural": "",
+        "tera_byte": "{{count}} TB",
+        "tera_byte_plural": ""
       }
     },
     "media": {
       "album": ""
-    }
-  },
-  "title": {
-    "login": null
-  },
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
+    },
+    "sharing": {
+      "delete": null,
+      "more": null,
+      "table_header": "Compartidos públicos"
     }
   },
   "timeline_filter": {
@@ -148,5 +151,8 @@
       "dropdown_all": null,
       "label": null
     }
+  },
+  "title": {
+    "login": null
   }
 }
diff --git a/ui/src/extractedTranslations/fr/translation.json b/ui/src/extractedTranslations/fr/translation.json
index 51ca9cde..d56d45c8 100644
--- a/ui/src/extractedTranslations/fr/translation.json
+++ b/ui/src/extractedTranslations/fr/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Afficher seulement les favoris",
     "sort": "Trier",
+    "sort_by": "Trier par",
     "sorting_options": {
       "date_imported": "Date d'importation",
       "date_shot": "Date de prise de vue",
       "title": "Titre",
       "type": "Type"
-    },
-    "sort_by": "Trier par"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Choisir la langue"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "Paramètres d'utilisateur"
     },
     "users": {
@@ -240,16 +253,21 @@
     },
     "download": {
       "filesize": {
-        "byte": "{{count}} Octets",
-        "byte_plural": "{{count}} Octets",
-        "giga_byte": "{{count}} Go",
-        "giga_byte_plural": "{{count}} Go",
-        "kilo_byte": "{{count}} Ko",
-        "kilo_byte_plural": "{{count}} Ko",
-        "mega_byte": "{{count}} Mo",
-        "mega_byte_plural": "{{count}} Mo",
-        "tera_byte": "{{count}} To",
-        "tera_byte_plural": "{{count}} To"
+        "byte_one": "",
+        "byte_many": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_many": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_many": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_many": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_many": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimensions",
diff --git a/ui/src/extractedTranslations/fr/translation_old.json b/ui/src/extractedTranslations/fr/translation_old.json
index 58420ff0..c383345b 100644
--- a/ui/src/extractedTranslations/fr/translation_old.json
+++ b/ui/src/extractedTranslations/fr/translation_old.json
@@ -49,6 +49,13 @@
         },
         "title": null
       },
+      "merge_people_groups": {
+        "description": "Toutes les images de ce groupe de visages seront fusionnées dans le groupe de visages sélectionné.",
+        "destination_table": {
+          "title": "Sélectionner le visage de destination"
+        },
+        "title": "Fusionner des groupes de visages"
+      },
       "move_image_faces": {
         "description": null,
         "destination_face_group_table": {
@@ -60,13 +67,6 @@
           "title": null
         },
         "title": null
-      },
-      "merge_people_groups": {
-        "description": "Toutes les images de ce groupe de visages seront fusionnées dans le groupe de visages sélectionné.",
-        "destination_table": {
-          "title": "Sélectionner le visage de destination"
-        },
-        "title": "Fusionner des groupes de visages"
       }
     },
     "table": {
@@ -94,26 +94,40 @@
   },
   "sidebar": {
     "album": {
-      "title": "Paramètres de l'album",
       "album_cover": null,
       "cover_photo": "",
       "reset_cover": null,
-      "set_cover": null
+      "set_cover": null,
+      "title": "Paramètres de l'album"
     },
-    "sharing": {
-      "table_header": "Partages publics"
+    "download": {
+      "filesize": {
+        "byte": "{{count}} Octets",
+        "byte_plural": "{{count}} Octets",
+        "giga_byte": "{{count}} Go",
+        "giga_byte_plural": "{{count}} Go",
+        "kilo_byte": "{{count}} Ko",
+        "kilo_byte_plural": "{{count}} Ko",
+        "mega_byte": "{{count}} Mo",
+        "mega_byte_plural": "{{count}} Mo",
+        "tera_byte": "{{count}} To",
+        "tera_byte_plural": "{{count}} To"
+      }
     },
     "media": {
       "album": ""
+    },
+    "sharing": {
+      "table_header": "Partages publics"
     }
   },
-  "title": {
-    "login": null
-  },
   "timeline_filter": {
     "date": {
       "dropdown_all": null,
       "label": null
     }
+  },
+  "title": {
+    "login": null
   }
 }
diff --git a/ui/src/extractedTranslations/it/translation.json b/ui/src/extractedTranslations/it/translation.json
index 528d835e..3b57bae1 100644
--- a/ui/src/extractedTranslations/it/translation.json
+++ b/ui/src/extractedTranslations/it/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Mostra solo i preferiti",
     "sort": "",
+    "sort_by": "Ordina per",
     "sorting_options": {
       "date_imported": "Data importazione",
       "date_shot": "Data scatto",
       "title": "Titolo",
       "type": "Tipo"
-    },
-    "sort_by": "Ordina per"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Seleziona lingua"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "Preferenze utente"
     },
     "users": {
@@ -240,16 +253,16 @@
     },
     "download": {
       "filesize": {
-        "byte": "{{count}} Byte",
-        "byte_plural": "{{count}} Bytes",
-        "giga_byte": "{{count}} GB",
-        "giga_byte_plural": "",
-        "kilo_byte": "{{count}} KB",
-        "kilo_byte_plural": "",
-        "mega_byte": "{{count}} MB",
-        "mega_byte_plural": "",
-        "tera_byte": "{{count}} TB",
-        "tera_byte_plural": ""
+        "byte_one": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimensioni",
diff --git a/ui/src/extractedTranslations/it/translation_old.json b/ui/src/extractedTranslations/it/translation_old.json
index 3cd12dd9..1df62279 100644
--- a/ui/src/extractedTranslations/it/translation_old.json
+++ b/ui/src/extractedTranslations/it/translation_old.json
@@ -1,4 +1,7 @@
 {
+  "album_filter": {
+    "sort": null
+  },
   "albums_page": {
     "title": "Album"
   },
@@ -15,12 +18,18 @@
   "header": {
     "search": {
       "result_type": {
-        "photos": "Foto",
-        "media": null
+        "media": null,
+        "photos": "Foto"
       }
     }
   },
   "people_page": {
+    "action_label": {
+      "change_label": null,
+      "detach_face": null,
+      "merge_face": null,
+      "move_faces": null
+    },
     "face_group": {
       "action": {
         "add_label": "Aggiungi etichetta",
@@ -30,6 +39,15 @@
         "move_faces": "Sposta volti"
       }
     },
+    "modal": {
+      "merge_people_groups": {
+        "description": "Tutte le immagini di questo volto saranno unite alle immagini del volto selezionato",
+        "destination_table": {
+          "title": "Seleziona il volto di destinazione"
+        },
+        "title": "Unisci immagini volto"
+      }
+    },
     "table": {
       "select_face_group": {
         "search_faces_placeholder": "Cerca volti..."
@@ -38,26 +56,11 @@
         "search_images_placeholder": "Cerca immagini..."
       }
     },
-    "action_label": {
-      "change_label": null,
-      "merge_face": null,
-      "detach_face": null,
-      "move_faces": null
-    },
     "tableselect_face_group": {
       "search_faces_placeholder": null
     },
     "tableselect_image_faces": {
       "search_images_placeholder": null
-    },
-    "modal": {
-      "merge_people_groups": {
-        "description": "Tutte le immagini di questo volto saranno unite alle immagini del volto selezionato",
-        "destination_table": {
-          "title": "Seleziona il volto di destinazione"
-        },
-        "title": "Unisci immagini volto"
-      }
     }
   },
   "settings": {
@@ -70,38 +73,41 @@
       }
     }
   },
+  "share_page": {
+    "protected_share": {
+      "password_required_error": null
+    }
+  },
   "sidebar": {
     "album": {
-      "title": "Opzioni Album",
-      "title_placeholder": null,
       "album_cover": null,
       "cover_photo": "",
       "reset_cover": null,
-      "set_cover": null
-    },
-    "sharing": {
-      "table_header": "Condivisioni pubbliche",
-      "delete": null,
-      "more": null
+      "set_cover": null,
+      "title": "Opzioni Album",
+      "title_placeholder": null
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
-        "kilo_byte_plural": null,
-        "mega_byte_plural": null,
-        "tera_byte_plural": null
+        "byte": "{{count}} Byte",
+        "byte_plural": "{{count}} Bytes",
+        "giga_byte": "{{count}} GB",
+        "giga_byte_plural": "",
+        "kilo_byte": "{{count}} KB",
+        "kilo_byte_plural": "",
+        "mega_byte": "{{count}} MB",
+        "mega_byte_plural": "",
+        "tera_byte": "{{count}} TB",
+        "tera_byte_plural": ""
       }
     },
     "media": {
       "album": ""
-    }
-  },
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
+    },
+    "sharing": {
+      "delete": null,
+      "more": null,
+      "table_header": "Condivisioni pubbliche"
     }
   },
   "timeline_filter": {
diff --git a/ui/src/extractedTranslations/pl/translation.json b/ui/src/extractedTranslations/pl/translation.json
index 8e7186f0..59688be8 100644
--- a/ui/src/extractedTranslations/pl/translation.json
+++ b/ui/src/extractedTranslations/pl/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Pokaż tylko ulubione",
     "sort": "",
+    "sort_by": "Sortuj",
     "sorting_options": {
       "date_imported": "Data zaimportowania",
       "date_shot": "Data wykonania",
       "title": "Tytuł",
       "type": "Rodzaj"
-    },
-    "sort_by": "Sortuj"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Wybierz język"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "Preferencje użytkownika"
     },
     "users": {
@@ -240,21 +253,26 @@
     },
     "download": {
       "filesize": {
-        "byte_0": "",
-        "byte_1": "",
-        "byte_2": "",
-        "giga_byte_0": "",
-        "giga_byte_1": "",
-        "giga_byte_2": "",
-        "kilo_byte_0": "",
-        "kilo_byte_1": "",
-        "kilo_byte_2": "",
-        "mega_byte_0": "",
-        "mega_byte_1": "",
-        "mega_byte_2": "",
-        "tera_byte_0": "",
-        "tera_byte_1": "",
-        "tera_byte_2": ""
+        "byte_one": "",
+        "byte_few": "",
+        "byte_many": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_few": "",
+        "giga_byte_many": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_few": "",
+        "kilo_byte_many": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_few": "",
+        "mega_byte_many": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_few": "",
+        "tera_byte_many": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Wymiary",
diff --git a/ui/src/extractedTranslations/pl/translation_old.json b/ui/src/extractedTranslations/pl/translation_old.json
index fab43741..6b2286b3 100644
--- a/ui/src/extractedTranslations/pl/translation_old.json
+++ b/ui/src/extractedTranslations/pl/translation_old.json
@@ -1,4 +1,7 @@
 {
+  "album_filter": {
+    "sort": null
+  },
   "albums_page": {
     "title": "Albumy"
   },
@@ -15,12 +18,18 @@
   "header": {
     "search": {
       "result_type": {
-        "photos": "Zdjęcia",
-        "media": null
+        "media": null,
+        "photos": "Zdjęcia"
       }
     }
   },
   "people_page": {
+    "action_label": {
+      "change_label": null,
+      "detach_face": null,
+      "merge_face": null,
+      "move_faces": null
+    },
     "face_group": {
       "action": {
         "add_label": null,
@@ -50,6 +59,13 @@
         },
         "title": null
       },
+      "merge_people_groups": {
+        "description": "",
+        "destination_table": {
+          "title": ""
+        },
+        "title": ""
+      },
       "move_image_faces": {
         "description": null,
         "destination_face_group_table": {
@@ -61,13 +77,6 @@
           "title": null
         },
         "title": null
-      },
-      "merge_people_groups": {
-        "description": "",
-        "destination_table": {
-          "title": ""
-        },
-        "title": ""
       }
     },
     "table": {
@@ -78,12 +87,6 @@
         "search_images_placeholder": null
       }
     },
-    "action_label": {
-      "change_label": null,
-      "merge_face": null,
-      "detach_face": null,
-      "move_faces": null
-    },
     "tableselect_face_group": {
       "search_faces_placeholder": null
     },
@@ -106,58 +109,52 @@
       "version_title": null
     }
   },
+  "share_page": {
+    "protected_share": {
+      "password_required_error": null
+    }
+  },
   "sidebar": {
     "album": {
-      "title": "Opcje albumu",
-      "title_placeholder": null,
       "album_cover": null,
       "cover_photo": "",
       "reset_cover": null,
-      "set_cover": null
+      "set_cover": null,
+      "title": "Opcje albumu",
+      "title_placeholder": null
     },
     "download": {
       "filesize": {
         "byte": "{{count}} Bajt",
-        "byte_0": null,
-        "byte_1": null,
-        "byte_2": null,
+        "byte_0": "",
+        "byte_1": "",
+        "byte_2": "",
         "byte_plural": "{{count}} Bajtów",
         "giga_byte": "{{count}} GB",
+        "giga_byte_0": "",
+        "giga_byte_1": "",
+        "giga_byte_2": "",
         "kilo_byte": "{{count}} KB",
+        "kilo_byte_0": "",
+        "kilo_byte_1": "",
+        "kilo_byte_2": "",
         "mega_byte": "{{count}} MB",
+        "mega_byte_0": "",
+        "mega_byte_1": "",
+        "mega_byte_2": "",
         "tera_byte": "{{count}} TB",
-        "giga_byte_0": null,
-        "giga_byte_1": null,
-        "giga_byte_2": null,
-        "kilo_byte_0": null,
-        "kilo_byte_1": null,
-        "kilo_byte_2": null,
-        "mega_byte_0": null,
-        "mega_byte_1": null,
-        "mega_byte_2": null,
-        "tera_byte_0": null,
-        "tera_byte_1": null,
-        "tera_byte_2": null
+        "tera_byte_0": "",
+        "tera_byte_1": "",
+        "tera_byte_2": ""
       }
     },
-    "sharing": {
-      "table_header": "Publiczne udostępnienia",
-      "delete": null,
-      "more": null
-    },
     "media": {
       "album": ""
-    }
-  },
-  "title": {
-    "login": null
-  },
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
+    },
+    "sharing": {
+      "delete": null,
+      "more": null,
+      "table_header": "Publiczne udostępnienia"
     }
   },
   "timeline_filter": {
@@ -165,5 +162,8 @@
       "dropdown_all": null,
       "label": null
     }
+  },
+  "title": {
+    "login": null
   }
 }
diff --git a/ui/src/extractedTranslations/pt/translation.json b/ui/src/extractedTranslations/pt/translation.json
index 7e90e823..30617c39 100644
--- a/ui/src/extractedTranslations/pt/translation.json
+++ b/ui/src/extractedTranslations/pt/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Mostrar apenas os favoritos",
     "sort": "Ordenar",
+    "sort_by": "Ordenado por",
     "sorting_options": {
       "date_imported": "Data de importação",
       "date_shot": "Data da foto",
       "title": "Título",
       "type": "Tipo"
-    },
-    "sort_by": "Ordenado por"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Selecionar Idioma"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "Preferências do utilizador"
     },
     "users": {
@@ -240,16 +253,16 @@
     },
     "download": {
       "filesize": {
-        "byte": "{{count}} Byte",
-        "byte_plural": "{{count}} Bytes",
-        "giga_byte": "{{count}} GB",
-        "giga_byte_plural": "{{count}} GB",
-        "kilo_byte": "{{count}} KB",
-        "kilo_byte_plural": "{{count}} KB",
-        "mega_byte": "{{count}} MB",
-        "mega_byte_plural": "{{count}} MB",
-        "tera_byte": "{{count}} TB",
-        "tera_byte_plural": "{{count}} TB"
+        "byte_one": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimensões",
diff --git a/ui/src/extractedTranslations/pt/translation_old.json b/ui/src/extractedTranslations/pt/translation_old.json
index 8f73fa04..f01da75d 100644
--- a/ui/src/extractedTranslations/pt/translation_old.json
+++ b/ui/src/extractedTranslations/pt/translation_old.json
@@ -2,8 +2,8 @@
   "people_page": {
     "action_label": {
       "change_label": null,
-      "merge_people": null,
       "detach_images": null,
+      "merge_people": null,
       "move_faces": null
     },
     "modal": {
@@ -15,5 +15,21 @@
         "title": "Juntar grupos de cara"
       }
     }
+  },
+  "sidebar": {
+    "download": {
+      "filesize": {
+        "byte": "{{count}} Byte",
+        "byte_plural": "{{count}} Bytes",
+        "giga_byte": "{{count}} GB",
+        "giga_byte_plural": "{{count}} GB",
+        "kilo_byte": "{{count}} KB",
+        "kilo_byte_plural": "{{count}} KB",
+        "mega_byte": "{{count}} MB",
+        "mega_byte_plural": "{{count}} MB",
+        "tera_byte": "{{count}} TB",
+        "tera_byte_plural": "{{count}} TB"
+      }
+    }
   }
 }
diff --git a/ui/src/extractedTranslations/ru/translation.json b/ui/src/extractedTranslations/ru/translation.json
index 2665ec82..00c211e9 100644
--- a/ui/src/extractedTranslations/ru/translation.json
+++ b/ui/src/extractedTranslations/ru/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Показать только избранные",
     "sort": "",
+    "sort_by": "Отсортировать по",
     "sorting_options": {
       "date_imported": "Дата импортирования",
       "date_shot": "Дата снимка",
       "title": "Заголовок",
       "type": "Вид"
-    },
-    "sort_by": "Отсортировать по"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Выбрать язык"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "Пользовательские настройки"
     },
     "users": {
@@ -240,21 +253,26 @@
     },
     "download": {
       "filesize": {
-        "byte_0": "",
-        "byte_1": "",
-        "byte_2": "",
-        "giga_byte_0": "",
-        "giga_byte_1": "",
-        "giga_byte_2": "",
-        "kilo_byte_0": "",
-        "kilo_byte_1": "",
-        "kilo_byte_2": "",
-        "mega_byte_0": "",
-        "mega_byte_1": "",
-        "mega_byte_2": "",
-        "tera_byte_0": "",
-        "tera_byte_1": "",
-        "tera_byte_2": ""
+        "byte_one": "",
+        "byte_few": "",
+        "byte_many": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_few": "",
+        "giga_byte_many": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_few": "",
+        "kilo_byte_many": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_few": "",
+        "mega_byte_many": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_few": "",
+        "tera_byte_many": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Габариты",
diff --git a/ui/src/extractedTranslations/ru/translation_old.json b/ui/src/extractedTranslations/ru/translation_old.json
index ae7cdd04..5746063d 100644
--- a/ui/src/extractedTranslations/ru/translation_old.json
+++ b/ui/src/extractedTranslations/ru/translation_old.json
@@ -1,4 +1,7 @@
 {
+  "album_filter": {
+    "sort": null
+  },
   "albums_page": {
     "title": "Альбомы"
   },
@@ -15,12 +18,18 @@
   "header": {
     "search": {
       "result_type": {
-        "photos": "Фото",
-        "media": null
+        "media": null,
+        "photos": "Фото"
       }
     }
   },
   "people_page": {
+    "action_label": {
+      "change_label": null,
+      "detach_face": null,
+      "merge_face": null,
+      "move_faces": null
+    },
     "face_group": {
       "action": {
         "add_label": "Добавить Метку",
@@ -30,6 +39,15 @@
         "move_faces": "Переместить Лица"
       }
     },
+    "modal": {
+      "merge_people_groups": {
+        "description": "Все фотографии в этой группе лиц будут обьеденены с выбранной группой.",
+        "destination_table": {
+          "title": "Выберете конечное лицо"
+        },
+        "title": "Обьединить группы лиц"
+      }
+    },
     "table": {
       "select_face_group": {
         "search_faces_placeholder": "Поиск лиц..."
@@ -38,26 +56,11 @@
         "search_images_placeholder": "Поиск фото..."
       }
     },
-    "action_label": {
-      "change_label": null,
-      "merge_face": null,
-      "detach_face": null,
-      "move_faces": null
-    },
     "tableselect_face_group": {
       "search_faces_placeholder": null
     },
     "tableselect_image_faces": {
       "search_images_placeholder": null
-    },
-    "modal": {
-      "merge_people_groups": {
-        "description": "Все фотографии в этой группе лиц будут обьеденены с выбранной группой.",
-        "destination_table": {
-          "title": "Выберете конечное лицо"
-        },
-        "title": "Обьединить группы лиц"
-      }
     }
   },
   "settings": {
@@ -70,55 +73,52 @@
       }
     }
   },
+  "share_page": {
+    "protected_share": {
+      "password_required_error": null
+    }
+  },
   "sidebar": {
     "album": {
-      "title": "Свойства альбома",
-      "title_placeholder": null,
       "album_cover": null,
       "cover_photo": "",
       "reset_cover": null,
-      "set_cover": null
+      "set_cover": null,
+      "title": "Свойства альбома",
+      "title_placeholder": null
     },
     "download": {
       "filesize": {
         "byte": "{{count}} Байт",
+        "byte_0": "",
+        "byte_1": "",
+        "byte_2": "",
         "byte_plural": "{{count}} Байт",
         "giga_byte": "{{count}} ГБ",
+        "giga_byte_0": "",
+        "giga_byte_1": "",
+        "giga_byte_2": "",
         "kilo_byte": "{{count}} КБ",
+        "kilo_byte_0": "",
+        "kilo_byte_1": "",
+        "kilo_byte_2": "",
         "mega_byte": "{{count}} МБ",
+        "mega_byte_0": "",
+        "mega_byte_1": "",
+        "mega_byte_2": "",
         "tera_byte": "{{count}} ТБ",
-        "byte_0": null,
-        "byte_1": null,
-        "byte_2": null,
-        "giga_byte_0": null,
-        "giga_byte_1": null,
-        "giga_byte_2": null,
-        "kilo_byte_0": null,
-        "kilo_byte_1": null,
-        "kilo_byte_2": null,
-        "mega_byte_0": null,
-        "mega_byte_1": null,
-        "mega_byte_2": null,
-        "tera_byte_0": null,
-        "tera_byte_1": null,
-        "tera_byte_2": null
+        "tera_byte_0": "",
+        "tera_byte_1": "",
+        "tera_byte_2": ""
       }
     },
-    "sharing": {
-      "table_header": "Общий доступ",
-      "delete": null,
-      "more": null
-    },
     "media": {
       "album": ""
-    }
-  },
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
+    },
+    "sharing": {
+      "delete": null,
+      "more": null,
+      "table_header": "Общий доступ"
     }
   },
   "timeline_filter": {
diff --git a/ui/src/extractedTranslations/sv/translation.json b/ui/src/extractedTranslations/sv/translation.json
index 2fcfeaa1..b39fb6e4 100644
--- a/ui/src/extractedTranslations/sv/translation.json
+++ b/ui/src/extractedTranslations/sv/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "Visa endast favoriter",
     "sort": "",
+    "sort_by": "Sortera efter",
     "sorting_options": {
       "date_imported": "Datum för import",
       "date_shot": "Datum",
       "title": "Titel",
       "type": "Typ"
-    },
-    "sort_by": "Sortera efter"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Välj språk"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "Användarinställningar"
     },
     "users": {
@@ -240,16 +253,16 @@
     },
     "download": {
       "filesize": {
-        "byte": "{{count}} Byte",
-        "byte_plural": "{{count}} Bytes",
-        "giga_byte": "{{count}} GB",
-        "giga_byte_plural": "",
-        "kilo_byte": "{{count}} KB",
-        "kilo_byte_plural": "",
-        "mega_byte": "{{count}} MB",
-        "mega_byte_plural": "",
-        "tera_byte": "{{count}} TB",
-        "tera_byte_plural": ""
+        "byte_one": "",
+        "byte_other": "",
+        "giga_byte_one": "",
+        "giga_byte_other": "",
+        "kilo_byte_one": "",
+        "kilo_byte_other": "",
+        "mega_byte_one": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Mått",
diff --git a/ui/src/extractedTranslations/sv/translation_old.json b/ui/src/extractedTranslations/sv/translation_old.json
index 061609fe..0b1ff831 100644
--- a/ui/src/extractedTranslations/sv/translation_old.json
+++ b/ui/src/extractedTranslations/sv/translation_old.json
@@ -1,4 +1,7 @@
 {
+  "album_filter": {
+    "sort": null
+  },
   "albums_page": {
     "title": "Album"
   },
@@ -15,12 +18,18 @@
   "header": {
     "search": {
       "result_type": {
-        "photos": "Bilder",
-        "media": null
+        "media": null,
+        "photos": "Bilder"
       }
     }
   },
   "people_page": {
+    "action_label": {
+      "change_label": null,
+      "detach_face": null,
+      "merge_face": null,
+      "move_faces": null
+    },
     "face_group": {
       "action": {
         "add_label": null,
@@ -50,6 +59,13 @@
         },
         "title": null
       },
+      "merge_people_groups": {
+        "description": "",
+        "destination_table": {
+          "title": ""
+        },
+        "title": ""
+      },
       "move_image_faces": {
         "description": null,
         "destination_face_group_table": {
@@ -61,13 +77,6 @@
           "title": null
         },
         "title": null
-      },
-      "merge_people_groups": {
-        "description": "",
-        "destination_table": {
-          "title": ""
-        },
-        "title": ""
       }
     },
     "table": {
@@ -78,12 +87,6 @@
         "search_images_placeholder": null
       }
     },
-    "action_label": {
-      "change_label": null,
-      "merge_face": null,
-      "detach_face": null,
-      "move_faces": null
-    },
     "tableselect_face_group": {
       "search_faces_placeholder": null
     },
@@ -109,41 +112,41 @@
       "version_title": null
     }
   },
+  "share_page": {
+    "protected_share": {
+      "password_required_error": null
+    }
+  },
   "sidebar": {
     "album": {
-      "title": "Albuminställningar",
-      "title_placeholder": null,
       "album_cover": null,
       "cover_photo": "",
       "reset_cover": null,
-      "set_cover": null
-    },
-    "sharing": {
-      "table_header": "Publika delningar",
-      "delete": null,
-      "more": null
+      "set_cover": null,
+      "title": "Albuminställningar",
+      "title_placeholder": null
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
-        "kilo_byte_plural": null,
-        "mega_byte_plural": null,
-        "tera_byte_plural": null
+        "byte": "{{count}} Byte",
+        "byte_plural": "{{count}} Bytes",
+        "giga_byte": "{{count}} GB",
+        "giga_byte_plural": "",
+        "kilo_byte": "{{count}} KB",
+        "kilo_byte_plural": "",
+        "mega_byte": "{{count}} MB",
+        "mega_byte_plural": "",
+        "tera_byte": "{{count}} TB",
+        "tera_byte_plural": ""
       }
     },
     "media": {
       "album": ""
-    }
-  },
-  "title": {
-    "login": null
-  },
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
+    },
+    "sharing": {
+      "delete": null,
+      "more": null,
+      "table_header": "Publika delningar"
     }
   },
   "timeline_filter": {
@@ -151,5 +154,8 @@
       "dropdown_all": null,
       "label": null
     }
+  },
+  "title": {
+    "login": null
   }
 }
diff --git a/ui/src/extractedTranslations/zh-CN/translation.json b/ui/src/extractedTranslations/zh-CN/translation.json
index d17e8118..5759afbd 100644
--- a/ui/src/extractedTranslations/zh-CN/translation.json
+++ b/ui/src/extractedTranslations/zh-CN/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "只显示喜爱",
     "sort": "排序",
+    "sort_by": "排序方式",
     "sorting_options": {
       "date_imported": "加入日期",
       "date_shot": "拍摄日期",
       "title": "标题",
       "type": "种类"
-    },
-    "sort_by": "排序方式"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Select language"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "使用者选项"
     },
     "users": {
@@ -240,11 +253,11 @@
     },
     "download": {
       "filesize": {
-        "byte": "",
-        "giga_byte": "",
-        "kilo_byte": "",
-        "mega_byte": "",
-        "tera_byte": ""
+        "byte_other": "",
+        "giga_byte_other": "",
+        "kilo_byte_other": "",
+        "mega_byte_other": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "尺寸",
diff --git a/ui/src/extractedTranslations/zh-CN/translation_old.json b/ui/src/extractedTranslations/zh-CN/translation_old.json
index 1f142231..bd5febbb 100644
--- a/ui/src/extractedTranslations/zh-CN/translation_old.json
+++ b/ui/src/extractedTranslations/zh-CN/translation_old.json
@@ -2,8 +2,8 @@
   "people_page": {
     "action_label": {
       "change_label": null,
-      "merge_people": null,
       "detach_images": null,
+      "merge_people": null,
       "move_faces": null
     },
     "modal": {
@@ -19,11 +19,11 @@
   "sidebar": {
     "download": {
       "filesize": {
-        "byte": null,
-        "giga_byte": null,
-        "kilo_byte": null,
-        "mega_byte": null,
-        "tera_byte": null
+        "byte": "",
+        "giga_byte": "",
+        "kilo_byte": "",
+        "mega_byte": "",
+        "tera_byte": ""
       }
     },
     "media": {
diff --git a/ui/src/extractedTranslations/zh-HK/translation.json b/ui/src/extractedTranslations/zh-HK/translation.json
index 479cc16f..26bb503a 100644
--- a/ui/src/extractedTranslations/zh-HK/translation.json
+++ b/ui/src/extractedTranslations/zh-HK/translation.json
@@ -2,13 +2,13 @@
   "album_filter": {
     "only_favorites": "只顯示喜愛",
     "sort": "排序",
+    "sort_by": "排序方式",
     "sorting_options": {
       "date_imported": "加入日期",
       "date_shot": "拍攝日期",
       "title": "標題",
       "type": "種類"
-    },
-    "sort_by": "排序方式"
+    }
   },
   "general": {
     "action": {
@@ -155,6 +155,19 @@
       "language_selector": {
         "placeholder": "Select language"
       },
+      "theme": {
+        "auto": {
+          "label": ""
+        },
+        "dark": {
+          "label": ""
+        },
+        "description": "",
+        "light": {
+          "label": ""
+        },
+        "title": ""
+      },
       "title": "使用者選項"
     },
     "users": {
@@ -240,11 +253,11 @@
     },
     "download": {
       "filesize": {
-        "byte": "",
-        "giga_byte": "",
-        "kilo_byte": "",
-        "mega_byte": "",
-        "tera_byte": ""
+        "byte_other": "",
+        "giga_byte_other": "",
+        "kilo_byte_other": "",
+        "mega_byte_other": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "尺寸",
diff --git a/ui/src/extractedTranslations/zh-HK/translation_old.json b/ui/src/extractedTranslations/zh-HK/translation_old.json
index c45a0a18..1771356a 100644
--- a/ui/src/extractedTranslations/zh-HK/translation_old.json
+++ b/ui/src/extractedTranslations/zh-HK/translation_old.json
@@ -2,8 +2,8 @@
   "people_page": {
     "action_label": {
       "change_label": null,
-      "merge_people": null,
       "detach_images": null,
+      "merge_people": null,
       "move_faces": null
     },
     "modal": {
@@ -19,11 +19,11 @@
   "sidebar": {
     "download": {
       "filesize": {
-        "byte": null,
-        "giga_byte": null,
-        "kilo_byte": null,
-        "mega_byte": null,
-        "tera_byte": null
+        "byte": "",
+        "giga_byte": "",
+        "kilo_byte": "",
+        "mega_byte": "",
+        "tera_byte": ""
       }
     },
     "media": {
diff --git a/ui/src/helpers/utils.ts b/ui/src/helpers/utils.ts
index 8bf66d79..77b7f58a 100644
--- a/ui/src/helpers/utils.ts
+++ b/ui/src/helpers/utils.ts
@@ -1,4 +1,5 @@
 import classNames, { Argument as ClassNamesArg } from 'classnames'
+import { overrideTailwindClasses } from 'tailwind-override'
 // import { overrideTailwindClasses } from 'tailwind-override'
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -45,6 +46,6 @@ export function exhaustiveCheck(value: never) {
 }
 
 export function tailwindClassNames(...args: ClassNamesArg[]) {
-  // return overrideTailwindClasses(classNames(args))
-  return classNames(args)
+  return overrideTailwindClasses(classNames(args))
+  // return classNames(args)
 }
diff --git a/ui/src/primitives/form/Input.tsx b/ui/src/primitives/form/Input.tsx
index 9b6613a8..b37d3d4a 100644
--- a/ui/src/primitives/form/Input.tsx
+++ b/ui/src/primitives/form/Input.tsx
@@ -145,7 +145,7 @@ type ButtonProps = {
   className?: string
 }
 
-const buttonStyles = ({ variant, background }: ButtonProps) =>
+export const buttonStyles = ({ variant, background }: ButtonProps) =>
   classNames(
     'px-6 py-0.5 rounded border border-gray-200 focus:outline-none focus:border-blue-300 text-[#222] hover:bg-gray-100 whitespace-nowrap',
     'dark:bg-dark-input-bg dark:border-dark-input-border dark:text-dark-input-text dark:focus:border-blue-300',
diff --git a/ui/src/theme.ts b/ui/src/theme.ts
index 9599b810..4d475420 100644
--- a/ui/src/theme.ts
+++ b/ui/src/theme.ts
@@ -32,3 +32,6 @@ export const getTheme = () => {
     return 'auto'
   }
 }
+
+export const isDarkMode = () =>
+  document.documentElement.classList.contains('dark')
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 227ee406..2d7a7fce 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -27,6 +27,8 @@ module.exports = {
           bg: '#24292e',
           bg2: '#30363e',
           text: '#fafafa',
+          border: '#3b3b3b',
+          border2: '#1E1E1E',
           input: {
             bg: '#383e46',
             border: '#4a515a',

From 10611b5ff5583eca730522cce323811fbaba1bc1 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Wed, 9 Feb 2022 22:19:08 +0100
Subject: [PATCH 4/4] Dark style the remaining pieces

---
 ui/src/Pages/PeoplePage/PeoplePage.tsx        | 42 ++++++++++++++-----
 .../SingleFaceGroup/FaceGroupTitle.tsx        |  2 +-
 ui/src/components/header/Searchbar.tsx        |  9 ++--
 ui/src/components/layout/MainMenu.tsx         | 22 ++++++----
 ui/src/components/messages/Message.tsx        |  4 +-
 .../sidebar/SidebarDownloadAlbum.tsx          | 20 ++++-----
 .../sidebar/SidebarDownloadMedia.tsx          | 22 ++++------
 ui/src/components/sidebar/SidebarTable.tsx    | 24 +++++++++++
 ui/src/index.css                              | 15 ++++---
 ui/src/primitives/Modal.tsx                   |  4 +-
 ui/src/primitives/Table.tsx                   |  7 ++--
 ui/tailwind.config.js                         |  4 +-
 12 files changed, 113 insertions(+), 62 deletions(-)
 create mode 100644 ui/src/components/sidebar/SidebarTable.tsx

diff --git a/ui/src/Pages/PeoplePage/PeoplePage.tsx b/ui/src/Pages/PeoplePage/PeoplePage.tsx
index ffa141e9..76e2636c 100644
--- a/ui/src/Pages/PeoplePage/PeoplePage.tsx
+++ b/ui/src/Pages/PeoplePage/PeoplePage.tsx
@@ -20,6 +20,7 @@ import {
 } from './__generated__/myFaces'
 import { recognizeUnlabeledFaces } from './__generated__/recognizeUnlabeledFaces'
 import { isNil, tailwindClassNames } from '../../helpers/utils'
+import classNames from 'classnames'
 
 export const MY_FACES_QUERY = gql`
   query myFaces($limit: Int, $offset: Int) {
@@ -66,9 +67,32 @@ const RECOGNIZE_UNLABELED_FACES_MUTATION = gql`
   }
 `
 
-const FaceDetailsWrapper = styled.span<{ labeled: boolean }>`
-  color: ${({ labeled }) => (labeled ? 'black' : '#aaa')};
+type FaceDetailsWrapperProps = {
+  labeled: boolean
+  className?: string
+} & React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLSpanElement>,
+  HTMLSpanElement
+>
 
+const FaceDetailsWrapperInner = ({
+  labeled,
+  children,
+  className,
+  ...otherProps
+}: FaceDetailsWrapperProps) => (
+  <span
+    {...otherProps}
+    className={classNames(
+      className,
+      `${labeled ? '' : 'text-gray-400 dark:text-gray-500'}`
+    )}
+  >
+    {children}
+  </span>
+)
+
+const FaceDetailsWrapper = styled(FaceDetailsWrapperInner)`
   &:hover,
   &:focus-visible {
     color: #2683ca;
@@ -180,14 +204,10 @@ export const FaceDetails = ({
   return label
 }
 
-const FaceImagesCount = styled.span`
-  background-color: #eee;
-  color: #222;
-  font-size: 0.9em;
-  padding: 0 4px;
-  margin-right: 6px;
-  border-radius: 4px;
-`
+const FaceImagesCount = styled.span.attrs({
+  className:
+    'bg-gray-100 text-gray-900 dark:bg-gray-400 dark:text-black text-sm px-1 mr-2 rounded-md',
+})``
 
 type FaceGroupProps = {
   group: myFaces_myFaceGroups
@@ -198,7 +218,7 @@ export const FaceGroup = ({ group }: FaceGroupProps) => {
   const [editLabel, setEditLabel] = useState(false)
 
   return (
-    <div style={{ margin: '12px' }}>
+    <div className="m-3">
       <Link to={`/people/${group.id}`}>
         <FaceCircleImage imageFace={previewFace} selectable />
       </Link>
diff --git a/ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx b/ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx
index 0e193bec..b39fcd7c 100644
--- a/ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx
+++ b/ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx
@@ -67,7 +67,7 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
       <>
         <h1
           className={`text-2xl font-semibold ${
-            faceGroup?.label ? 'text-black' : 'text-gray-600'
+            faceGroup?.label ? '' : 'text-gray-600 dark:text-gray-400'
           }`}
         >
           {faceGroup?.label ??
diff --git a/ui/src/components/header/Searchbar.tsx b/ui/src/components/header/Searchbar.tsx
index 25386897..0df8e09b 100644
--- a/ui/src/components/header/Searchbar.tsx
+++ b/ui/src/components/header/Searchbar.tsx
@@ -174,7 +174,7 @@ const SearchBar = () => {
           selectedItemId ? `search-item-${selectedItemId}` : ''
         }
         aria-expanded={expanded}
-        className="w-full py-2 px-3 z-10 relative rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
+        className="w-full py-2 px-3 z-10 relative rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-dark-bg2 dark:border-dark-bg2 dark:focus:bg-[#2a2f35]"
         type="search"
         placeholder={t('header.search.placeholder', 'Search')}
         onChange={fetchEvent}
@@ -186,7 +186,8 @@ const SearchBar = () => {
 }
 
 const ResultTitle = styled.h1.attrs({
-  className: 'uppercase text-gray-700 text-sm font-semibold mt-4 mb-2 mx-1',
+  className:
+    'uppercase text-gray-700 dark:text-gray-200 text-sm font-semibold mt-4 mb-2 mx-1',
 })``
 
 type SearchResultsProps = {
@@ -242,7 +243,7 @@ const SearchResults = ({
       id="search-results"
       role="listbox"
       className={classNames(
-        'absolute bg-white left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border px-4 z-0',
+        'absolute bg-white dark:bg-dark-bg left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border dark:border-dark-border px-4 z-0',
         'lg:top-[40px] lg:shadow-md lg:rounded-b lg:max-h-[560px]',
         { hidden: !expanded }
       )}
@@ -319,7 +320,7 @@ const SearchRow = ({
       aria-selected={selected}
       onMouseOver={() => setSelected()}
       className={classNames('rounded p-1 mt-1', {
-        'bg-gray-100': selected,
+        'bg-gray-100 dark:bg-dark-bg2': selected,
       })}
     >
       <NavLink to={link} className="flex items-center" tabIndex={-1}>
diff --git a/ui/src/components/layout/MainMenu.tsx b/ui/src/components/layout/MainMenu.tsx
index e5181062..9ef9ab98 100644
--- a/ui/src/components/layout/MainMenu.tsx
+++ b/ui/src/components/layout/MainMenu.tsx
@@ -4,7 +4,7 @@ import { useQuery, gql } from '@apollo/client'
 import { authToken } from '../../helpers/authentication'
 import { useTranslation } from 'react-i18next'
 import { mapboxEnabledQuery } from '../../__generated__/mapboxEnabledQuery'
-import classNames from 'classnames'
+import { tailwindClassNames } from '../../helpers/utils'
 
 export const MAPBOX_QUERY = gql`
   query mapboxEnabledQuery {
@@ -44,9 +44,13 @@ const MenuButton = ({
       to={to}
       end={exact}
       className={({ isActive }) =>
-        classNames(`rounded-lg my-2`, className, {
-          [`ring-4 lg:ring-4 ${activeClasses}`]: isActive,
-        })
+        tailwindClassNames(
+          `rounded-lg my-2 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg`,
+          className,
+          {
+            [`ring-4 lg:ring-4 ${activeClasses}`]: isActive,
+          }
+        )
       }
     >
       <li className="flex items-center">
@@ -89,7 +93,7 @@ export const MainMenu = () => {
           label={t('sidemenu.photos', 'Timeline')}
           background="#8ac5f4"
           activeClasses="ring-[#f1f8ff] bg-[#f1f8ff] dark:bg-[#171f28] dark:ring-[#171f28]"
-          className="outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-[#283849] focus:ring-offset-2"
+          className="focus:ring-blue-200 dark:focus:ring-[#335981]"
           icon={
             <svg viewBox="0 0 24 24" fill="white">
               <path d="M5.62503136,14 L9.60031266,17.978 L5.38724257,24 L2.99995461,24 C1.45289603,24 0.179346174,22.8289699 0.0173498575,21.3249546 L5.62503136,14 Z M15.7557572,10 L24.0173027,21.526562 C23.7684095,22.9323278 22.5405695,24 21.0633614,24 L21.0633614,24 L5.88324257,24 L15.7557572,10 Z"></path>
@@ -102,7 +106,7 @@ export const MainMenu = () => {
           label={t('sidemenu.albums', 'Albums')}
           background="#ff797b"
           activeClasses="ring-[#fff1f2] bg-[#fff1f2] dark:ring-[#1d1516] dark:bg-[#1d1516]"
-          className="outline-none focus:ring-2 focus:ring-red-200 focus:ring-offset-2"
+          className="focus:ring-red-200 dark:focus:ring-[#863541]"
           icon={
             <svg viewBox="0 0 24 24" fill="white">
               <path d="M19,2 C19.5522847,2 20,2.44771525 20,3 L20,21 C20,21.5522847 19.5522847,22 19,22 L6,22 C4.8954305,22 4,21.1045695 4,20 L4,4 C4,2.8954305 4.8954305,2 6,2 L19,2 Z M14.1465649,9 L10.9177928,13.7443828 L8.72759325,11.2494916 L6,15 L18,15 L14.1465649,9 Z M11,9 C10.4477153,9 10,9.44771525 10,10 C10,10.5522847 10.4477153,11 11,11 C11.5522847,11 12,10.5522847 12,10 C12,9.44771525 11.5522847,9 11,9 Z"></path>
@@ -116,7 +120,7 @@ export const MainMenu = () => {
             label={t('sidemenu.places', 'Places')}
             background="#92e072"
             activeClasses="ring-[#e3fee5] bg-[#e3fee5] dark:ring-[#0c1c0f] dark:bg-[#0c1c0f]"
-            className="outline-none focus:ring-2 focus:ring-green-100 focus:ring-offset-2"
+            className="focus:ring-green-100 dark:focus:ring-[#368644]"
             icon={
               <svg viewBox="0 0 24 24" fill="white">
                 <path d="M2.4,3.34740684 C2.47896999,3.34740684 2.55617307,3.37078205 2.62188008,3.41458672 L8,7 L8,21 L2.4452998,17.2968665 C2.16710114,17.1114008 2,16.7991694 2,16.4648162 L2,3.74740684 C2,3.52649294 2.1790861,3.34740684 2.4,3.34740684 Z M14.5,3 L14.5,17 L8.5,21 L8.5,7 L14.5,3 Z M15,3 L21.4961389,6.71207939 C21.8077139,6.89012225 22,7.22146569 22,7.58032254 L22,20.3107281 C22,20.531642 21.8209139,20.7107281 21.6,20.7107281 C21.5303892,20.7107281 21.4619835,20.692562 21.4015444,20.6580254 L15,17 L15,3 Z"></path>
@@ -131,7 +135,7 @@ export const MainMenu = () => {
             label={t('sidemenu.people', 'People')}
             background="#fbcd78"
             activeClasses="ring-[#fff7e4] bg-[#fff7e4] dark:ring-[#1a1b13] dark:bg-[#1a1b13]"
-            className="outline-none focus:ring-2 focus:ring-yellow-100 focus:ring-offset-2"
+            className="focus:ring-yellow-100 dark:focus:ring-[#8f8c36]"
             icon={
               <svg viewBox="0 0 24 24" fill="white">
                 <path d="M15.713873,14.2127622 C17.4283917,14.8986066 18.9087267,16.0457918 20.0014344,17.5008819 C20,19.1568542 18.6568542,20.5 17,20.5 L7,20.5 C5.34314575,20.5 4,19.1568542 4,17.5 L4.09169034,17.3788798 C5.17486154,15.981491 6.62020934,14.878942 8.28693513,14.2120314 C9.30685583,15.018595 10.5972088,15.5 12,15.5 C13.3092718,15.5 14.5205974,15.0806428 15.5069849,14.3689203 L15.713873,14.2127622 L15.713873,14.2127622 Z M12,4 C15.0375661,4 17.5,6.46243388 17.5,9.5 C17.5,12.5375661 15.0375661,15 12,15 C8.96243388,15 6.5,12.5375661 6.5,9.5 C6.5,6.46243388 8.96243388,4 12,4 Z"></path>
@@ -146,7 +150,7 @@ export const MainMenu = () => {
           label={t('sidemenu.settings', 'Settings')}
           background="#aacbd0"
           activeClasses="ring-[#e4f0f8] bg-[#e4f0f8] dark:ring-[#0f1f23] dark:bg-[#0f1f23]"
-          className="outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2"
+          className="focus:ring-gray-200 dark:focus:ring-[#2b778a]"
           icon={
             <svg viewBox="0 0 24 24" fill="white">
               <path d="M13.1773557,19.4081222 L13,21 L11,21 L10.8236372,19.4082786 C11.2068889,19.4686524 11.5997836,19.5 12,19.5 C12.400562,19.5 12.7937897,19.4685982 13.1773557,19.4081222 Z M18.0703854,16.4054981 L19.0710678,17.6568542 L17.6568542,19.0710678 L16.4054981,18.0703854 C17.0439038,17.6062707 17.6062707,17.0439038 18.0703854,16.4054981 Z M5.92961463,16.4054981 C6.3937293,17.0439038 6.95609622,17.6062707 7.59450194,18.0703854 L6.34314575,19.0710678 L4.92893219,17.6568542 Z M12,5 C12.6476122,5 13.2746839,5.08794431 13.8699239,5.25254178 L13.5991574,5.1834986 C13.7201343,5.21176937 13.8399046,5.24317756 13.9583777,5.27763269 L13.8699239,5.25254178 C13.9708203,5.28044194 14.0708021,5.31054449 14.1698143,5.34279446 L13.9583777,5.27763269 C14.0595223,5.3070482 14.1597215,5.33868451 14.258919,5.37248532 L14.2585262,5.37235148 C14.4676237,5.44359989 14.6718943,5.52429568 14.8712067,5.61404838 L14.8708132,5.61387118 C15.0759012,5.70622473 15.275366,5.80795374 15.4690332,5.91866747 L15.4686608,5.91845456 C15.6392617,6.01598201 15.805011,6.12023811 15.9658953,6.23105008 C16.6666499,6.71376514 17.2748587,7.32052379 17.7590147,8.01971841 L17.7457797,8.00067241 C17.878817,8.19144826 18.0025959,8.38916065 18.1164652,8.59315832 L18.1164561,8.59314205 C18.2263916,8.79009231 18.3270826,8.99288384 18.4179525,9.20094699 L18.3861288,9.12918684 C18.4299988,9.22662425 18.4717042,9.32524649 18.511184,9.42499231 L18.4179525,9.20094699 C18.4555868,9.28711751 18.4915365,9.37419224 18.5257599,9.46212956 L18.5257813,9.46218459 C18.5714417,9.57950906 18.6140479,9.69842546 18.6534795,9.81877975 L18.6303524,9.74942636 C18.663449,9.84696249 18.6944539,9.94546442 18.7233135,10.0448787 L18.6534795,9.81877975 C18.6859159,9.91778316 18.7162042,10.0177596 18.7442892,10.1186538 L18.7233135,10.0448787 C18.7574593,10.1625025 18.7886021,10.2814034 18.8166534,10.4014931 L18.7442892,10.1186538 C18.7780535,10.2399508 18.8086334,10.3625743 18.8359331,10.4864288 L18.8166534,10.4014931 C18.8407863,10.5048078 18.862631,10.6090024 18.8821313,10.7140204 L18.8821096,10.7139036 C18.9595358,11.13088 19,11.5607146 19,12 C19,12.760711 18.8786563,13.4930807 18.654269,14.178809 L18.7203978,13.9651371 C18.6933724,14.0577131 18.6644861,14.1494954 18.633782,14.2404408 L18.6337192,14.240627 C18.5596758,14.4599434 18.4749806,14.6745706 18.3803043,14.8837147 L18.4227814,14.7879702 C18.3748133,14.898324 18.3240845,15.0072005 18.2706822,15.1145124 L18.2706854,15.1145058 C18.2596661,15.1366492 18.2485362,15.1587195 18.2372933,15.1807224 C18.1424458,15.366354 18.0394734,15.5473219 17.9289065,15.7230291 L17.9286242,15.7234777 C17.879176,15.8020582 17.8279091,15.8800231 17.7751478,15.9568818 C17.2283538,16.7533264 16.5213854,17.4307804 15.7006361,17.9429388 C15.5343676,18.0466839 15.363664,18.1435255 15.1886895,18.2332159 C15.0884737,18.2845873 14.9867709,18.3336519 14.8837374,18.380294 C14.8519386,18.3946888 14.820036,18.408843 14.7880089,18.4227646 L14.7879702,18.4227814 C14.594563,18.506852 14.3965774,18.582456 14.1945215,18.6491068 L14.240627,18.6337192 C14.1496136,18.6644491 14.057762,18.6933585 13.9651154,18.7204041 L14.1945215,18.6491068 C14.0848667,18.6852779 13.9740131,18.7188121 13.8620359,18.7496344 L13.9651154,18.7204041 C13.8465034,18.7550297 13.7265885,18.7866003 13.6054615,18.8150251 L13.8620359,18.7496344 C13.7423734,18.7825721 13.6214277,18.8124129 13.4992904,18.8390651 L13.6054615,18.8150251 C13.5080739,18.837879 13.4099028,18.8586994 13.3109955,18.8774389 L13.3113385,18.8773739 C12.9626576,18.943437 12.6051877,18.9836256 12.2406498,18.995941 L12.2406498,18.995941 L12,19 L11.7593502,18.995941 C11.1969062,18.9769397 10.651288,18.8915852 10.1300761,18.7474582 L10.4017085,18.8167037 C10.2816534,18.7886645 10.1627862,18.7575356 10.0451955,18.7234055 L10.1300761,18.7474582 C10.0254444,18.7185252 9.92179619,18.6872236 9.8191929,18.6536149 L10.0451955,18.7234055 C9.94544676,18.6944539 9.84661647,18.6633426 9.74875857,18.6301258 L9.8191929,18.6536149 C9.70181279,18.6151658 9.58580021,18.5736972 9.47124698,18.5293009 L9.74875857,18.6301258 C9.63953023,18.5930493 9.53151337,18.5533494 9.42478305,18.5111012 L9.47124698,18.5293009 C9.38023421,18.4940279 9.29014264,18.4569068 9.20101831,18.4179837 L9.42478305,18.5111012 C9.32510844,18.4716459 9.22655588,18.429968 9.1291865,18.3861287 L9.12918684,18.3861288 C8.92441772,18.2939341 8.72488173,18.1921803 8.53114704,18.0814356 L8.53133924,18.0815454 C8.36085919,17.9840938 8.1950534,17.8798058 8.03411574,17.7689575 C7.32564198,17.2809251 6.71176602,16.6661067 6.22504635,15.9571646 L6.25422032,15.9993276 C6.11671498,15.8021446 5.98910038,15.5975514 5.87209563,15.3862669 L5.87185745,15.3858368 C5.76735702,15.1971324 5.67112032,15.0026361 5.58390133,14.8032939 L5.58376551,14.8029834 C5.4937352,14.5972158 5.41320651,14.3859588 5.34288515,14.1700927 L5.37235148,14.2585262 C5.33857231,14.1593728 5.30695567,14.0592187 5.27755779,13.9581202 L5.27763269,13.9583777 C5.24307029,13.8395186 5.21163631,13.7196173 5.18334661,13.5985069 C5.17667277,13.5699482 5.17002984,13.5406686 5.16357108,13.51132 L5.18334661,13.5985069 C5.16013408,13.4991323 5.13903849,13.3989436 5.12010999,13.2979911 L5.12016797,13.2983003 C5.04124551,12.8773785 5,12.443506 5,12 C5,11.3480145 5.08913609,10.7168479 5.25588682,10.1180216 L5.1834986,10.4008426 C5.21176937,10.2798657 5.24317756,10.1600954 5.27763269,10.0416223 L5.25588682,10.1180216 C5.28369429,10.0181609 5.31366015,9.91919955 5.34573098,9.82119101 L5.27763269,10.0416223 C5.3070482,9.9404777 5.33868451,9.84027851 5.37248532,9.74108101 L5.37235148,9.74147384 C5.44359989,9.53237634 5.52429568,9.32810566 5.61404838,9.1287933 L5.61387118,9.12918684 C5.70622473,8.92409877 5.80795374,8.72463395 5.91866747,8.53096679 L5.91845456,8.53133924 C6.01876346,8.35587279 6.12620349,8.18551775 6.24056786,8.02032137 C6.72514126,7.32052379 7.33335007,6.71376514 8.03378164,6.23127259 L8.00067241,6.25422032 C8.19144826,6.12118298 8.38916065,5.99740405 8.59315832,5.88353481 L8.59314205,5.8835439 C8.79009231,5.77360843 8.99288384,5.67291735 9.20094699,5.58204748 L9.12918684,5.61387118 C9.23839103,5.56470339 9.3490835,5.51825441 9.46117803,5.47461046 L9.20094699,5.58204748 C9.2900304,5.54314104 9.38008018,5.506035 9.47105035,5.47077534 L9.46117803,5.47461046 C9.55626939,5.43758669 9.65236971,5.40258153 9.74942636,5.36964761 L9.47105035,5.47077534 C9.58553305,5.42640232 9.70147341,5.38495349 9.81877975,5.34652049 L9.74942636,5.36964761 C9.84696249,5.336551 9.94546442,5.30554615 10.0448787,5.27668649 L9.81877975,5.34652049 C9.92167671,5.31280843 10.0256247,5.28141681 10.1305618,5.25240749 L10.0448787,5.27668649 C10.1625025,5.24254068 10.2814034,5.2113979 10.4014931,5.18334661 L10.1305618,5.25240749 C10.2482987,5.21985975 10.3672807,5.19031091 10.4874206,5.16384836 L10.4014931,5.18334661 C10.5048078,5.15921373 10.6090024,5.13736899 10.7140204,5.11786873 L10.7139036,5.11789043 C11.13088,5.04046424 11.5607146,5 12,5 Z M12,8 C9.790861,8 8,9.790861 8,12 C8,14.209139 9.790861,16 12,16 C14.209139,16 16,14.209139 16,12 C16,9.790861 14.209139,8 12,8 Z M19.4082786,10.8236372 L21,11 L21,13 L19.4081222,13.1773557 C19.4685982,12.7937897 19.5,12.400562 19.5,12 C19.5,11.5997836 19.4686524,11.2068889 19.4082786,10.8236372 Z M4.59187784,10.8226443 C4.53140176,11.2062103 4.5,11.599438 4.5,12 C4.5,12.4002164 4.53134759,12.7931111 4.59172137,13.1763628 L3,13 L3,11 Z M6.34314575,4.92893219 L7.59450194,5.92961463 C6.95609622,6.3937293 6.3937293,6.95609622 5.92961463,7.59450194 L4.92893219,6.34314575 L6.34314575,4.92893219 Z M17.6568542,4.92893219 L19.0710678,6.34314575 L18.0703854,7.59450194 C17.6062707,6.95609622 17.0439038,6.3937293 16.4054981,5.92961463 L17.6568542,4.92893219 Z M13,3 L13.1773557,4.59187784 C12.7937897,4.53140176 12.400562,4.5 12,4.5 C11.5997836,4.5 11.2068889,4.53134759 10.8236372,4.59172137 L11,3 L13,3 Z"></path>
diff --git a/ui/src/components/messages/Message.tsx b/ui/src/components/messages/Message.tsx
index 46a52a24..a79440ea 100644
--- a/ui/src/components/messages/Message.tsx
+++ b/ui/src/components/messages/Message.tsx
@@ -17,10 +17,10 @@ const Message = forwardRef(
     return (
       <div
         ref={ref}
-        className="bg-white shadow-md border rounded p-2 h-[84px] relative"
+        className="bg-white dark:bg-dark-bg2 shadow-md border rounded p-2 h-[84px] relative"
       >
         <button onClick={onDismiss} className="absolute top-3 right-2">
-          <DismissIcon className="w-[10px] h-[10px] text-gray-700" />
+          <DismissIcon className="w-[10px] h-[10px] text-gray-700 dark:text-gray-200" />
         </button>
         <h1 className="font-semibold text-sm">{header}</h1>
         <div className="text-sm">{content}</div>
diff --git a/ui/src/components/sidebar/SidebarDownloadAlbum.tsx b/ui/src/components/sidebar/SidebarDownloadAlbum.tsx
index ab4c5384..a578e59c 100644
--- a/ui/src/components/sidebar/SidebarDownloadAlbum.tsx
+++ b/ui/src/components/sidebar/SidebarDownloadAlbum.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { API_ENDPOINT } from '../../apolloClient'
 import { SidebarSection, SidebarSectionTitle } from './SidebarComponents'
+import SidebarTable from './SidebarTable'
 
 type SidebarAlbumDownladProps = {
   albumID: string
@@ -49,8 +50,7 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
   ]
 
   const downloadRows = downloads.map(x => (
-    <tr
-      className="cursor-pointer border-gray-100 border-b hover:bg-gray-50 focus:bg-gray-50"
+    <SidebarTable.Row
       key={x.purpose}
       onClick={() =>
         (location.href = `${API_ENDPOINT}/download/album/${albumID}/${x.purpose}`)
@@ -58,8 +58,8 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
       tabIndex={0}
     >
       <td className="pl-4 py-2">{`${x.title}`}</td>
-      <td className="pr-4 py-2 text-sm text-gray-800 italic">{`${x.description}`}</td>
-    </tr>
+      <td className="pr-4 py-2 text-sm text-gray-800 dark:text-gray-400 italic">{`${x.description}`}</td>
+    </SidebarTable.Row>
   ))
 
   return (
@@ -68,16 +68,16 @@ const SidebarAlbumDownload = ({ albumID }: SidebarAlbumDownladProps) => {
         {t('sidebar.download.title', 'Download')}
       </SidebarSectionTitle>
 
-      <table className="table-auto w-full">
-        <thead className="bg-[#f9f9fb]">
-          <tr className="text-left uppercase text-xs border-gray-100 border-b border-t">
+      <SidebarTable.Table>
+        <SidebarTable.Head>
+          <SidebarTable.HeadRow>
             <th className="px-4 py-2" colSpan={2}>
               {t('sidebar.download.table_columns.name', 'Name')}
             </th>
-          </tr>
-        </thead>
+          </SidebarTable.HeadRow>
+        </SidebarTable.Head>
         <tbody>{downloadRows}</tbody>
-      </table>
+      </SidebarTable.Table>
     </SidebarSection>
   )
 }
diff --git a/ui/src/components/sidebar/SidebarDownloadMedia.tsx b/ui/src/components/sidebar/SidebarDownloadMedia.tsx
index ecb06043..4557166a 100644
--- a/ui/src/components/sidebar/SidebarDownloadMedia.tsx
+++ b/ui/src/components/sidebar/SidebarDownloadMedia.tsx
@@ -5,6 +5,7 @@ import { authToken } from '../../helpers/authentication'
 import { useTranslation } from 'react-i18next'
 import { TranslationFn } from '../../localization'
 import { MediaSidebarMedia } from './MediaSidebar/MediaSidebar'
+import SidebarTable from './SidebarTable'
 import {
   sidebarDownloadQuery,
   sidebarDownloadQueryVariables,
@@ -211,23 +212,18 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
   const download = downloadMedia(t)
   const bytes = formatBytes(t)
   const downloadRows = rows.map(x => (
-    <tr
-      className="cursor-pointer border-gray-100 dark:border-dark-border2 border-b hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-[#3c4759] dark:focus:bg-[#3c4759]"
-      key={x.url}
-      onClick={() => download(x.url)}
-      tabIndex={0}
-    >
+    <SidebarTable.Row key={x.url} onClick={() => download(x.url)} tabIndex={0}>
       <td className="pl-4 py-2">{`${x.title}`}</td>
       <td className="py-2">{`${x.width} x ${x.height}`}</td>
       <td className="py-2">{`${bytes(x.fileSize)}`}</td>
       <td className="pr-4 py-2">{extractExtension(x.url)}</td>
-    </tr>
+    </SidebarTable.Row>
   ))
 
   return (
-    <table className="table-fixed w-full">
-      <thead className="bg-[#f9f9fb] dark:bg-[#2B3037]">
-        <tr className="text-left uppercase text-xs border-gray-100 dark:border-dark-border2 border-b border-t">
+    <SidebarTable.Table>
+      <SidebarTable.Head>
+        <SidebarTable.HeadRow>
           <th className="w-2/6 pl-4 py-2">
             {t('sidebar.download.table_columns.name', 'Name')}
           </th>
@@ -240,10 +236,10 @@ const SidebarDownloadTable = ({ rows }: SidebarDownloadTableProps) => {
           <th className="w-1/6 pr-4 py-2">
             {t('sidebar.download.table_columns.file_type', 'Type')}
           </th>
-        </tr>
-      </thead>
+        </SidebarTable.HeadRow>
+      </SidebarTable.Head>
       <tbody>{downloadRows}</tbody>
-    </table>
+    </SidebarTable.Table>
   )
 }
 
diff --git a/ui/src/components/sidebar/SidebarTable.tsx b/ui/src/components/sidebar/SidebarTable.tsx
new file mode 100644
index 00000000..e05457e0
--- /dev/null
+++ b/ui/src/components/sidebar/SidebarTable.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+const Table = styled.table.attrs({ className: 'table-fixed w-full' })``
+
+const Head = styled.thead.attrs({
+  className: 'bg-[#f9f9fb] dark:bg-[#2B3037]',
+})``
+
+const HeadRow = styled.tr.attrs({
+  className:
+    'text-left uppercase text-xs border-gray-100 dark:border-dark-border2 border-b border-t',
+})``
+
+const Row = styled.tr.attrs({
+  className:
+    'cursor-pointer border-gray-100 dark:border-dark-border2 border-b hover:bg-gray-50 focus:bg-gray-50 dark:hover:bg-[#3c4759] dark:focus:bg-[#3c4759]',
+})``
+
+export default {
+  Table,
+  Head,
+  HeadRow,
+  Row,
+}
diff --git a/ui/src/index.css b/ui/src/index.css
index 63ef9800..2aaa3959 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -12,11 +12,6 @@ html {
   font-family: 'Source Sans Pro', sans-serif;
 }
 
-body.dark,
-html.dark {
-  @apply bg-dark-bg text-dark-text;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -28,6 +23,16 @@ html.dark {
 }
 
 @layer base {
+  body.dark,
+  html.dark {
+    @apply bg-dark-bg text-dark-text;
+  }
+
+  body.dark *,
+  html.dark * {
+    @apply border-dark-border;
+  }
+
   img {
     max-width: revert;
   }
diff --git a/ui/src/primitives/Modal.tsx b/ui/src/primitives/Modal.tsx
index 3faac50b..f2c1b2c7 100644
--- a/ui/src/primitives/Modal.tsx
+++ b/ui/src/primitives/Modal.tsx
@@ -46,7 +46,7 @@ const Modal = ({
       <div className="flex items-center justify-center min-h-screen">
         <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
 
-        <div className="fixed bg-white max-w-[calc(100%-16px)] mx-auto rounded shadow-md border">
+        <div className="fixed bg-white dark:bg-dark-bg max-w-[calc(100%-16px)] mx-auto rounded shadow-md border">
           <div className="p-4">
             <Dialog.Title className="text-xl mb-1">{title}</Dialog.Title>
             <Dialog.Description className="text-sm mb-4">
@@ -56,7 +56,7 @@ const Modal = ({
             {children}
           </div>
 
-          <div className="bg-gray-50 p-2 flex gap-2 justify-end mt-4">
+          <div className="bg-gray-50 p-2 dark:bg-[#31363d] flex gap-2 justify-end mt-4">
             {actionElms}
           </div>
         </div>
diff --git a/ui/src/primitives/Table.tsx b/ui/src/primitives/Table.tsx
index fffdfba7..b7a111db 100644
--- a/ui/src/primitives/Table.tsx
+++ b/ui/src/primitives/Table.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 export const Table = styled.table.attrs({
-  className: 'border border-separate rounded' as string,
+  className: 'border dark:border-dark-border border-separate rounded' as string,
 })`
   border-spacing: 0;
 
@@ -33,11 +33,12 @@ export const TableFooter = styled.tfoot.attrs({ className: '' as string })``
 export const TableRow = styled.tr.attrs({ className: '' as string })``
 
 export const TableCell = styled.td.attrs({
-  className: 'py-2 px-2 align-top' as string,
+  className: 'py-2 px-2 align-top dark:bg-[#2a2f35]' as string,
 })``
 
 export const TableHeaderCell = styled.th.attrs({
-  className: 'bg-gray-50 py-2 px-2 align-top font-semibold' as string,
+  className:
+    'bg-gray-50 dark:bg-dark-bg2 py-2 px-2 align-top font-semibold' as string,
 })``
 
 export const TableScrollWrapper = styled.div.attrs({
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 2d7a7fce..679d0e33 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -26,9 +26,9 @@ module.exports = {
         dark: {
           bg: '#24292e',
           bg2: '#30363e',
-          text: '#fafafa',
+          text: '#eee',
           border: '#3b3b3b',
-          border2: '#1E1E1E',
+          border2: '#202020',
           input: {
             bg: '#383e46',
             border: '#4a515a',