style(themes): rename dark to black

public/translations/en/default.json

@@ -6,7 +6,7 @@
   "header_top": "top",
   "account_bar_preferences": "preferences",
   "account_bar_language": "English",
-  "dark": "dark",
+  "black": "black",
   "light": "light",
   "topbar_my_subs": "my communities",
   "topbar_edit": "edit",

public/translations/it/default.json

@@ -6,7 +6,7 @@
   "header_top": "più votati",
   "account_bar_preferences": "preferenze",
   "account_bar_language": "Italiano",
-  "dark": "scuro",
+  "black": "scuro",
   "light": "chiaro",
   "topbar_my_subs": "le mie comunità",
   "topbar_edit": "modifica",

src/components/header/header.tsx

@@ -14,7 +14,7 @@ const Header: FC = () => {
   const [theme] = useTheme();
   const [selected, setSelected] = useState(sortType || '/topMonth');
 
-  const logoSrc = theme === 'dark' ? '/assets/logo/logo-dark.png' : '/assets/logo/logo-light.png';
+  const logoSrc = theme === 'black' ? '/assets/logo/logo-dark.png' : '/assets/logo/logo-light.png';
   const labels = [t('header_hot'), t('header_new'), t('header_rising'), t('header_controversial'), t('header_top')];
 
   useEffect(() => {

src/components/theme/theme.tsx

@@ -10,7 +10,7 @@ const Theme: FC = () => {
     <div style={{ padding: '5px' }}>
       <select value={theme} onChange={(e) => setTheme(e.target.value)}>
         <option value='light'>{t('light')}</option>
-        <option value='dark'>{t('dark')}</option>
+        <option value='black'>{t('black')}</option>
       </select>
     </div>
   );

src/themes.css

@@ -14,7 +14,7 @@
   --icon: #c6c6c6;
 }
 
-:root .dark {
+:root .black {
   --background: #0f0f0f;
   --background-primary: #1f1f1f;
   --background-secondary: #3e3e3e;