Theme

web/apps/auth/src/pages/share.tsx

@@ -1,6 +1,6 @@
 import { EnteLogo } from "@/base/components/EnteLogo";
 import { decryptMetadataJSON_New } from "@/base/crypto";
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography, useTheme } from "@mui/material";
 import React, { useEffect, useMemo, useState } from "react";
 
 interface SharedCode {
@@ -19,6 +19,8 @@ const Page: React.FC = () => {
         progress: 0,
     });
 
+    const theme = useTheme();
+
     const getTimeStatus = (
         currentTime: number,
         startTime: number,
@@ -101,8 +103,11 @@ const Page: React.FC = () => {
     }, [sharedCode]);
 
     const progressBarColor = useMemo(
-        () => (100 - codeDisplay.progress > 40 ? "#8E2DE2" : "#FFC107"),
-        [codeDisplay.progress],
+        () =>
+            100 - codeDisplay.progress > 40
+                ? theme.vars.palette.accent.light
+                : "#FFC107",
+        [theme, codeDisplay.progress],
     );
 
     return (

web/packages/base/components/utils/theme.ts

@@ -133,9 +133,10 @@ const _colors = {
         light: "#01DE4D",
     },
     accentAuth: {
-        dark: "rgb(164, 0, 182)",
-        main: "rgb(150, 13, 214)",
-        light: "rgb(152, 77, 244)",
+        dark: "#8e0fcb",
+        main: "#9610d6",
+        light: "#8e2de2",
+        lighter: "#984df4", /* TODO(LM) */
     },
     fixed: {
         white: "#fff",