Добавил тему "Веспера"

src/utils/providers/ThemeProvider.tsx

@@ -0,0 +1,59 @@
+import React, {
+  createContext,
+  FC,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { keys } from 'ramda';
+
+import { Theme } from '~/constants/themes';
+
+interface ProvidersProps {}
+
+const ThemeContext = createContext({
+  theme: Theme.Default,
+  setTheme: (theme: Theme) => {},
+});
+
+const themeClass: Record<Theme, string> = {
+  [Theme.Default]: '',
+  [Theme.Horizon]: 'theme-horizon',
+};
+
+const ThemeProvider: FC<ProvidersProps> = ({ children }) => {
+  const [theme, setTheme] = useState(Theme.Default);
+  const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+
+  useEffect(() => {
+    const stored = localStorage.getItem('vault__theme');
+    if (!stored || !keys(themeClass).includes(stored as Theme)) {
+      return;
+    }
+    setTheme(stored as Theme);
+  }, []);
+
+  useEffect(() => {
+    if (!themeClass[theme]) {
+      return;
+    }
+
+    document.documentElement.classList.add(themeClass[theme]);
+
+    try {
+      localStorage.setItem('vault__theme', theme);
+    } catch {}
+
+    return () => document.documentElement.classList.remove(themeClass[theme]);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);
+
+export { ThemeProvider };

src/utils/toast/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 div.toast {
   @include outer_shadow;
@@ -11,13 +11,13 @@ div.toast {
 }
 
 div.toast.error {
-  background: $red_gradient_alt;
+  background: $danger_gradient;
 }
 
 div.toast.success {
-  background: $green_gradient;
+  background: $primary_gradient;
 }
 
 div.toast.info {
-  background: $cyan_gradient;
+  background: $magic_gradient;
 }