mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2026-04-26 19:14:32 +02:00
Add easily switchable predefined themes
Includes the default theme and a Monokai-ish variant
This commit is contained in:
Martin Fournier
+259
-238
@@ -7,9 +7,11 @@ import Paper from "@mui/material/Paper";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import ReplyIcon from "@mui/icons-material/Reply";
|
||||
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 { ITheme, getPredefinedThemes } from "../../Settings/Themes";
|
||||
|
||||
interface IProps {
|
||||
open: boolean;
|
||||
@@ -64,11 +66,18 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
|
||||
...Settings.theme,
|
||||
});
|
||||
|
||||
function resetTheme(): void {
|
||||
setCustomTheme({
|
||||
...defaultSettings.theme,
|
||||
});
|
||||
Object.assign(Settings.theme, defaultSettings.theme);
|
||||
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>
|
||||
)) || <></>;
|
||||
|
||||
function setTheme(theme: ITheme): void {
|
||||
setCustomTheme(theme);
|
||||
Object.assign(Settings.theme, theme);
|
||||
ThemeEvents.emit();
|
||||
}
|
||||
|
||||
@@ -96,250 +105,262 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
|
||||
ThemeEvents.emit();
|
||||
}
|
||||
|
||||
function setTemplateTheme(theme: ITheme): void {
|
||||
setTheme(theme);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={props.open} onClose={props.onClose}>
|
||||
<Paper>
|
||||
<Tooltip open={true} placement={"top"} title={<Typography>Example tooltip</Typography>}>
|
||||
<Button color="primary">primary button</Button>
|
||||
</Tooltip>
|
||||
<Button color="secondary">secondary button</Button>
|
||||
<Button color="warning">warning button</Button>
|
||||
<Button color="info">info button</Button>
|
||||
<Button color="error">error button</Button>
|
||||
<Button disabled>disabled button</Button>
|
||||
<Typography color="primary">text with primary color</Typography>
|
||||
<Typography color="secondary">text with secondary color</Typography>
|
||||
<Typography color="error">text with error color</Typography>
|
||||
<TextField value={"Text field"} />
|
||||
<Paper sx={{ px: 1, py: 1, my: 1 }}>
|
||||
<Tooltip open={true} placement={"top"} title={<Typography>Example tooltip</Typography>}>
|
||||
<Button color="primary" size="small">primary button</Button>
|
||||
</Tooltip>
|
||||
<Button color="secondary" size="small">secondary button</Button>
|
||||
<Button color="warning" size="small">warning button</Button>
|
||||
<Button color="info" size="small">info button</Button>
|
||||
<Button color="error" size="small">error button</Button>
|
||||
<Button disabled size="small">disabled button</Button>
|
||||
|
||||
<br />
|
||||
<Typography color="primary" variant="caption">text with primary color</Typography>
|
||||
<Typography color="secondary" variant="caption">text with secondary color</Typography>
|
||||
<Typography color="error" variant="caption">text with error color</Typography>
|
||||
|
||||
<br />
|
||||
<TextField value={"Text field"} size="small" />
|
||||
</Paper>
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="primarylight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primarylight"]}
|
||||
defaultColor={defaultSettings.theme["primarylight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="primary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primary"]}
|
||||
defaultColor={defaultSettings.theme["primary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="primarydark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primarydark"]}
|
||||
defaultColor={defaultSettings.theme["primarydark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<Paper sx={{ py: 1, my: 1 }}>
|
||||
<ColorEditor
|
||||
name="primarylight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primarylight"]}
|
||||
defaultColor={defaultSettings.theme["primarylight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="primary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primary"]}
|
||||
defaultColor={defaultSettings.theme["primary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="primarydark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["primarydark"]}
|
||||
defaultColor={defaultSettings.theme["primarydark"]}
|
||||
/>
|
||||
|
||||
<ColorEditor
|
||||
name="successlight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["successlight"]}
|
||||
defaultColor={defaultSettings.theme["successlight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="success"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["success"]}
|
||||
defaultColor={defaultSettings.theme["success"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="successdark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["successdark"]}
|
||||
defaultColor={defaultSettings.theme["successdark"]}
|
||||
/>
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="successlight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["successlight"]}
|
||||
defaultColor={defaultSettings.theme["successlight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="success"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["success"]}
|
||||
defaultColor={defaultSettings.theme["success"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="successdark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["successdark"]}
|
||||
defaultColor={defaultSettings.theme["successdark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="errorlight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["errorlight"]}
|
||||
defaultColor={defaultSettings.theme["errorlight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="error"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["error"]}
|
||||
defaultColor={defaultSettings.theme["error"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="errordark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["errordark"]}
|
||||
defaultColor={defaultSettings.theme["errordark"]}
|
||||
/>
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="errorlight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["errorlight"]}
|
||||
defaultColor={defaultSettings.theme["errorlight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="error"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["error"]}
|
||||
defaultColor={defaultSettings.theme["error"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="errordark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["errordark"]}
|
||||
defaultColor={defaultSettings.theme["errordark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="secondarylight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondarylight"]}
|
||||
defaultColor={defaultSettings.theme["secondarylight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="secondary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondary"]}
|
||||
defaultColor={defaultSettings.theme["secondary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="secondarydark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondarydark"]}
|
||||
defaultColor={defaultSettings.theme["secondarydark"]}
|
||||
/>
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="secondarylight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondarylight"]}
|
||||
defaultColor={defaultSettings.theme["secondarylight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="secondary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondary"]}
|
||||
defaultColor={defaultSettings.theme["secondary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="secondarydark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["secondarydark"]}
|
||||
defaultColor={defaultSettings.theme["secondarydark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="warninglight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warninglight"]}
|
||||
defaultColor={defaultSettings.theme["warninglight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="warning"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warning"]}
|
||||
defaultColor={defaultSettings.theme["warning"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="warningdark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warningdark"]}
|
||||
defaultColor={defaultSettings.theme["warningdark"]}
|
||||
/>
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="warninglight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warninglight"]}
|
||||
defaultColor={defaultSettings.theme["warninglight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="warning"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warning"]}
|
||||
defaultColor={defaultSettings.theme["warning"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="warningdark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["warningdark"]}
|
||||
defaultColor={defaultSettings.theme["warningdark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="infolight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["infolight"]}
|
||||
defaultColor={defaultSettings.theme["infolight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="info"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["info"]}
|
||||
defaultColor={defaultSettings.theme["info"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="infodark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["infodark"]}
|
||||
defaultColor={defaultSettings.theme["infodark"]}
|
||||
/>
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="infolight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["infolight"]}
|
||||
defaultColor={defaultSettings.theme["infolight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="info"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["info"]}
|
||||
defaultColor={defaultSettings.theme["info"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="infodark"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["infodark"]}
|
||||
defaultColor={defaultSettings.theme["infodark"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="welllight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["welllight"]}
|
||||
defaultColor={defaultSettings.theme["welllight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="well"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["well"]}
|
||||
defaultColor={defaultSettings.theme["well"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="white"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["white"]}
|
||||
defaultColor={defaultSettings.theme["white"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="black"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["black"]}
|
||||
defaultColor={defaultSettings.theme["black"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="backgroundprimary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["backgroundprimary"]}
|
||||
defaultColor={defaultSettings.theme["backgroundprimary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="backgroundsecondary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["backgroundsecondary"]}
|
||||
defaultColor={defaultSettings.theme["backgroundsecondary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="button"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["button"]}
|
||||
defaultColor={defaultSettings.theme["button"]}
|
||||
/>
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="welllight"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["welllight"]}
|
||||
defaultColor={defaultSettings.theme["welllight"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="well"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["well"]}
|
||||
defaultColor={defaultSettings.theme["well"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="white"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["white"]}
|
||||
defaultColor={defaultSettings.theme["white"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="black"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["black"]}
|
||||
defaultColor={defaultSettings.theme["black"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="backgroundprimary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["backgroundprimary"]}
|
||||
defaultColor={defaultSettings.theme["backgroundprimary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="backgroundsecondary"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["backgroundsecondary"]}
|
||||
defaultColor={defaultSettings.theme["backgroundsecondary"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="button"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["button"]}
|
||||
defaultColor={defaultSettings.theme["button"]}
|
||||
/>
|
||||
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="hp"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["hp"]}
|
||||
defaultColor={defaultSettings.theme["hp"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="money"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["money"]}
|
||||
defaultColor={defaultSettings.theme["money"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="hack"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["hack"]}
|
||||
defaultColor={defaultSettings.theme["hack"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="combat"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["combat"]}
|
||||
defaultColor={defaultSettings.theme["combat"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="cha"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["cha"]}
|
||||
defaultColor={defaultSettings.theme["cha"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="int"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["int"]}
|
||||
defaultColor={defaultSettings.theme["int"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="rep"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["rep"]}
|
||||
defaultColor={defaultSettings.theme["rep"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="disabled"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["disabled"]}
|
||||
defaultColor={defaultSettings.theme["disabled"]}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<TextField
|
||||
label={"import / export theme"}
|
||||
value={JSON.stringify(customTheme)}
|
||||
onChange={onThemeChange}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<IconButton onClick={resetTheme} size="large">
|
||||
<ReplyIcon />
|
||||
</IconButton>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
<ColorEditor
|
||||
name="hp"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["hp"]}
|
||||
defaultColor={defaultSettings.theme["hp"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="money"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["money"]}
|
||||
defaultColor={defaultSettings.theme["money"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="hack"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["hack"]}
|
||||
defaultColor={defaultSettings.theme["hack"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="combat"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["combat"]}
|
||||
defaultColor={defaultSettings.theme["combat"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="cha"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["cha"]}
|
||||
defaultColor={defaultSettings.theme["cha"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="int"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["int"]}
|
||||
defaultColor={defaultSettings.theme["int"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="rep"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["rep"]}
|
||||
defaultColor={defaultSettings.theme["rep"]}
|
||||
/>
|
||||
<ColorEditor
|
||||
name="disabled"
|
||||
onColorChange={onColorChange}
|
||||
color={customTheme["disabled"]}
|
||||
defaultColor={defaultSettings.theme["disabled"]}
|
||||
/>
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ px: 1, py: 1, my: 1 }}>
|
||||
<TextField
|
||||
sx={{ mb: 1 }}
|
||||
multiline
|
||||
fullWidth
|
||||
maxRows={3}
|
||||
label={"import / export theme"}
|
||||
value={JSON.stringify(customTheme)}
|
||||
onChange={onThemeChange}
|
||||
/>
|
||||
<>
|
||||
<Typography sx={{ my: 1 }}>Copy the string above if you want to backup or share your theme with others.</Typography>
|
||||
<Typography sx={{ my: 1 }}>Use the buttons below to replace the current theme with a pre-built template</Typography>
|
||||
{themes}
|
||||
</>
|
||||
</Paper>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user