Further work on dark mode

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'
       )}
     >

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] ${
+          className={classNames(
-            ordering?.orderDirection == OrderDirection.ASC ? 'flip-y' : null
+            '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 />

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} />)
           }}

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 = () => {

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,
     })
 

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"

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>

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">
+      <tr
-        <td colSpan={2} className="pl-4 py-2 italic text-gray-600">
+        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"

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'

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]">
+      <thead className="bg-[#f9f9fb] dark:bg-[#2B3037]">
-        <tr className="text-left uppercase text-xs border-gray-100 border-b border-t">
+        <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>

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>
   )

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>
+    <div className="inline-block w-[100px] font-semibold text-sm text-[#888] text-right mr-2">
-    <ItemValue>{value}</ItemValue>
+      {name}
+    </div>
+    <div className="inline-block text-base">{value}</div>
   </div>
 )
 

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>

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>

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>

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_one": "",
-        "byte_plural": "{{count}} Bytes",
+        "byte_other": "",
-        "giga_byte": "{{count}} GB",
+        "giga_byte_one": "",
-        "giga_byte_plural": "",
+        "giga_byte_other": "",
-        "kilo_byte": "{{count}} KB",
+        "kilo_byte_one": "",
-        "kilo_byte_plural": "",
+        "kilo_byte_other": "",
-        "mega_byte": "{{count}} MB",
+        "mega_byte_one": "",
-        "mega_byte_plural": "",
+        "mega_byte_other": "",
-        "tera_byte": "{{count}} TB",
+        "tera_byte_one": "",
-        "tera_byte_plural": ""
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimension",

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
+      "set_cover": null,
-    },
+      "title": "Indstillinger for album"
-    "sharing": {
-      "table_header": "Offentlige delinger"
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
+        "byte": "{{count}} Byte",
-        "kilo_byte_plural": null,
+        "byte_plural": "{{count}} Bytes",
-        "mega_byte_plural": null,
+        "giga_byte": "{{count}} GB",
-        "tera_byte_plural": null
+        "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": {

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_one": "",
-        "byte_plural": "{{count}} Bytes",
+        "byte_other": "",
-        "giga_byte": "{{count}} GB",
+        "giga_byte_one": "",
-        "giga_byte_plural": "",
+        "giga_byte_other": "",
-        "kilo_byte": "{{count}} KB",
+        "kilo_byte_one": "",
-        "kilo_byte_plural": "",
+        "kilo_byte_other": "",
-        "mega_byte": "{{count}} MB",
+        "mega_byte_one": "",
-        "mega_byte_plural": "",
+        "mega_byte_other": "",
-        "tera_byte": "{{count}} TB",
+        "tera_byte_one": "",
-        "tera_byte_plural": ""
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimension",

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
+      "set_cover": null,
-    },
+      "title": "Album Optionen",
-    "sharing": {
+      "title_placeholder": null
-      "table_header": "Öffentliche Freigabe",
-      "delete": null,
-      "more": null
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
+        "byte": "{{count}} Byte",
-        "kilo_byte_plural": null,
+        "byte_plural": "{{count}} Bytes",
-        "mega_byte_plural": null,
+        "giga_byte": "{{count}} GB",
-        "tera_byte_plural": null
+        "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": ""
-    }
+    },
-  },
+    "sharing": {
-  "album_filter": {
+      "delete": null,
-    "sort": null
+      "more": null,
-  },
+      "table_header": "Öffentliche Freigabe"
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
     }
   },
   "timeline_filter": {

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_one": "{{count}} Byte",
-        "byte_plural": "{{count}} Bytes",
+        "byte_other": "{{count}} Bytes",
-        "giga_byte": "{{count}} GB",
+        "giga_byte_one": "{{count}} GB",
-        "giga_byte_plural": "{{count}} GB",
+        "giga_byte_other": "{{count}} GB",
-        "kilo_byte": "{{count}} KB",
+        "kilo_byte_one": "{{count}} KB",
-        "kilo_byte_plural": "{{count}} KB",
+        "kilo_byte_other": "{{count}} KB",
-        "mega_byte": "{{count}} MB",
+        "mega_byte_one": "{{count}} MB",
-        "mega_byte_plural": "{{count}} MB",
+        "mega_byte_other": "{{count}} MB",
-        "tera_byte": "{{count}} TB",
+        "tera_byte_one": "{{count}} TB",
-        "tera_byte_plural": "{{count}} TB"
+        "tera_byte_other": "{{count}} TB"
       },
       "table_columns": {
         "dimensions": "Dimensions",

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": {
+    "download": {
-      "table_header": "Public shares"
+      "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"
     }
   }
 }

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_one": "",
-        "byte_plural": "{{count}} Bytes",
+        "byte_other": "",
-        "giga_byte": "{{count}} GB",
+        "giga_byte_one": "",
-        "giga_byte_plural": "",
+        "giga_byte_other": "",
-        "kilo_byte": "{{count}} KB",
+        "kilo_byte_one": "",
-        "kilo_byte_plural": "",
+        "kilo_byte_other": "",
-        "mega_byte": "{{count}} MB",
+        "mega_byte_one": "",
-        "mega_byte_plural": "",
+        "mega_byte_other": "",
-        "tera_byte": "{{count}} TB",
+        "tera_byte_one": "",
-        "tera_byte_plural": ""
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimensiones",

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
+      "set_cover": null,
-    },
+      "title": "opciones de álbum",
-    "sharing": {
+      "title_placeholder": null
-      "table_header": "Compartidos públicos",
-      "delete": null,
-      "more": null
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
+        "byte": "{{count}} Byte",
-        "kilo_byte_plural": null,
+        "byte_plural": "{{count}} Bytes",
-        "mega_byte_plural": null,
+        "giga_byte": "{{count}} GB",
-        "tera_byte_plural": null
+        "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": ""
-    }
+    },
-  },
+    "sharing": {
-  "title": {
+      "delete": null,
-    "login": null
+      "more": null,
-  },
+      "table_header": "Compartidos públicos"
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
     }
   },
   "timeline_filter": {
@@ -148,5 +151,8 @@
       "dropdown_all": null,
       "label": null
     }
+  },
+  "title": {
+    "login": null
   }
 }

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_one": "",
-        "byte_plural": "{{count}} Octets",
+        "byte_many": "",
-        "giga_byte": "{{count}} Go",
+        "byte_other": "",
-        "giga_byte_plural": "{{count}} Go",
+        "giga_byte_one": "",
-        "kilo_byte": "{{count}} Ko",
+        "giga_byte_many": "",
-        "kilo_byte_plural": "{{count}} Ko",
+        "giga_byte_other": "",
-        "mega_byte": "{{count}} Mo",
+        "kilo_byte_one": "",
-        "mega_byte_plural": "{{count}} Mo",
+        "kilo_byte_many": "",
-        "tera_byte": "{{count}} To",
+        "kilo_byte_other": "",
-        "tera_byte_plural": "{{count}} To"
+        "mega_byte_one": "",
+        "mega_byte_many": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_many": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimensions",

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": {
+    "download": {
-      "table_header": "Partages publics"
+      "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
   }
 }

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_one": "",
-        "byte_plural": "{{count}} Bytes",
+        "byte_other": "",
-        "giga_byte": "{{count}} GB",
+        "giga_byte_one": "",
-        "giga_byte_plural": "",
+        "giga_byte_other": "",
-        "kilo_byte": "{{count}} KB",
+        "kilo_byte_one": "",
-        "kilo_byte_plural": "",
+        "kilo_byte_other": "",
-        "mega_byte": "{{count}} MB",
+        "mega_byte_one": "",
-        "mega_byte_plural": "",
+        "mega_byte_other": "",
-        "tera_byte": "{{count}} TB",
+        "tera_byte_one": "",
-        "tera_byte_plural": ""
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimensioni",

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
+      "set_cover": null,
-    },
+      "title": "Opzioni Album",
-    "sharing": {
+      "title_placeholder": null
-      "table_header": "Condivisioni pubbliche",
-      "delete": null,
-      "more": null
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
+        "byte": "{{count}} Byte",
-        "kilo_byte_plural": null,
+        "byte_plural": "{{count}} Bytes",
-        "mega_byte_plural": null,
+        "giga_byte": "{{count}} GB",
-        "tera_byte_plural": null
+        "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": ""
-    }
+    },
-  },
+    "sharing": {
-  "album_filter": {
+      "delete": null,
-    "sort": null
+      "more": null,
-  },
+      "table_header": "Condivisioni pubbliche"
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
     }
   },
   "timeline_filter": {

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_one": "",
-        "byte_1": "",
+        "byte_few": "",
-        "byte_2": "",
+        "byte_many": "",
-        "giga_byte_0": "",
+        "byte_other": "",
-        "giga_byte_1": "",
+        "giga_byte_one": "",
-        "giga_byte_2": "",
+        "giga_byte_few": "",
-        "kilo_byte_0": "",
+        "giga_byte_many": "",
-        "kilo_byte_1": "",
+        "giga_byte_other": "",
-        "kilo_byte_2": "",
+        "kilo_byte_one": "",
-        "mega_byte_0": "",
+        "kilo_byte_few": "",
-        "mega_byte_1": "",
+        "kilo_byte_many": "",
-        "mega_byte_2": "",
+        "kilo_byte_other": "",
-        "tera_byte_0": "",
+        "mega_byte_one": "",
-        "tera_byte_1": "",
+        "mega_byte_few": "",
-        "tera_byte_2": ""
+        "mega_byte_many": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_few": "",
+        "tera_byte_many": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Wymiary",

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_0": "",
-        "byte_1": null,
+        "byte_1": "",
-        "byte_2": null,
+        "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,
+        "tera_byte_0": "",
-        "giga_byte_1": null,
+        "tera_byte_1": "",
-        "giga_byte_2": null,
+        "tera_byte_2": ""
-        "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
       }
     },
-    "sharing": {
-      "table_header": "Publiczne udostępnienia",
-      "delete": null,
-      "more": null
-    },
     "media": {
       "album": ""
-    }
+    },
-  },
+    "sharing": {
-  "title": {
+      "delete": null,
-    "login": null
+      "more": null,
-  },
+      "table_header": "Publiczne udostępnienia"
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
     }
   },
   "timeline_filter": {
@@ -165,5 +162,8 @@
       "dropdown_all": null,
       "label": null
     }
+  },
+  "title": {
+    "login": null
   }
 }

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_one": "",
-        "byte_plural": "{{count}} Bytes",
+        "byte_other": "",
-        "giga_byte": "{{count}} GB",
+        "giga_byte_one": "",
-        "giga_byte_plural": "{{count}} GB",
+        "giga_byte_other": "",
-        "kilo_byte": "{{count}} KB",
+        "kilo_byte_one": "",
-        "kilo_byte_plural": "{{count}} KB",
+        "kilo_byte_other": "",
-        "mega_byte": "{{count}} MB",
+        "mega_byte_one": "",
-        "mega_byte_plural": "{{count}} MB",
+        "mega_byte_other": "",
-        "tera_byte": "{{count}} TB",
+        "tera_byte_one": "",
-        "tera_byte_plural": "{{count}} TB"
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Dimensões",

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"
+      }
+    }
   }
 }

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_one": "",
-        "byte_1": "",
+        "byte_few": "",
-        "byte_2": "",
+        "byte_many": "",
-        "giga_byte_0": "",
+        "byte_other": "",
-        "giga_byte_1": "",
+        "giga_byte_one": "",
-        "giga_byte_2": "",
+        "giga_byte_few": "",
-        "kilo_byte_0": "",
+        "giga_byte_many": "",
-        "kilo_byte_1": "",
+        "giga_byte_other": "",
-        "kilo_byte_2": "",
+        "kilo_byte_one": "",
-        "mega_byte_0": "",
+        "kilo_byte_few": "",
-        "mega_byte_1": "",
+        "kilo_byte_many": "",
-        "mega_byte_2": "",
+        "kilo_byte_other": "",
-        "tera_byte_0": "",
+        "mega_byte_one": "",
-        "tera_byte_1": "",
+        "mega_byte_few": "",
-        "tera_byte_2": ""
+        "mega_byte_many": "",
+        "mega_byte_other": "",
+        "tera_byte_one": "",
+        "tera_byte_few": "",
+        "tera_byte_many": "",
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Габариты",

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,
+        "tera_byte_0": "",
-        "byte_1": null,
+        "tera_byte_1": "",
-        "byte_2": null,
+        "tera_byte_2": ""
-        "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
       }
     },
-    "sharing": {
-      "table_header": "Общий доступ",
-      "delete": null,
-      "more": null
-    },
     "media": {
       "album": ""
-    }
+    },
-  },
+    "sharing": {
-  "album_filter": {
+      "delete": null,
-    "sort": null
+      "more": null,
-  },
+      "table_header": "Общий доступ"
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
     }
   },
   "timeline_filter": {

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_one": "",
-        "byte_plural": "{{count}} Bytes",
+        "byte_other": "",
-        "giga_byte": "{{count}} GB",
+        "giga_byte_one": "",
-        "giga_byte_plural": "",
+        "giga_byte_other": "",
-        "kilo_byte": "{{count}} KB",
+        "kilo_byte_one": "",
-        "kilo_byte_plural": "",
+        "kilo_byte_other": "",
-        "mega_byte": "{{count}} MB",
+        "mega_byte_one": "",
-        "mega_byte_plural": "",
+        "mega_byte_other": "",
-        "tera_byte": "{{count}} TB",
+        "tera_byte_one": "",
-        "tera_byte_plural": ""
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "Mått",

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
+      "set_cover": null,
-    },
+      "title": "Albuminställningar",
-    "sharing": {
+      "title_placeholder": null
-      "table_header": "Publika delningar",
-      "delete": null,
-      "more": null
     },
     "download": {
       "filesize": {
-        "giga_byte_plural": null,
+        "byte": "{{count}} Byte",
-        "kilo_byte_plural": null,
+        "byte_plural": "{{count}} Bytes",
-        "mega_byte_plural": null,
+        "giga_byte": "{{count}} GB",
-        "tera_byte_plural": null
+        "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": ""
-    }
+    },
-  },
+    "sharing": {
-  "title": {
+      "delete": null,
-    "login": null
+      "more": null,
-  },
+      "table_header": "Publika delningar"
-  "album_filter": {
-    "sort": null
-  },
-  "share_page": {
-    "protected_share": {
-      "password_required_error": null
     }
   },
   "timeline_filter": {
@@ -151,5 +154,8 @@
       "dropdown_all": null,
       "label": null
     }
+  },
+  "title": {
+    "login": null
   }
 }

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": "",
+        "byte_other": "",
-        "giga_byte": "",
+        "giga_byte_other": "",
-        "kilo_byte": "",
+        "kilo_byte_other": "",
-        "mega_byte": "",
+        "mega_byte_other": "",
-        "tera_byte": ""
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "尺寸",

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,
+        "byte": "",
-        "giga_byte": null,
+        "giga_byte": "",
-        "kilo_byte": null,
+        "kilo_byte": "",
-        "mega_byte": null,
+        "mega_byte": "",
-        "tera_byte": null
+        "tera_byte": ""
       }
     },
     "media": {

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": "",
+        "byte_other": "",
-        "giga_byte": "",
+        "giga_byte_other": "",
-        "kilo_byte": "",
+        "kilo_byte_other": "",
-        "mega_byte": "",
+        "mega_byte_other": "",
-        "tera_byte": ""
+        "tera_byte_other": ""
       },
       "table_columns": {
         "dimensions": "尺寸",

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,
+        "byte": "",
-        "giga_byte": null,
+        "giga_byte": "",
-        "kilo_byte": null,
+        "kilo_byte": "",
-        "mega_byte": null,
+        "mega_byte": "",
-        "tera_byte": null
+        "tera_byte": ""
       }
     },
     "media": {

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 overrideTailwindClasses(classNames(args))
-  return classNames(args)
+  // return classNames(args)
 }

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',

ui/src/theme.ts

@@ -32,3 +32,6 @@ export const getTheme = () => {
     return 'auto'
   }
 }
+
+export const isDarkMode = () =>
+  document.documentElement.classList.contains('dark')

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',