@re-flex/styles
Version:
Core Style Util Package
91 lines (90 loc) • 2.6 kB
JavaScript
import defaultTheme from "./Default";
const DarkTheme = {
...defaultTheme,
palette: {
common: { black: "#000", white: "#fff" },
type: "dark",
primary: {
light: "#42FF8C",
main: "#10D35C",
dark: "#28C866",
contrastText: "#fff",
},
secondary: {
main: "#f48fb1",
light: "rgb(246, 165, 192)",
dark: "rgb(170, 100, 123)",
contrastText: "rgba(0, 0, 0, 0.87)",
},
error: {
light: "#e57373",
main: "#D01D10",
dark: "#870F06",
contrastText: "#fff",
},
warning: {
light: "#ffb74d",
main: "#ff9800",
dark: "#f57c00",
contrastText: "rgba(0, 0, 0, 0.87)",
},
info: {
light: "#64b5f6",
main: "#2196f3",
dark: "#1976d2",
contrastText: "#fff",
},
success: {
light: "#81c784",
main: "#4caf50",
dark: "#388e3c",
contrastText: "rgba(0, 0, 0, 0.87)",
},
grey: {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#454545",
"900": "#454545",
A100: "#d5d5d5",
A200: "#aaaaaa",
A400: "#303030",
A700: "#616161",
},
contrastThreshold: 3,
tonalOffset: 0.2,
text: {
primary: "#fff",
secondary: "rgba(255, 255, 255, 0.7)",
disabled: "rgba(255, 255, 255, 0.5)",
hint: "rgba(255, 255, 255, 0.5)",
icon: "rgba(255, 255, 255, 0.5)",
},
divider: "#424242",
background: {
paper: "#242526",
default: "#18191a",
level2: "#333333",
level1: "#212121",
},
action: {
active: "#fff",
hover: "rgba(255, 255, 255, 0.08)",
hoverOpacity: 0.08,
selected: "rgba(255, 255, 255, 0.16)",
selectedOpacity: 0.16,
disabled: "rgba(255, 255, 255, 0.3)",
disabledBackground: "rgba(255, 255, 255, 0.12)",
disabledOpacity: 0.38,
focus: "rgba(255, 255, 255, 0.12)",
focusOpacity: 0.12,
activatedOpacity: 0.24,
},
},
};
export default DarkTheme;