filled default light and dark theme

public/locales/en/translation.json

@@ -16,5 +16,10 @@
   "Light theme": "Light theme",
   "Blueberry boar": "Blueberry boar",
   "User defined theme": "User defined",
-  "Built-in theme": "Built-in"
+  "Built-in theme": "Built-in",
+  "Heading 1": "Heading 1",
+  "Heading 2": "Heading 2",
+  "Heading 3": "Heading 3",
+  "Heading 4": "Heading 4",
+  "Heading 5": "Heading 5"
 }

public/locales/ru/translation.json

@@ -16,5 +16,10 @@
   "Light theme": "Светлая",
   "Blueberry boar": "Черничный кабанчик",
   "User defined theme": "Пользовательская",
-  "Built-in theme": "Встроенная"
+  "Built-in theme": "Встроенная",
+  "Heading 1": "Заголовок 1",
+  "Heading 2": "Заголовок 2",
+  "Heading 3": "Заголовок 3",
+  "Heading 4": "Заголовок 4",
+  "Heading 5": "Заголовок 5"
 }

src/modules/settings/containers/ColorSettings/index.tsx

@@ -7,14 +7,13 @@ import {
   SettingsValue,
   useSettings,
 } from "~/modules/settings/context/SettingsContext";
-import { ThemeSelect } from "../../components/ThemeSelect";
 import { useBuiltinThemes } from "~/modules/theme/constants/themes";
-import { useDefaultTheme } from "~/modules/theme/hooks/useDefaultTheme";
+import { fillThemeHeadings } from "~/modules/theme/utils/fillThemeHeadings";
+import { ThemeSelect } from "../../components/ThemeSelect";
 
 const ColorSettings: FC = () => {
   const { update, settings } = useSettings();
   const { t } = useTranslation();
-  const defaultColors = useDefaultTheme();
 
   const setString = useCallback(
     (field: keyof SettingsValue) => (event: ChangeEvent<HTMLInputElement>) => {
@@ -28,19 +27,19 @@ const ColorSettings: FC = () => {
   const currentTheme = useMemo(
     () =>
       themes.find((it) =>
-        Object.entries({ ...defaultColors, ...it.colors }).every(
+        Object.entries(fillThemeHeadings(it.colors)).every(
           ([key, value]) =>
             (settings as unknown as Record<string, string>)[key] === value
         )
       ),
-    [themes, defaultColors, settings]
+    [themes, settings]
   );
 
   const setThemeColors = useCallback(
     (val: ColorSettings) => {
-      update({ ...defaultColors, ...val });
+      update(fillThemeHeadings(val));
     },
-    [defaultColors, update]
+    [update]
   );
 
   const themeSubtitle = useMemo(() => {
@@ -57,7 +56,7 @@ const ColorSettings: FC = () => {
 
   return (
     <RowGroup>
-      <label htmlFor="theme">
+      <label>
         <SettingsRow title={t("Color theme")} subTitle={themeSubtitle}>
           <ThemeSelect
             value={currentTheme}
@@ -67,49 +66,95 @@ const ColorSettings: FC = () => {
         </SettingsRow>
       </label>
 
-      <label htmlFor="backgroundColor">
+      <label>
         <SettingsRow title={t("Background")}>
           <input
             type="color"
-            id="backgroundColor"
             onChange={setString("backgroundColor")}
             value={settings.backgroundColor}
           />
         </SettingsRow>
       </label>
 
-      <label htmlFor="textColor">
+      <label>
         <SettingsRow title={t("Text")}>
           <input
             type="color"
-            id="textColor"
             onChange={setString("textColor")}
             value={settings.textColor}
           />
         </SettingsRow>
       </label>
 
-      <label htmlFor="linkColor">
+      <label>
         <SettingsRow title={t("Links")}>
           <input
             type="color"
-            id="linkColor"
             onChange={setString("linkColor")}
             value={settings.linkColor}
           />
         </SettingsRow>
       </label>
 
-      <label htmlFor="codeColor">
+      <label>
         <SettingsRow title={t("Inline code")}>
           <input
             type="color"
-            id="codeColor"
             onChange={setString("codeColor")}
             value={settings.codeColor}
           />
         </SettingsRow>
       </label>
+
+      <label>
+        <SettingsRow title={t("Heading 1")}>
+          <input
+            type="color"
+            onChange={setString("h1Color")}
+            value={settings.h1Color || settings.textColor}
+          />
+        </SettingsRow>
+      </label>
+
+      <label>
+        <SettingsRow title={t("Heading 2")}>
+          <input
+            type="color"
+            onChange={setString("h2Color")}
+            value={settings.h2Color || settings.textColor}
+          />
+        </SettingsRow>
+      </label>
+
+      <label>
+        <SettingsRow title={t("Heading 3")}>
+          <input
+            type="color"
+            onChange={setString("h3Color")}
+            value={settings.h3Color || settings.textColor}
+          />
+        </SettingsRow>
+      </label>
+
+      <label>
+        <SettingsRow title={t("Heading 4")}>
+          <input
+            type="color"
+            onChange={setString("h4Color")}
+            value={settings.h4Color || settings.textColor}
+          />
+        </SettingsRow>
+      </label>
+
+      <label>
+        <SettingsRow title={t("Heading 5")}>
+          <input
+            type="color"
+            onChange={setString("h5Color")}
+            value={settings.h5Color || settings.textColor}
+          />
+        </SettingsRow>
+      </label>
     </RowGroup>
   );
 };

src/modules/theme/constants/theme.ts

@@ -10,21 +10,21 @@ export const defaultDarkTheme: ColorSettings = {
   textColor: "#eeeeee",
   linkColor: "#25bfe6",
   codeColor: "#ff3344",
-  h1Color: "",
+  h1Color: "#f66151",
-  h2Color: "",
+  h2Color: "#ffbe6f",
-  h3Color: "",
+  h3Color: "#f9f06b",
-  h4Color: "",
+  h4Color: "#8ff0a4",
-  h5Color: "",
+  h5Color: "#99c1f1",
 };
 
 export const defaultLightTheme: ColorSettings = {
-  backgroundColor: "#eeeeee",
+  backgroundColor: "#deddda",
   textColor: "#2e2e2e",
-  linkColor: "#25bfe6",
+  linkColor: "#1c71d8",
   codeColor: "#ff3344",
-  h1Color: "",
+  h1Color: "#6b5554",
-  h2Color: "",
+  h2Color: "#4f403f",
-  h3Color: "",
+  h3Color: "#3d302f",
-  h4Color: "",
+  h4Color: "#2e2625",
-  h5Color: "",
+  h5Color: "#2c2322",
 };

src/modules/theme/utils/fillThemeHeadings.ts

@@ -0,0 +1,10 @@
+import { ColorSettings } from "~/modules/settings/context/SettingsContext";
+
+export const fillThemeHeadings = (theme: ColorSettings): ColorSettings => ({
+  ...theme,
+  h1Color: theme.h1Color || theme.textColor,
+  h2Color: theme.h2Color || theme.textColor,
+  h3Color: theme.h3Color || theme.textColor,
+  h4Color: theme.h4Color || theme.textColor,
+  h5Color: theme.h5Color || theme.textColor,
+});