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 => ({ + 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]) => ( - - )) || <>; + .map(([key, templateTheme]) => { + const name = templateTheme.name || key; + let inner = {name}; + let toolTipTitle; + if (templateTheme.credit) { + toolTipTitle = {templateTheme.description || name} by {templateTheme.credit}; + } else if (templateTheme.description) { + toolTipTitle = {templateTheme.description}; + } + if (toolTipTitle) { + inner = {inner} + } + return ( + + ); + }) || <>; function setTheme(theme: UserInterfaceTheme): void { setCustomTheme(theme);