339 lines
13 KiB
JavaScript
339 lines
13 KiB
JavaScript
// try to reduce these and create variations
|
|
const UmiThemes = [
|
|
{
|
|
id: 'dark',
|
|
name: 'Dark',
|
|
scheme: 'dark',
|
|
colours: {
|
|
'main-accent': 0x8559A5,
|
|
'main-background': 0x050505,
|
|
'main-colour': 0xFFFFFF,
|
|
'scrollbar-foreground': 0x212121,
|
|
'scrollbar-background': 0x111111,
|
|
'chat-background': 0x111111,
|
|
'chat-box-shadow': 0x111111,
|
|
'message-avatar-background': 0,
|
|
'message-separator': 0x222222,
|
|
'message-time-colour': 0x888888,
|
|
'message-compact-alternate-background': 0x212121,
|
|
'message-compact-highlight': 0x3A3A3A,
|
|
'sidebar-background': 0x111111,
|
|
'sidebar-background-current': 0x222222,
|
|
'sidebar-background-highlight': 0x444444,
|
|
'sidebar-background-option': 0,
|
|
'sidebar-box-shadow': 0x111111,
|
|
'sidebar-selector-background-begin': 0x212121,
|
|
'sidebar-selector-background-end': 0x1A1A1A,
|
|
'sidebar-selector-background-hover': 0x222222,
|
|
'sidebar-selector-background-active': 0x111111,
|
|
'sidebar-selector-attention-shadow': 0x96B6D3,
|
|
'input-background': 0x111111,
|
|
'input-box-shadow': 0x111111,
|
|
'input-colour': 0xFFFFFF,
|
|
'input-border': 0x222222,
|
|
'input-send': 0x222222,
|
|
'input-button-hover': 0x2A2A2A,
|
|
'input-button-active': 0x1A1A1A,
|
|
'input-menu-background': 0x222222,
|
|
'input-menu-box-shadow': 0x222222,
|
|
'input-menu-button': 0x333333,
|
|
'input-menu-button-hover': 0x444444,
|
|
'input-menu-button-active': 0x3A3A3A,
|
|
'settings-category-title-begin': 0x222222,
|
|
'settings-category-title-end': 0x111111,
|
|
'settings-input-border': 0x333333,
|
|
'settings-input-background': 0x111111,
|
|
'settings-input-colour': 0xFFFFFF,
|
|
'settings-input-focus': 0x222222,
|
|
'settings-markup-link-colour': 0x1E90FF,
|
|
},
|
|
sizes: {
|
|
'chat-box-shadow-y': 1,
|
|
'chat-box-shadow-blur': 4,
|
|
'sidebar-box-shadow-y': 1,
|
|
'sidebar-box-shadow-blur': 4,
|
|
'sidebar-selector-attention-shadow-blur': 10,
|
|
'input-box-shadow-y': 1,
|
|
'input-box-shadow-blur': 4,
|
|
'input-menu-box-shadow-y': 1,
|
|
'input-menu-box-shadow-blur': 4,
|
|
},
|
|
},
|
|
{
|
|
id: 'light',
|
|
name: 'Light',
|
|
scheme: 'light',
|
|
colours: {
|
|
'main-accent': 0x8559A5,
|
|
'main-background': 0xFFFFFF,
|
|
'main-colour': 0,
|
|
'scrollbar-foreground': 0xDDDDDD,
|
|
'scrollbar-background': 0xEEEEEE,
|
|
'chat-background': 0xEEEEEE,
|
|
'chat-box-shadow': 0xEEEEEE,
|
|
'message-avatar-background': 0xFFFFFF,
|
|
'message-separator': 0xDDDDDD,
|
|
'message-time-colour': 0x777777,
|
|
'message-compact-alternate-background': 0xDEDEDE,
|
|
'message-compact-highlight': 0xD9D9D9,
|
|
'sidebar-background': 0xEEEEEE,
|
|
'sidebar-background-current': 0xDDDDDD,
|
|
'sidebar-background-highlight': 0xBBBBBB,
|
|
'sidebar-background-option': 0xFFFFFF,
|
|
'sidebar-box-shadow': 0xEEEEEE,
|
|
'sidebar-selector-background-begin': 0xDEDEDE,
|
|
'sidebar-selector-background-end': 0xE9E9E9,
|
|
'sidebar-selector-background-hover': 0xDDDDDD,
|
|
'sidebar-selector-background-active': 0xEEEEEE,
|
|
'sidebar-selector-attention-shadow': 0x96B6D3,
|
|
'input-background': 0xEEEEEE,
|
|
'input-box-shadow': 0xEEEEEE,
|
|
'input-colour': 0,
|
|
'input-border': 0xDDDDDD,
|
|
'input-send': 0xDDDDDD,
|
|
'input-button-hover': 0xD9D9D9,
|
|
'input-button-active': 0xE9E9E9,
|
|
'input-menu-background': 0xDDDDDD,
|
|
'input-menu-box-shadow': 0xDDDDDD,
|
|
'input-menu-button': 0xCCCCCC,
|
|
'input-menu-button-hover': 0xBBBBBB,
|
|
'input-menu-button-active': 0xC9C9C9,
|
|
'settings-category-title-begin': 0xDDDDDD,
|
|
'settings-category-title-end': 0xEEEEEE,
|
|
'settings-input-border': 0xCCCCCC,
|
|
'settings-input-background': 0xEEEEEE,
|
|
'settings-input-colour': 0,
|
|
'settings-input-focus': 0xDDDDDD,
|
|
'settings-markup-link-colour': 0x1E90FF,
|
|
},
|
|
sizes: {
|
|
'chat-box-shadow-y': 1,
|
|
'chat-box-shadow-blur': 4,
|
|
'sidebar-box-shadow-y': 1,
|
|
'sidebar-box-shadow-blur': 4,
|
|
'sidebar-selector-attention-shadow-blur': 10,
|
|
'input-box-shadow-y': 1,
|
|
'input-box-shadow-blur': 4,
|
|
'input-menu-box-shadow-y': 1,
|
|
'input-menu-box-shadow-blur': 4,
|
|
},
|
|
},
|
|
{
|
|
id: 'blue',
|
|
name: 'Blue',
|
|
scheme: 'dark',
|
|
colours: {
|
|
'main-accent': 0x0D355D,
|
|
'main-background': 0x001434,
|
|
'main-colour': 0xFFFFFF,
|
|
'scrollbar-foreground': 0x0B325A,
|
|
'scrollbar-background': 0x002545,
|
|
'chat-background': 0x002545,
|
|
'chat-box-shadow': 0x002545,
|
|
'message-avatar-background': 0x001434,
|
|
'message-separator': 0x0D355D,
|
|
'message-time-colour': 0x888888,
|
|
'message-compact-alternate-background': 0x0D355D,
|
|
'message-compact-highlight': 0x003D8E,
|
|
'sidebar-background': 0x002545,
|
|
'sidebar-background-current': 0x002545,
|
|
'sidebar-background-highlight': 0x0D355D,
|
|
'sidebar-background-option': 0,
|
|
'sidebar-box-shadow': 0x002545,
|
|
'sidebar-selector-background-begin': 0x0D355D,
|
|
'sidebar-selector-background-end': 0x002545,
|
|
'sidebar-selector-background-hover': 0x0D355D,
|
|
'sidebar-selector-background-active': 0x002545,
|
|
'sidebar-selector-attention-shadow': 0x96B6D3,
|
|
'input-background': 0x002545,
|
|
'input-box-shadow': 0x002545,
|
|
'input-colour': 0xFFFFFF,
|
|
'input-border': 0x0D355D,
|
|
'input-send': 0x0D355D,
|
|
'input-button-hover': 0x0D355D,
|
|
'input-button-active': 0x002545,
|
|
'input-menu-background': 0x0D355D,
|
|
'input-menu-box-shadow': 0x0D355D,
|
|
'input-menu-button': 0x0E466E,
|
|
'input-menu-button-hover': 0x0F577F,
|
|
'input-menu-button-active': 0x0E507A,
|
|
'settings-category-title-begin': 0x0D355D,
|
|
'settings-category-title-end': 0x002545,
|
|
'settings-input-border': 0x003D8E,
|
|
'settings-input-background': 0x002545,
|
|
'settings-input-colour': 0xFFFFFF,
|
|
'settings-input-focus': 0x0D355D,
|
|
'settings-markup-link-colour': 0x1E90FF,
|
|
},
|
|
sizes: {
|
|
'chat-box-shadow-y': 1,
|
|
'chat-box-shadow-blur': 4,
|
|
'sidebar-box-shadow-y': 1,
|
|
'sidebar-box-shadow-blur': 4,
|
|
'sidebar-selector-attention-shadow-blur': 10,
|
|
'input-box-shadow-y': 1,
|
|
'input-box-shadow-blur': 4,
|
|
'input-menu-box-shadow-y': 1,
|
|
'input-menu-box-shadow-blur': 4,
|
|
},
|
|
},
|
|
{
|
|
id: 'purple',
|
|
name: 'Purple',
|
|
scheme: 'dark',
|
|
colours: {
|
|
'main-accent': 0x59466B,
|
|
'main-background': 0x251D2C,
|
|
'main-colour': 0xFFFFFF,
|
|
'scrollbar-foreground': 0x4A3A59,
|
|
'scrollbar-background': 0x2C2335,
|
|
'chat-background': 0x2C2335,
|
|
'chat-box-shadow': 0x2C2335,
|
|
'message-avatar-background': 0x251D2C,
|
|
'message-separator': 0x4A3A59,
|
|
'message-time-colour': 0x888888,
|
|
'message-compact-alternate-background': 0x4A3A59,
|
|
'message-compact-highlight': 0x604C74,
|
|
'sidebar-background': 0x2C2335,
|
|
'sidebar-background-current': 0x4A3A59,
|
|
'sidebar-background-highlight': 0x604C74,
|
|
'sidebar-background-option': 0,
|
|
'sidebar-box-shadow': 0x2C2335,
|
|
'sidebar-selector-background-begin': 0x4A3A59,
|
|
'sidebar-selector-background-end': 0x3B2F47,
|
|
'sidebar-selector-background-hover': 0x4A3A59,
|
|
'sidebar-selector-background-active': 0x3B2F47,
|
|
'sidebar-selector-attention-shadow': 0xA591AD,
|
|
'input-background': 0x2C2335,
|
|
'input-box-shadow': 0x2C2335,
|
|
'input-colour': 0xFFFFFF,
|
|
'input-border': 0x4A3A59,
|
|
'input-send': 0x4A3A59,
|
|
'input-button-hover': 0x7E6397,
|
|
'input-button-active': 0x59466B,
|
|
'input-menu-background': 0x4A3A59,
|
|
'input-menu-box-shadow': 0x4A3A59,
|
|
'input-menu-button': 0x59466B,
|
|
'input-menu-button-hover': 0x7E6397,
|
|
'input-menu-button-active': 0x604C74,
|
|
'settings-category-title-begin': 0x4A3A59,
|
|
'settings-category-title-end': 0x3B2F47,
|
|
'settings-input-border': 0x604C74,
|
|
'settings-input-background': 0x3B2F47,
|
|
'settings-input-colour': 0xFFFFFF,
|
|
'settings-input-focus': 0x4A3A59,
|
|
'settings-markup-link-colour': 0x1E90FF,
|
|
},
|
|
sizes: {
|
|
'chat-box-shadow-y': 1,
|
|
'chat-box-shadow-blur': 4,
|
|
'sidebar-box-shadow-y': 1,
|
|
'sidebar-box-shadow-blur': 4,
|
|
'sidebar-selector-attention-shadow-blur': 10,
|
|
'input-box-shadow-y': 1,
|
|
'input-box-shadow-blur': 4,
|
|
'input-menu-box-shadow-y': 1,
|
|
'input-menu-box-shadow-blur': 4,
|
|
},
|
|
},
|
|
{
|
|
id: 'archaic',
|
|
name: 'Archaic',
|
|
scheme: 'dark',
|
|
colours: {
|
|
'main-accent': 0x333333,
|
|
'main-background': 0,
|
|
'main-colour': 0xFFFFFF,
|
|
'scrollbar-foreground': 0x212121,
|
|
'scrollbar-background': 0,
|
|
'chat-background': 0,
|
|
'chat-box-shadow': 0x888888,
|
|
'message-avatar-background': 0x111111,
|
|
'message-separator': 0x222222,
|
|
'message-time-colour': 0x888888,
|
|
'message-compact-alternate-background': 0x212121,
|
|
'message-compact-highlight': 0x3A3A3A,
|
|
'sidebar-background': 0,
|
|
'sidebar-background-current': 0x212121,
|
|
'sidebar-background-highlight': 0,
|
|
'sidebar-background-option': 0,
|
|
'sidebar-box-shadow': 0x888888,
|
|
'sidebar-selector-background-begin': 0x212121,
|
|
'sidebar-selector-background-end': 0x212121,
|
|
'sidebar-selector-background-hover': 0x1A1A1A,
|
|
'sidebar-selector-background-active': 0x111111,
|
|
'sidebar-selector-attention-shadow': 0x888888,
|
|
'input-background': 0,
|
|
'input-box-shadow': 0x888888,
|
|
'input-colour': 0xFFFFFF,
|
|
'input-border': 0,
|
|
'input-send': 0x111111,
|
|
'input-button-hover': 0x333333,
|
|
'input-button-active': 0x222222,
|
|
'input-menu-background': 0,
|
|
'input-menu-box-shadow': 0x888888,
|
|
'input-menu-button': 0x111111,
|
|
'input-menu-button-hover': 0x333333,
|
|
'input-menu-button-active': 0x222222,
|
|
'settings-category-title-begin': 0x212121,
|
|
'settings-category-title-end': 0x212121,
|
|
'settings-input-border': 0x888888,
|
|
'settings-input-background': 0,
|
|
'settings-input-colour': 0xFFFFFF,
|
|
'settings-input-focus': 0,
|
|
'settings-markup-link-colour': 0x1E90FF,
|
|
},
|
|
sizes: {
|
|
'chat-box-shadow-spread': 1,
|
|
'sidebar-box-shadow-spread': 1,
|
|
'sidebar-selector-attention-shadow-blur': 10,
|
|
'input-box-shadow-spread': 1,
|
|
'input-menu-box-shadow-spread': 1,
|
|
},
|
|
},
|
|
];
|
|
|
|
const UmiThemeApply = function(theme) {
|
|
const varPfx = '--theme-',
|
|
themeType = typeof theme;
|
|
if(themeType === 'number')
|
|
theme = UmiThemes[theme];
|
|
else if(themeType === 'string')
|
|
for(const t of UmiThemes)
|
|
if(t.id === theme) {
|
|
theme = t;
|
|
break;
|
|
}
|
|
|
|
if(typeof theme !== 'object')
|
|
throw 'Invalid theme.';
|
|
|
|
for(let propName in document.body.style) // this doesn't really work
|
|
if(propName && propName.indexOf(varPfx) === 0)
|
|
document.body.style.removeProperty(propName);
|
|
|
|
if(typeof theme.scheme === 'string')
|
|
document.body.style.setProperty(varPfx + 'scheme', theme.scheme);
|
|
|
|
if(theme.colours) {
|
|
const coloursPfx = varPfx + 'colour-';
|
|
|
|
for(const propName in theme.colours) {
|
|
document.body.style.setProperty(
|
|
coloursPfx + propName,
|
|
'#' + (theme.colours[propName].toString(16).padStart(6, '0'))
|
|
);
|
|
}
|
|
}
|
|
|
|
if(theme.sizes) {
|
|
const sizesPfx = varPfx + 'size-';
|
|
|
|
for(const propName in theme.sizes)
|
|
document.body.style.setProperty(
|
|
sizesPfx + propName,
|
|
theme.sizes[propName].toString() + 'px'
|
|
);
|
|
}
|
|
};
|