From a9e2e35446129a0a868b076f1e9479ac429b32f7 Mon Sep 17 00:00:00 2001 From: Martin Fournier Date: Wed, 19 Jan 2022 07:02:58 -0500 Subject: [PATCH] Move theme related things into its own subfolder This will make contributions easier and less prone to conflicts. --- src/NetscriptFunctions/UserInterface.ts | 4 +- src/Settings/Settings.ts | 2 +- src/Settings/Themes.ts | 613 ------------------ src/Themes/README.md | 17 + src/Themes/Themes.ts | 55 ++ src/Themes/data/dark-blue/index.ts | 42 ++ src/Themes/data/dark-plus/index.ts | 43 ++ src/Themes/data/default-lite/index.ts | 43 ++ src/Themes/data/default/index.ts | 39 ++ src/Themes/data/discord-like/index.ts | 43 ++ src/Themes/data/dracula/index.ts | 42 ++ src/Themes/data/index.ts | 14 + src/Themes/data/light/index.ts | 42 ++ src/Themes/data/mayukai-dark/index.ts | 43 ++ src/Themes/data/monokai-ish/index.ts | 41 ++ src/Themes/data/muted-gold-blue/index.ts | 42 ++ src/Themes/data/one-dark/index.ts | 42 ++ src/Themes/data/purple/index.ts | 43 ++ src/Themes/data/smooth-green/index.ts | 43 ++ src/Themes/data/warmer/index.ts | 42 ++ src/{ui/React => Themes/ui}/Theme.tsx | 0 .../React => Themes/ui}/ThemeEditorModal.tsx | 4 +- src/engine.tsx | 2 +- src/index.tsx | 2 +- src/ui/React/GameOptionsRoot.tsx | 2 +- src/ui/React/StyleEditorModal.tsx | 2 +- 26 files changed, 685 insertions(+), 622 deletions(-) delete mode 100644 src/Settings/Themes.ts create mode 100644 src/Themes/README.md create mode 100644 src/Themes/Themes.ts create mode 100644 src/Themes/data/dark-blue/index.ts create mode 100644 src/Themes/data/dark-plus/index.ts create mode 100644 src/Themes/data/default-lite/index.ts create mode 100644 src/Themes/data/default/index.ts create mode 100644 src/Themes/data/discord-like/index.ts create mode 100644 src/Themes/data/dracula/index.ts create mode 100644 src/Themes/data/index.ts create mode 100644 src/Themes/data/light/index.ts create mode 100644 src/Themes/data/mayukai-dark/index.ts create mode 100644 src/Themes/data/monokai-ish/index.ts create mode 100644 src/Themes/data/muted-gold-blue/index.ts create mode 100644 src/Themes/data/one-dark/index.ts create mode 100644 src/Themes/data/purple/index.ts create mode 100644 src/Themes/data/smooth-green/index.ts create mode 100644 src/Themes/data/warmer/index.ts rename src/{ui/React => Themes/ui}/Theme.tsx (100%) rename src/{ui/React => Themes/ui}/ThemeEditorModal.tsx (99%) diff --git a/src/NetscriptFunctions/UserInterface.ts b/src/NetscriptFunctions/UserInterface.ts index 55827c334..ead063a9f 100644 --- a/src/NetscriptFunctions/UserInterface.ts +++ b/src/NetscriptFunctions/UserInterface.ts @@ -4,8 +4,8 @@ import { IPlayer } from "../PersonObjects/IPlayer"; import { getRamCost } from "../Netscript/RamCostGenerator"; import { GameInfo, IStyleSettings, UserInterface as IUserInterface, UserInterfaceTheme } from "../ScriptEditor/NetscriptDefinitions"; import { Settings } from "../Settings/Settings"; -import { ThemeEvents } from "../ui/React/Theme"; -import { defaultTheme } from "../Settings/Themes"; +import { ThemeEvents } from "../Themes/ui/Theme"; +import { defaultTheme } from "../Themes/Themes"; import { defaultStyles } from "../Settings/Styles"; import { CONSTANTS } from "../Constants"; import { hash } from "../hash/hash"; diff --git a/src/Settings/Settings.ts b/src/Settings/Settings.ts index ddb18d8c1..d0563f604 100644 --- a/src/Settings/Settings.ts +++ b/src/Settings/Settings.ts @@ -1,6 +1,6 @@ import { ISelfInitializer, ISelfLoading } from "../types"; import { OwnedAugmentationsOrderSetting, PurchaseAugmentationsOrderSetting } from "./SettingEnums"; -import { defaultTheme, ITheme } from "./Themes"; +import { defaultTheme, ITheme } from "../Themes/Themes"; import { defaultStyles } from "./Styles"; import { WordWrapOptions } from "../ScriptEditor/ui/Options"; import { OverviewSettings } from "../ui/React/Overview"; diff --git a/src/Settings/Themes.ts b/src/Settings/Themes.ts deleted file mode 100644 index eed026a57..000000000 --- a/src/Settings/Themes.ts +++ /dev/null @@ -1,613 +0,0 @@ -import { IMap } from "../types"; - -export interface ITheme { - [key: string]: string | undefined; - primarylight: string; - primary: string; - primarydark: string; - successlight: string; - success: string; - successdark: string; - errorlight: string; - error: string; - errordark: string; - secondarylight: string; - secondary: string; - secondarydark: string; - warninglight: string; - warning: string; - warningdark: string; - infolight: string; - info: string; - infodark: string; - welllight: string; - well: string; - white: string; - black: string; - hp: string; - money: string; - hack: string; - combat: string; - cha: string; - int: string; - rep: string; - disabled: string; - backgroundprimary: string; - backgroundsecondary: string; - button: string; -} - -export interface IPredefinedTheme { - colors: ITheme; - name?: string; - credit?: string; - description?: string; - reference?: string; -} - -export const defaultTheme: ITheme = { - primarylight: "#0f0", - primary: "#0c0", - primarydark: "#090", - successlight: "#0f0", - success: "#0c0", - successdark: "#090", - 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", -}; - -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", - }, - }, - - 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", - }, - }, - - "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", - }, - }, - - "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", - }, - }, - - Discord: { - credit: "Thermite", - description: "Discord inspired theme", - reference: "https://discord.com/channels/415207508303544321/921991895230611466/924305252017143818", - colors: { - primarylight: "#7389DC", - primary: "#7389DC", - primarydark: "#5964F1", - successlight: "#00CC00", - success: "#20DF20", - successdark: "#0CB80C", - errorlight: "#EA5558", - error: "#EC4145", - errordark: "#E82528", - secondarylight: "#C3C3C3", - secondary: "#9C9C9C", - secondarydark: "#4E4E4E", - warninglight: "#ff0", - warning: "#cc0", - warningdark: "#990", - infolight: "#69f", - info: "#36c", - infodark: "#1C4FB3", - welllight: "#999999", - well: "#35383C", - white: "#FFFFFF", - black: "#202225", - hp: "#FF5656", - money: "#43FF43", - hack: "#FFAB3D", - combat: "#8A90FD", - cha: "#FF51D9", - int: "#6495ed", - rep: "#FFFF30", - disabled: "#474B51", - backgroundprimary: "#2F3136", - backgroundsecondary: "#35393E", - button: "#333", - }, - }, - - "One Dark": { - credit: "Dexalt142", - reference: "https://discord.com/channels/415207508303544321/921991895230611466/924650660694208512", - colors: { - primarylight: "#98C379", - primary: "#98C379", - primarydark: "#98C379", - successlight: "#98C379", - success: "#98C379", - successdark: "#98C379", - errorlight: "#E06C75", - error: "#BE5046", - errordark: "#BE5046", - secondarylight: "#AAA", - secondary: "#888", - secondarydark: "#666", - warninglight: "#E5C07B", - warning: "#E5C07B", - warningdark: "#D19A66", - infolight: "#61AFEF", - info: "#61AFEF", - infodark: "#61AFEF", - welllight: "#4B5263", - well: "#282C34", - white: "#ABB2BF", - black: "#282C34", - hp: "#E06C75", - money: "#E5C07B", - hack: "#98C379", - combat: "#ABB2BF", - cha: "#C678DD", - int: "#61AFEF", - rep: "#ABB2BF", - disabled: "#56B6C2", - backgroundprimary: "#282C34", - backgroundsecondary: "#21252B", - button: "#4B5263", - }, - }, - - "Muted Gold & Blue": { - credit: "Sloth", - reference: "https://discord.com/channels/415207508303544321/921991895230611466/924672660758208563", - colors: { - primarylight: "#E3B54A", - primary: "#CAA243", - primarydark: "#7E6937", - successlight: "#82FF82", - success: "#6FDA6F", - successdark: "#64C364", - errorlight: "#FD5555", - error: "#D84A4A", - errordark: "#AC3939", - secondarylight: "#D8D0B8", - secondary: "#B1AA95", - secondarydark: "#736E5E", - warninglight: "#ff0", - warning: "#cc0", - warningdark: "#990", - infolight: "#69f", - info: "#36c", - infodark: "#039", - welllight: "#444", - well: "#111111", - white: "#fff", - black: "#070300", - hp: "#dd3434", - money: "#ffd700", - hack: "#adff2f", - combat: "#faffdf", - cha: "#a671d1", - int: "#6495ed", - rep: "#faffdf", - disabled: "#66cfbc", - backgroundprimary: "#0A0A0E", - backgroundsecondary: "#0E0E10", - button: "#222222", - }, - }, - - "Default Lite": { - credit: "NmuGmu", - description: "Less eye-straining default theme", - reference: "https://discord.com/channels/415207508303544321/921991895230611466/925263801564151888", - colors: { - primarylight: "#28CF28", - primary: "#21A821", - primarydark: "#177317", - successlight: "#1CFF1C", - success: "#16CA16", - successdark: "#0D910D", - errorlight: "#FF3B3B", - error: "#C32D2D", - errordark: "#8E2121", - secondarylight: "#B3B3B3", - secondary: "#838383", - secondarydark: "#676767", - warninglight: "#FFFF3A", - warning: "#C3C32A", - warningdark: "#8C8C1E", - infolight: "#64CBFF", - info: "#3399CC", - infodark: "#246D91", - welllight: "#404040", - well: "#1C1C1C", - white: "#C3C3C3", - black: "#0A0B0B", - hp: "#C62E2E", - money: "#D6BB27", - hack: "#ADFF2F", - combat: "#E8EDCD", - cha: "#8B5FAF", - int: "#537CC8", - rep: "#E8EDCD", - disabled: "#5AB5A5", - backgroundprimary: "#0C0D0E", - backgroundsecondary: "#121415", - button: "#252829", - }, - }, - - Light: { - credit: "matt", - reference: "https://discord.com/channels/415207508303544321/921991895230611466/926114005456658432", - colors: { - primarylight: "#535353", - primary: "#1A1A1A", - primarydark: "#0d0d0d", - successlight: "#63c439", - success: "#428226", - successdark: "#2E5A1B", - errorlight: "#df7051", - error: "#C94824", - errordark: "#91341B", - secondarylight: "#b3b3b3", - secondary: "#9B9B9B", - secondarydark: "#7A7979", - warninglight: "#e8d464", - warning: "#C6AD20", - warningdark: "#9F8A16", - infolight: "#6299cf", - info: "#3778B7", - infodark: "#30689C", - welllight: "#f9f9f9", - well: "#eaeaea", - white: "#F7F7F7", - black: "#F7F7F7", - hp: "#BF5C41", - money: "#E1B121", - hack: "#47BC38", - combat: "#656262", - cha: "#A568AC", - int: "#889BCF", - rep: "#656262", - disabled: "#70B4BF", - backgroundprimary: "#F7F7F7", - backgroundsecondary: "#f9f9f9", - button: "#eaeaea", - }, - }, -}); diff --git a/src/Themes/README.md b/src/Themes/README.md new file mode 100644 index 000000000..0638cf74b --- /dev/null +++ b/src/Themes/README.md @@ -0,0 +1,17 @@ +# Themes + +Feel free to contribute a new theme by submitting a pull request to the game! + +See [CONTRIBUTING.md](/CONTRIBUTING.md) for details. + +## How create a new theme + +1. Duplicate one of the folders in `/src/Themes/data` and give it a new name (keep the hyphenated format) +2. Modify the data in the new `/src/Themes/data/new-folder/index.ts` file +3. Add the import/export into the `/src/Themes/data/index.ts` file + +The themes are ordered according to the export order in `index.ts` + +## Other resources + +There is an external script called `theme-browser` which may include more themes than those shown here. Head over the [bitpacker](https://github.com/davidsiems/bitpacker) repository for details. diff --git a/src/Themes/Themes.ts b/src/Themes/Themes.ts new file mode 100644 index 000000000..63de312bf --- /dev/null +++ b/src/Themes/Themes.ts @@ -0,0 +1,55 @@ +import { IMap } from "../types"; +import * as predefined from "./data"; + +export interface ITheme { + [key: string]: string | undefined; + primarylight: string; + primary: string; + primarydark: string; + successlight: string; + success: string; + successdark: string; + errorlight: string; + error: string; + errordark: string; + secondarylight: string; + secondary: string; + secondarydark: string; + warninglight: string; + warning: string; + warningdark: string; + infolight: string; + info: string; + infodark: string; + welllight: string; + well: string; + white: string; + black: string; + hp: string; + money: string; + hack: string; + combat: string; + cha: string; + int: string; + rep: string; + disabled: string; + backgroundprimary: string; + backgroundsecondary: string; + button: string; +} + +export interface IPredefinedTheme { + colors: ITheme; + name?: string; + credit?: string; + description?: string; + reference?: string; +} + +export const defaultTheme: ITheme = { + ...predefined.Default.colors, +}; + +export const getPredefinedThemes = (): IMap => ({ + ...predefined, +}); diff --git a/src/Themes/data/dark-blue/index.ts b/src/Themes/data/dark-blue/index.ts new file mode 100644 index 000000000..3c509d00b --- /dev/null +++ b/src/Themes/data/dark-blue/index.ts @@ -0,0 +1,42 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "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/Themes/data/dark-plus/index.ts b/src/Themes/data/dark-plus/index.ts new file mode 100644 index 000000000..7288f40ca --- /dev/null +++ b/src/Themes/data/dark-plus/index.ts @@ -0,0 +1,43 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "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", + }, +}; diff --git a/src/Themes/data/default-lite/index.ts b/src/Themes/data/default-lite/index.ts new file mode 100644 index 000000000..71e299db5 --- /dev/null +++ b/src/Themes/data/default-lite/index.ts @@ -0,0 +1,43 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "Default-lite", + description: "Less eye-straining default theme", + credit: "NmuGmu", + reference: "https://discord.com/channels/415207508303544321/921991895230611466/925263801564151888", + colors: { + primarylight: "#28CF28", + primary: "#21A821", + primarydark: "#177317", + successlight: "#1CFF1C", + success: "#16CA16", + successdark: "#0D910D", + errorlight: "#FF3B3B", + error: "#C32D2D", + errordark: "#8E2121", + secondarylight: "#B3B3B3", + secondary: "#838383", + secondarydark: "#676767", + warninglight: "#FFFF3A", + warning: "#C3C32A", + warningdark: "#8C8C1E", + infolight: "#64CBFF", + info: "#3399CC", + infodark: "#246D91", + welllight: "#404040", + well: "#1C1C1C", + white: "#C3C3C3", + black: "#0A0B0B", + hp: "#C62E2E", + money: "#D6BB27", + hack: "#ADFF2F", + combat: "#E8EDCD", + cha: "#8B5FAF", + int: "#537CC8", + rep: "#E8EDCD", + disabled: "#5AB5A5", + backgroundprimary: "#0C0D0E", + backgroundsecondary: "#121415", + button: "#252829", + }, +}; diff --git a/src/Themes/data/default/index.ts b/src/Themes/data/default/index.ts new file mode 100644 index 000000000..b5cd04722 --- /dev/null +++ b/src/Themes/data/default/index.ts @@ -0,0 +1,39 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + colors: { + primarylight: "#0f0", + primary: "#0c0", + primarydark: "#090", + successlight: "#0f0", + success: "#0c0", + successdark: "#090", + 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", + }, +}; diff --git a/src/Themes/data/discord-like/index.ts b/src/Themes/data/discord-like/index.ts new file mode 100644 index 000000000..91e65aee7 --- /dev/null +++ b/src/Themes/data/discord-like/index.ts @@ -0,0 +1,43 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "Discord-like", + description: "Discord inspired theme", + credit: "Thermite", + reference: "https://discord.com/channels/415207508303544321/921991895230611466/924305252017143818", + colors: { + primarylight: "#7389DC", + primary: "#7389DC", + primarydark: "#5964F1", + successlight: "#00CC00", + success: "#20DF20", + successdark: "#0CB80C", + errorlight: "#EA5558", + error: "#EC4145", + errordark: "#E82528", + secondarylight: "#C3C3C3", + secondary: "#9C9C9C", + secondarydark: "#4E4E4E", + warninglight: "#ff0", + warning: "#cc0", + warningdark: "#990", + infolight: "#69f", + info: "#36c", + infodark: "#1C4FB3", + welllight: "#999999", + well: "#35383C", + white: "#FFFFFF", + black: "#202225", + hp: "#FF5656", + money: "#43FF43", + hack: "#FFAB3D", + combat: "#8A90FD", + cha: "#FF51D9", + int: "#6495ed", + rep: "#FFFF30", + disabled: "#474B51", + backgroundprimary: "#2F3136", + backgroundsecondary: "#35393E", + button: "#333", + }, +}; diff --git a/src/Themes/data/dracula/index.ts b/src/Themes/data/dracula/index.ts new file mode 100644 index 000000000..31eec5273 --- /dev/null +++ b/src/Themes/data/dracula/index.ts @@ -0,0 +1,42 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "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", + }, +}; diff --git a/src/Themes/data/index.ts b/src/Themes/data/index.ts new file mode 100644 index 000000000..cef542782 --- /dev/null +++ b/src/Themes/data/index.ts @@ -0,0 +1,14 @@ +export { Theme as Default } from "./default"; +export { Theme as DefaultLite } from "./default-lite"; +export { Theme as Monokai } from "./monokai-ish"; +export { Theme as Warmer } from "./warmer"; +export { Theme as DarkPlus } from "./dark-plus"; +export { Theme as MayukaiDark } from "./mayukai-dark"; +export { Theme as Purple } from "./purple"; +export { Theme as SmoothGreen } from "./smooth-green"; +export { Theme as Dracula } from "./dracula"; +export { Theme as DarkBlue } from "./dark-blue"; +export { Theme as DiscordLike } from "./discord-like"; +export { Theme as OneDark } from "./one-dark"; +export { Theme as MutedGoldBlue } from "./muted-gold-blue"; +export { Theme as Light } from "./light"; diff --git a/src/Themes/data/light/index.ts b/src/Themes/data/light/index.ts new file mode 100644 index 000000000..fc8b4b0b0 --- /dev/null +++ b/src/Themes/data/light/index.ts @@ -0,0 +1,42 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "Light", + credit: "matt", + reference: "https://discord.com/channels/415207508303544321/921991895230611466/926114005456658432", + colors: { + primarylight: "#535353", + primary: "#1A1A1A", + primarydark: "#0d0d0d", + successlight: "#63c439", + success: "#428226", + successdark: "#2E5A1B", + errorlight: "#df7051", + error: "#C94824", + errordark: "#91341B", + secondarylight: "#b3b3b3", + secondary: "#9B9B9B", + secondarydark: "#7A7979", + warninglight: "#e8d464", + warning: "#C6AD20", + warningdark: "#9F8A16", + infolight: "#6299cf", + info: "#3778B7", + infodark: "#30689C", + welllight: "#f9f9f9", + well: "#eaeaea", + white: "#F7F7F7", + black: "#F7F7F7", + hp: "#BF5C41", + money: "#E1B121", + hack: "#47BC38", + combat: "#656262", + cha: "#A568AC", + int: "#889BCF", + rep: "#656262", + disabled: "#70B4BF", + backgroundprimary: "#F7F7F7", + backgroundsecondary: "#f9f9f9", + button: "#eaeaea", + }, +}; diff --git a/src/Themes/data/mayukai-dark/index.ts b/src/Themes/data/mayukai-dark/index.ts new file mode 100644 index 000000000..95b9ea491 --- /dev/null +++ b/src/Themes/data/mayukai-dark/index.ts @@ -0,0 +1,43 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "Mayukai Dark", + description: "Mayukai Dark-esque", + credit: "Festive Noire", + 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", + }, +}; diff --git a/src/Themes/data/monokai-ish/index.ts b/src/Themes/data/monokai-ish/index.ts new file mode 100644 index 000000000..f947ecf7b --- /dev/null +++ b/src/Themes/data/monokai-ish/index.ts @@ -0,0 +1,41 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "Monokai'ish", + 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", + }, +}; diff --git a/src/Themes/data/muted-gold-blue/index.ts b/src/Themes/data/muted-gold-blue/index.ts new file mode 100644 index 000000000..7683de8e3 --- /dev/null +++ b/src/Themes/data/muted-gold-blue/index.ts @@ -0,0 +1,42 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "Muted Gold & Blue", + credit: "Sloth", + reference: "https://discord.com/channels/415207508303544321/921991895230611466/924672660758208563", + colors: { + primarylight: "#E3B54A", + primary: "#CAA243", + primarydark: "#7E6937", + successlight: "#82FF82", + success: "#6FDA6F", + successdark: "#64C364", + errorlight: "#FD5555", + error: "#D84A4A", + errordark: "#AC3939", + secondarylight: "#D8D0B8", + secondary: "#B1AA95", + secondarydark: "#736E5E", + warninglight: "#ff0", + warning: "#cc0", + warningdark: "#990", + infolight: "#69f", + info: "#36c", + infodark: "#039", + welllight: "#444", + well: "#111111", + white: "#fff", + black: "#070300", + hp: "#dd3434", + money: "#ffd700", + hack: "#adff2f", + combat: "#faffdf", + cha: "#a671d1", + int: "#6495ed", + rep: "#faffdf", + disabled: "#66cfbc", + backgroundprimary: "#0A0A0E", + backgroundsecondary: "#0E0E10", + button: "#222222", + }, +}; diff --git a/src/Themes/data/one-dark/index.ts b/src/Themes/data/one-dark/index.ts new file mode 100644 index 000000000..d4862e377 --- /dev/null +++ b/src/Themes/data/one-dark/index.ts @@ -0,0 +1,42 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "One Dark", + credit: "Dexalt142", + reference: "https://discord.com/channels/415207508303544321/921991895230611466/924650660694208512", + colors: { + primarylight: "#98C379", + primary: "#98C379", + primarydark: "#98C379", + successlight: "#98C379", + success: "#98C379", + successdark: "#98C379", + errorlight: "#E06C75", + error: "#BE5046", + errordark: "#BE5046", + secondarylight: "#AAA", + secondary: "#888", + secondarydark: "#666", + warninglight: "#E5C07B", + warning: "#E5C07B", + warningdark: "#D19A66", + infolight: "#61AFEF", + info: "#61AFEF", + infodark: "#61AFEF", + welllight: "#4B5263", + well: "#282C34", + white: "#ABB2BF", + black: "#282C34", + hp: "#E06C75", + money: "#E5C07B", + hack: "#98C379", + combat: "#ABB2BF", + cha: "#C678DD", + int: "#61AFEF", + rep: "#ABB2BF", + disabled: "#56B6C2", + backgroundprimary: "#282C34", + backgroundsecondary: "#21252B", + button: "#4B5263", + }, +}; diff --git a/src/Themes/data/purple/index.ts b/src/Themes/data/purple/index.ts new file mode 100644 index 000000000..5baeaa381 --- /dev/null +++ b/src/Themes/data/purple/index.ts @@ -0,0 +1,43 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "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", + }, +}; diff --git a/src/Themes/data/smooth-green/index.ts b/src/Themes/data/smooth-green/index.ts new file mode 100644 index 000000000..dbd69077c --- /dev/null +++ b/src/Themes/data/smooth-green/index.ts @@ -0,0 +1,43 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + name: "Smooth Green", + description: "A nice green theme that doesn't hurt your eyes.", + credit: "Swidt", + 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", + }, +}; diff --git a/src/Themes/data/warmer/index.ts b/src/Themes/data/warmer/index.ts new file mode 100644 index 000000000..f2a2f894a --- /dev/null +++ b/src/Themes/data/warmer/index.ts @@ -0,0 +1,42 @@ +import { IPredefinedTheme } from "../../Themes"; + +export const Theme: IPredefinedTheme = { + 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", + }, +}; diff --git a/src/ui/React/Theme.tsx b/src/Themes/ui/Theme.tsx similarity index 100% rename from src/ui/React/Theme.tsx rename to src/Themes/ui/Theme.tsx diff --git a/src/ui/React/ThemeEditorModal.tsx b/src/Themes/ui/ThemeEditorModal.tsx similarity index 99% rename from src/ui/React/ThemeEditorModal.tsx rename to src/Themes/ui/ThemeEditorModal.tsx index 299471e4e..da16628c3 100644 --- a/src/ui/React/ThemeEditorModal.tsx +++ b/src/Themes/ui/ThemeEditorModal.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Modal } from "./Modal"; +import { Modal } from "../../ui/React/Modal"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; import Tooltip from "@mui/material/Tooltip"; @@ -11,7 +11,7 @@ import PaletteSharpIcon from "@mui/icons-material/PaletteSharp"; import { Color, ColorPicker } from "material-ui-color"; import { ThemeEvents } from "./Theme"; import { Settings, defaultSettings } from "../../Settings/Settings"; -import { getPredefinedThemes } from "../../Settings/Themes"; +import { getPredefinedThemes } from "../Themes"; import { UserInterfaceTheme } from "../../ScriptEditor/NetscriptDefinitions"; interface IProps { diff --git a/src/engine.tsx b/src/engine.tsx index f660beb39..e3f67223f 100644 --- a/src/engine.tsx +++ b/src/engine.tsx @@ -30,7 +30,7 @@ import { Player } from "./Player"; import { saveObject, loadGame } from "./SaveObject"; import { initForeignServers } from "./Server/AllServers"; import { Settings } from "./Settings/Settings"; -import { ThemeEvents } from "./ui/React/Theme"; +import { ThemeEvents } from "./Themes/ui/Theme"; import { updateSourceFileFlags } from "./SourceFile/SourceFileFlags"; import { initSymbolToStockMap, processStockPrices } from "./StockMarket/StockMarket"; import { Terminal } from "./Terminal"; diff --git a/src/index.tsx b/src/index.tsx index 962bfc469..1c15adcde 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; -import { TTheme as Theme, ThemeEvents, refreshTheme } from "./ui/React/Theme"; +import { TTheme as Theme, ThemeEvents, refreshTheme } from "./Themes/ui/Theme"; import { LoadingScreen } from "./ui/LoadingScreen"; import { initElectron } from "./Electron"; initElectron(); diff --git a/src/ui/React/GameOptionsRoot.tsx b/src/ui/React/GameOptionsRoot.tsx index e1ce714a6..acc1835bb 100644 --- a/src/ui/React/GameOptionsRoot.tsx +++ b/src/ui/React/GameOptionsRoot.tsx @@ -26,7 +26,7 @@ import SaveIcon from "@mui/icons-material/Save"; import { FileDiagnosticModal } from "../../Diagnostic/FileDiagnosticModal"; import { dialogBoxCreate } from "./DialogBox"; import { ConfirmationModal } from "./ConfirmationModal"; -import { ThemeEditorModal } from "./ThemeEditorModal"; +import { ThemeEditorModal } from "../../Themes/ui/ThemeEditorModal"; import { StyleEditorModal } from "./StyleEditorModal"; import { SnackbarEvents } from "./Snackbar"; diff --git a/src/ui/React/StyleEditorModal.tsx b/src/ui/React/StyleEditorModal.tsx index 94b9950c6..b8213f199 100644 --- a/src/ui/React/StyleEditorModal.tsx +++ b/src/ui/React/StyleEditorModal.tsx @@ -9,7 +9,7 @@ import TextField from "@mui/material/TextField"; import ReplyIcon from "@mui/icons-material/Reply"; import SaveIcon from "@mui/icons-material/Save"; -import { ThemeEvents } from "./Theme"; +import { ThemeEvents } from "../../Themes/ui/Theme"; import { Settings } from "../../Settings/Settings"; import { defaultStyles } from "../../Settings/Styles"; import { Tooltip } from "@mui/material";