From f2141dd83dfaca049fab26ffc506a263edec3ad6 Mon Sep 17 00:00:00 2001
From: Martin Fournier <martin@mfournier.com>
Date: Wed, 22 Dec 2021 10:29:50 -0500
Subject: [PATCH] Add community themes from discord

---
 src/Settings/Themes.ts            | 367 +++++++++++++++++++++++++++---
 src/ui/React/ThemeEditorModal.tsx |  25 +-
 2 files changed, 353 insertions(+), 39 deletions(-)

diff --git a/src/Settings/Themes.ts b/src/Settings/Themes.ts
index a67ac4bd7..873b55565 100644
--- a/src/Settings/Themes.ts
+++ b/src/Settings/Themes.ts
@@ -1,3 +1,5 @@
+import { IMap } from "../types";
+
 export interface ITheme {
   [key: string]: string | undefined;
   primarylight: string;
@@ -35,6 +37,14 @@ export interface ITheme {
   button: string;
 }
 
+export interface IPredefinedTheme {
+  colors: ITheme;
+  name?: string;
+  credit?: string;
+  description?: string;
+  reference?: string;
+}
+
 export const defaultTheme: ITheme = {
   primarylight: "#0f0",
   primary: "#0c0",
@@ -71,40 +81,331 @@ export const defaultTheme: ITheme = {
   button: "#333",
 };
 
-export interface IPredefinedThemes {
-  'Default': ITheme;
-  'Monokai': ITheme;
-}
+export const getPredefinedThemes = (): IMap<IPredefinedTheme> => ({
+  Default: {
+    colors: defaultTheme,
+  },
+  Monokai: {
+    description: "Monokai'ish",
+    colors: {
+      primarylight: "#FFF",
+      primary: "#F8F8F2",
+      primarydark: "#FAFAEB",
+      successlight: "#ADE146",
+      success: "#A6E22E",
+      successdark: "#98E104",
+      errorlight: "#FF69A0",
+      error: "#F92672",
+      errordark: "#D10F56",
+      secondarylight: "#AAA",
+      secondary: "#888",
+      secondarydark: "#666",
+      warninglight: "#E1D992",
+      warning: "#E6DB74",
+      warningdark: "#EDDD54",
+      infolight: "#92E1F1",
+      info: "#66D9EF",
+      infodark: "#31CDED",
+      welllight: "#444",
+      well: "#222",
+      white: "#fff",
+      black: "#000",
+      hp: "#F92672",
+      money: "#E6DB74",
+      hack: "#A6E22E",
+      combat: "#75715E",
+      cha: "#AE81FF",
+      int: "#66D9EF",
+      rep: "#E69F66",
+      disabled: "#66cfbc",
+      backgroundprimary: "#272822",
+      backgroundsecondary: "#1B1C18",
+      button: "#333",
+    },
+  },
 
-export const getPredefinedThemes = (): IPredefinedThemes => ({
-  'Default': defaultTheme,
-  'Monokai': {
-    ...defaultTheme,
+  Warmer: {
+    credit: "hexnaught",
+    description: "Warmer, softer theme",
+    reference: "https://discord.com/channels/415207508303544321/921991895230611466/921999581020028938",
+    colors: {
+      primarylight: "#EA9062",
+      primary: "#DD7B4A",
+      primarydark: "#D3591C",
+      successlight: "#6ACF6A",
+      success: "#43BF43",
+      successdark: "#3E913E",
+      errorlight: "#C15757",
+      error: "#B34141",
+      errordark: "#752525",
+      secondarylight: "#AAA",
+      secondary: "#888",
+      secondarydark: "#666",
+      warninglight: "#E6E69D",
+      warning: "#DADA56",
+      warningdark: "#A1A106",
+      infolight: "#69f",
+      info: "#36c",
+      infodark: "#039",
+      welllight: "#444",
+      well: "#222",
+      white: "#fff",
+      black: "#000",
+      hp: "#dd3434",
+      money: "#ffd700",
+      hack: "#adff2f",
+      combat: "#faffdf",
+      cha: "#AD84CF",
+      int: "#6495ed",
+      rep: "#faffdf",
+      disabled: "#76C6B7",
+      backgroundprimary: "#000",
+      backgroundsecondary: "#000",
+      button: "#333",
+    },
+  },
 
-    backgroundprimary: '#272822',
-    backgroundsecondary: '#1B1C18',
-    primary: '#F8F8F2',
-    primarylight: '#FFF',
-    primarydark: '#FAFAEB',
-    success: '#A6E22E',
-    successlight: '#ADE146',
-    successdark: '#98E104',
-    error: '#F92672',
-    errorlight: '#FF69A0',
-    errordark: '#D10F56',
-    warning: '#E6DB74',
-    warninglight: '#E1D992',
-    warningdark: '#EDDD54',
-    info: '#66D9EF',
-    infolight: '#92E1F1',
-    infodark: '#31CDED',
+  "Dark+": {
+    credit: "LoganMD",
+    description: "VSCode Dark+",
+    reference: "https://discord.com/channels/415207508303544321/921991895230611466/921999975867617310",
+    colors: {
+      primarylight: "#E0E0BC",
+      primary: "#CCCCAE",
+      primarydark: "#B8B89C",
+      successlight: "#00F000",
+      success: "#00D200",
+      successdark: "#00B400",
+      errorlight: "#F00000",
+      error: "#C80000",
+      errordark: "#A00000",
+      secondarylight: "#B4AEAE",
+      secondary: "#969090",
+      secondarydark: "#787272",
+      warninglight: "#F0F000",
+      warning: "#C8C800",
+      warningdark: "#A0A000",
+      infolight: "#69f",
+      info: "#36c",
+      infodark: "#039",
+      welllight: "#444",
+      well: "#222",
+      white: "#fff",
+      black: "#1E1E1E",
+      hp: "#dd3434",
+      money: "#ffd700",
+      hack: "#adff2f",
+      combat: "#faffdf",
+      cha: "#a671d1",
+      int: "#6495ed",
+      rep: "#faffdf",
+      disabled: "#66cfbc",
+      backgroundprimary: "#1E1E1E",
+      backgroundsecondary: "#252525",
+      button: "#333",
+    },
+  },
 
-    hp: '#F92672',
-    money: '#E6DB74',
-    hack: '#A6E22E',
-    combat: '#75715E',
-    cha: '#AE81FF',
-    int: '#66D9EF',
-    rep: '#E69F66',
-  }
+  "Mayukai Dark": {
+    credit: "Festive Noire",
+    description: "Mayukai Dark-esque",
+    reference: "https://discord.com/channels/415207508303544321/921991895230611466/922037502334889994",
+    colors: {
+      primarylight: "#DDDFC5",
+      primary: "#CDCFB6",
+      primarydark: "#9D9F8C",
+      successlight: "#00EF00",
+      success: "#00A500",
+      successdark: "#007A00",
+      errorlight: "#F92672",
+      error: "#CA1C5C",
+      errordark: "#90274A",
+      secondarylight: "#AAA",
+      secondary: "#888",
+      secondarydark: "#666",
+      warninglight: "#D3D300",
+      warning: "#cc0",
+      warningdark: "#990",
+      infolight: "#69f",
+      info: "#36c",
+      infodark: "#039",
+      welllight: "#444",
+      well: "#00010A",
+      white: "#fff",
+      black: "#020509",
+      hp: "#dd3434",
+      money: "#ffd700",
+      hack: "#8CCF27",
+      combat: "#faffdf",
+      cha: "#a671d1",
+      int: "#6495ed",
+      rep: "#faffdf",
+      disabled: "#66cfbc",
+      backgroundprimary: "#080C11",
+      backgroundsecondary: "#03080F",
+      button: "#00010A",
+    },
+  },
+
+  Purple: {
+    credit: "zer0ney",
+    description: "Essentially all defaults except for purple replacing the main colors",
+    reference: "https://discord.com/channels/415207508303544321/921991895230611466/922091815849570395",
+    colors: {
+      primarylight: "#BA55D3",
+      primary: "#9370DB",
+      primarydark: "#8A2BE2",
+      successlight: "#BA55D3",
+      success: "#9370DB",
+      successdark: "#8A2BE2",
+      errorlight: "#f00",
+      error: "#c00",
+      errordark: "#900",
+      secondarylight: "#AAA",
+      secondary: "#888",
+      secondarydark: "#666",
+      warninglight: "#ff0",
+      warning: "#cc0",
+      warningdark: "#990",
+      infolight: "#69f",
+      info: "#36c",
+      infodark: "#039",
+      welllight: "#444",
+      well: "#222",
+      white: "#fff",
+      black: "#000",
+      hp: "#dd3434",
+      money: "#ffd700",
+      hack: "#adff2f",
+      combat: "#faffdf",
+      cha: "#a671d1",
+      int: "#6495ed",
+      rep: "#faffdf",
+      disabled: "#66cfbc",
+      backgroundprimary: "#000",
+      backgroundsecondary: "#000",
+      button: "#333",
+    },
+  },
+
+  "Smooth Green": {
+    credit: "Swidt",
+    description: "A nice green theme that doesn't hurt your eyes.",
+    reference: "https://discord.com/channels/415207508303544321/921991895230611466/922243957986033725",
+    colors: {
+      primarylight: "#E0E0BC",
+      primary: "#B0D9A3",
+      primarydark: "#B8B89C",
+      successlight: "#00F000",
+      success: "#6BC16B",
+      successdark: "#00B400",
+      errorlight: "#F00000",
+      error: "#3D713D",
+      errordark: "#A00000",
+      secondarylight: "#B4AEAE",
+      secondary: "#8FAF85",
+      secondarydark: "#787272",
+      warninglight: "#F0F000",
+      warning: "#38F100",
+      warningdark: "#A0A000",
+      infolight: "#69f",
+      info: "#36c",
+      infodark: "#039",
+      welllight: "#444",
+      well: "#2F3C2B",
+      white: "#fff",
+      black: "#1E1E1E",
+      hp: "#dd3434",
+      money: "#4AA52E",
+      hack: "#adff2f",
+      combat: "#faffdf",
+      cha: "#a671d1",
+      int: "#6495ed",
+      rep: "#35A135",
+      disabled: "#66cfbc",
+      backgroundprimary: "#1E1E1E",
+      backgroundsecondary: "#252525",
+      button: "#2F3C2B",
+    },
+  },
+
+  Dracula: {
+    credit: "H3draut3r",
+    reference: "https://discord.com/channels/415207508303544321/921991895230611466/922296307836678144",
+    colors: {
+      primarylight: "#7082B8",
+      primary: "#F8F8F2",
+      primarydark: "#FF79C6",
+      successlight: "#0f0",
+      success: "#0c0",
+      successdark: "#090",
+      errorlight: "#FD4545",
+      error: "#FF2D2D",
+      errordark: "#C62424",
+      secondarylight: "#AAA",
+      secondary: "#8BE9FD",
+      secondarydark: "#666",
+      warninglight: "#FFC281",
+      warning: "#FFB86C",
+      warningdark: "#E6A055",
+      infolight: "#A0A0FF",
+      info: "#7070FF",
+      infodark: "#4040FF",
+      welllight: "#44475A",
+      well: "#363948",
+      white: "#fff",
+      black: "#282A36",
+      hp: "#D34448",
+      money: "#50FA7B",
+      hack: "#F1FA8C",
+      combat: "#BD93F9",
+      cha: "#FF79C6",
+      int: "#6495ed",
+      rep: "#faffdf",
+      disabled: "#66cfbc",
+      backgroundprimary: "#282A36",
+      backgroundsecondary: "#21222C",
+      button: "#21222C",
+    },
+  },
+
+  "Dark Blue": {
+    credit: "Saynt_Garmo",
+    reference: "https://discord.com/channels/415207508303544321/921991895230611466/923084732718264340",
+    colors: {
+      primarylight: "#023DDE",
+      primary: "#4A41C8",
+      primarydark: "#005299",
+      successlight: "#00FF00",
+      success: "#D1DAD1",
+      successdark: "#BFCABF",
+      errorlight: "#f00",
+      error: "#c00",
+      errordark: "#900",
+      secondarylight: "#AAA",
+      secondary: "#888",
+      secondarydark: "#666",
+      warninglight: "#ff0",
+      warning: "#cc0",
+      warningdark: "#990",
+      infolight: "#69f",
+      info: "#36c",
+      infodark: "#039",
+      welllight: "#444",
+      well: "#040505",
+      white: "#fff",
+      black: "#000000",
+      hp: "#dd3434",
+      money: "#ffd700",
+      hack: "#adff2f",
+      combat: "#faffdf",
+      cha: "#a671d1",
+      int: "#6495ed",
+      rep: "#faffdf",
+      disabled: "#66cfbc",
+      backgroundprimary: "#091419",
+      backgroundsecondary: "#000000",
+      button: "#000000",
+    },
+  },
 });
diff --git a/src/ui/React/ThemeEditorModal.tsx b/src/ui/React/ThemeEditorModal.tsx
index 52876562f..902a0a34c 100644
--- a/src/ui/React/ThemeEditorModal.tsx
+++ b/src/ui/React/ThemeEditorModal.tsx
@@ -69,12 +69,25 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
 
   const predefinedThemes = getPredefinedThemes();
   const themes = predefinedThemes && Object.entries(predefinedThemes)
-    .map(([name, templateTheme]) => (
-      <Button onClick={() => setTemplateTheme(templateTheme)}
-        startIcon={<PaletteSharpIcon />} key={name} sx={{ mr: 1 }}>
-        <Typography>{name}</Typography>
-      </Button>
-    )) || <></>;
+    .map(([key, templateTheme]) => {
+      const name = templateTheme.name || key;
+      let inner = <Typography>{name}</Typography>;
+      let toolTipTitle;
+      if (templateTheme.credit) {
+        toolTipTitle = <Typography>{templateTheme.description || name} <em>by {templateTheme.credit}</em></Typography>;
+      } else if (templateTheme.description) {
+        toolTipTitle = <Typography>{templateTheme.description}</Typography>;
+      }
+      if (toolTipTitle) {
+        inner = <Tooltip title={toolTipTitle}>{inner}</Tooltip>
+      }
+      return (
+        <Button onClick={() => setTemplateTheme(templateTheme.colors)}
+          startIcon={<PaletteSharpIcon />} key={key} sx={{ mr: 1, mb: 1 }}>
+            {inner}
+        </Button>
+      );
+    }) || <></>;
 
   function setTheme(theme: UserInterfaceTheme): void {
     setCustomTheme(theme);