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] 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 e9769cd..9da1757 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 c010931..9995c8a 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 189deb9..4774b94 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 035ffe0..e518106 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 071bd06..b2a3087 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 4b0d7ab..f4c04aa 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 fdadac8..8c05373 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 04d3a29..4541a7a 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 090ce53..9ac5c77 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 01d4f5e..ecb0604 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 feb98eb..0a6d39c 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 1608f73..9a111d3 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 1d73015..18eefbb 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 a363dc0..0abac82 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 08eab7a..2ba7e90 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 61a3949..f06f1be 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 ec51c67..9818ce9 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 a5157e5..a1b28c8 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 d21d24f..24693be 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 791c7d2..54848d9 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 1a50360..aab7604 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 8003028..cad81fd 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 eee880e..61afe48 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 51ca9cd..d56d45c 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 58420ff..c383345 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 528d835..3b57bae 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 3cd12dd..1df6227 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 8e7186f..59688be 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 fab4374..6b2286b 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 7e90e82..30617c3 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 8f73fa0..f01da75 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 2665ec8..00c211e 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 ae7cdd0..5746063 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 2fcfeaa..b39fb6e 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 061609f..0b1ff83 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 d17e811..5759afb 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 1f14223..bd5febb 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 479cc16..26bb503 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 c45a0a1..1771356 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 8bf66d7..77b7f58 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 9b6613a..b37d3d4 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 9599b81..4d47542 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 227ee40..2d7a7fc 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',