Merge pull request #63 from RobinNagpal/theme-via-js

Set theme using javascript
RobinNagpal · Dec 18, 2023 · f070b29 · f070b29 · vercel · Dec 18, 2023
2 parents 8adac81 + 9dca3cb
commit f070b29
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 117 deletions.
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -7,15 +7,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 @import "@uiw/react-md-editor/dist/mdeditor.css";
-
-@import 'styles/themes/aaveTheme';
-@import 'styles/themes/arbitrumTheme';
-@import 'styles/themes/balancerTheme';
-@import 'styles/themes/compoundTheme';
-@import 'styles/themes/fuseTheme';
-@import 'styles/themes/globalTheme';
-@import 'styles/themes/klerosTheme';
-@import 'styles/themes/optimismTheme';
-@import 'styles/themes/uniswapTheme';
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,18 +1,19 @@
 import { authOptions } from '@/app/api/auth/[...nextauth]/authOptions';
-import { useSpace } from '@/contexts/SpaceContext';
+import { CssTheme, ThemeKey, themes } from '@/app/themes';
 import { Session } from '@/types/auth/Session';
 import { Themes } from '@/types/deprecated/models/enums';
 import { getGTagId } from '@/utils/analytics/getGTagId';
 import { getSpaceServerSide } from '@/utils/api/getSpaceServerSide';
 import { Analytics } from '@vercel/analytics/react';
 import { getServerSession } from 'next-auth';
 import Script from 'next/script';
+import { CSSProperties, ReactNode } from 'react';
 import 'tailwindcss/tailwind.css';
 import './globals.scss';
 import InternalLayout from './InternalLayout';
 
 interface RootLayoutProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export default async function RootLayout({ children }: RootLayoutProps) {
@@ -29,30 +30,44 @@ export default async function RootLayout({ children }: RootLayoutProps) {
   const isOptimismTheme = space?.skin === Themes.Optimism;
   const isArbitrumTheme = space?.skin === Themes.Arbitrum;
 
-  let theme = 'global-theme';
+  let theme: ThemeKey = CssTheme.GlobalTheme;
 
   if (isThemeAave) {
-    theme = 'aave-theme';
+    theme = CssTheme.AaveTheme;
   } else if (isArbitrumTheme) {
-    theme = 'arbitrum-theme';
+    theme = CssTheme.ArbitrumTheme;
   } else if (isThemeBalancer) {
-    theme = 'balancer-theme';
+    theme = CssTheme.BalancerTheme;
   } else if (isThemeCompound) {
-    theme = 'compound-theme';
+    theme = CssTheme.CompoundTheme;
   } else if (isThemeFuse) {
-    theme = 'fuse-theme';
+    theme = CssTheme.FuseTheme;
   } else if (isThemeKleros) {
-    theme = 'kleros-theme';
+    theme = CssTheme.KlerosTheme;
   } else if (isThemeDoDAO) {
-    theme = 'global-theme';
+    theme = CssTheme.GlobalTheme;
   } else if (isOptimismTheme) {
-    theme = 'optimism-theme';
+    theme = CssTheme.OptimismTheme;
   } else if (isThemeUniswap) {
-    theme = 'uniswap-theme';
+    theme = CssTheme.UniswapTheme;
   }
+
+  const themeValue = themes[theme];
+
+  const style = {
+    '--primary-color': themeValue.primaryColor,
+    '--bg-color': themeValue.bgColor,
+    '--text-color': themeValue.textColor,
+    '--link-color': themeValue.linkColor,
+    '--heading-color': themeValue.headingColor,
+    '--border-color': themeValue.borderColor,
+    '--header-bg': themeValue.headerBg,
+    '--block-bg': themeValue.blockBg,
+  } as CSSProperties;
+
   return (
     <html lang="en" className="h-full">
-      <body className={'max-h-screen ' + theme} style={{ backgroundColor: 'var(--bg-color)' }}>
+      <body className={'max-h-screen ' + theme} style={{ ...style, backgroundColor: 'var(--bg-color)' }}>
         <Script src={`https://www.googletagmanager.com/gtag/js?id=${gtag}`} />
         <Script id="google-analytics">
           {`

diff --git a/src/app/styles/themes/aaveTheme.scss b/src/app/styles/themes/aaveTheme.scss
diff --git a/src/app/styles/themes/arbitrumTheme.scss b/src/app/styles/themes/arbitrumTheme.scss
diff --git a/src/app/styles/themes/balancerTheme.scss b/src/app/styles/themes/balancerTheme.scss
diff --git a/src/app/styles/themes/compoundTheme.scss b/src/app/styles/themes/compoundTheme.scss
diff --git a/src/app/styles/themes/fuseTheme.scss b/src/app/styles/themes/fuseTheme.scss
diff --git a/src/app/styles/themes/globalTheme.scss b/src/app/styles/themes/globalTheme.scss
diff --git a/src/app/styles/themes/klerosTheme.scss b/src/app/styles/themes/klerosTheme.scss
diff --git a/src/app/styles/themes/optimismTheme.scss b/src/app/styles/themes/optimismTheme.scss
diff --git a/src/app/styles/themes/uniswapTheme.scss b/src/app/styles/themes/uniswapTheme.scss
diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
diff --git a/src/app/themes.ts b/src/app/themes.ts
@@ -0,0 +1,116 @@
+export interface ThemeValue {
+  primaryColor: string;
+  bgColor: string;
+  textColor: string;
+  linkColor: string;
+  headingColor: string;
+  borderColor: string;
+  headerBg: string;
+  blockBg: string;
+}
+
+export enum CssTheme {
+  AaveTheme = 'AaveTheme',
+  ArbitrumTheme = 'ArbitrumTheme',
+  BalancerTheme = 'BalancerTheme',
+  CompoundTheme = 'CompoundTheme',
+  FuseTheme = 'FuseTheme',
+  GlobalTheme = 'GlobalTheme',
+  KlerosTheme = 'KlerosTheme',
+  OptimismTheme = 'OptimismTheme',
+  UniswapTheme = 'UniswapTheme',
+}
+export type ThemeKey = keyof typeof CssTheme;
+
+export const themes: Record<keyof typeof CssTheme, ThemeValue> = {
+  AaveTheme: {
+    primaryColor: '#2EBAC6',
+    bgColor: '#1B2030',
+    textColor: '#f1f1f3',
+    linkColor: '#f1f1f3',
+    headingColor: '#f1f1f3',
+    borderColor: '#d1d5da',
+    headerBg: '#383D51',
+    blockBg: '#383D51',
+  },
+  ArbitrumTheme: {
+    primaryColor: '#1B4ADD',
+    bgColor: '#0A0A0A',
+    textColor: '#f8fafc',
+    linkColor: '#ffffff',
+    headingColor: '#ffffff',
+    borderColor: '#4971E9',
+    headerBg: '#0A0A0A',
+    blockBg: '#1D2C52',
+  },
+  BalancerTheme: {
+    primaryColor: '#3183ff',
+    bgColor: '#0A0A0A',
+    textColor: '#f8fafc',
+    linkColor: '#ffffff',
+    headingColor: '#ffffff',
+    borderColor: '#0751bf',
+    headerBg: '#0A0A0A',
+    blockBg: '#1D2C52',
+  },
+  CompoundTheme: {
+    primaryColor: '#00AD79',
+    bgColor: '#0D131A',
+    textColor: '#f1f1f3',
+    linkColor: '#f1f1f3',
+    headingColor: '#f1f1f3',
+    borderColor: '#d1d5da',
+    headerBg: '#1D2833',
+    blockBg: '#323432',
+  },
+  FuseTheme: {
+    primaryColor: '#000000',
+    bgColor: '#FFFFFF',
+    textColor: '#000000',
+    linkColor: '#333333',
+    headingColor: '#000000',
+    borderColor: '#BBBBBB',
+    headerBg: '#EEEEEE',
+    blockBg: '#EEEEEE',
+  },
+  GlobalTheme: {
+    primaryColor: '#384aff',
+    bgColor: '#ffffff',
+    textColor: '#57606a',
+    linkColor: '#111111',
+    headingColor: '#111111',
+    borderColor: '#d0d7de',
+    headerBg: '#F5F9FF',
+    blockBg: '#F5F9FF',
+  },
+  KlerosTheme: {
+    primaryColor: '#4d00b4',
+    bgColor: '#ffffff',
+    textColor: '#000000',
+    linkColor: '#000000',
+    headingColor: '#4d00b4',
+    borderColor: '#cccccc',
+    headerBg: '#fbf9fe',
+    blockBg: 'transparent',
+  },
+  OptimismTheme: {
+    primaryColor: '#ff0420',
+    bgColor: '#1e1313',
+    textColor: '#f1f1f3',
+    linkColor: '#f1f1f3',
+    headingColor: '#f1f1f3',
+    borderColor: '#fb9191',
+    headerBg: '#1e1313',
+    blockBg: '#2f2d2d',
+  },
+  UniswapTheme: {
+    primaryColor: '#6f6cbd',
+    bgColor: '#212429',
+    textColor: '#c2c5ca',
+    linkColor: '#ffffff',
+    headingColor: '#6f6cbd',
+    borderColor: '#909294',
+    headerBg: '#3B3A60FF',
+    blockBg: '#3B3A60FF',
+  },
+};
diff --git a/src/components/timelines/View/V2OneSide/V2OneSideTimelineView.module.scss b/src/components/timelines/View/V2OneSide/V2OneSideTimelineView.module.scss
@@ -1,3 +1,4 @@
+
 .styledLink {
   color: var(--primary-color);
   cursor: pointer;