mirror of
https://github.com/DeNNiiInc/dbgate.git
synced 2026-04-21 15:16:01 +00:00
theme
This commit is contained in:
Jan Prochazka
152
packages/web/src/theme/colorUtil.js
Normal file
152
packages/web/src/theme/colorUtil.js
Normal file
@@ -0,0 +1,152 @@
|
||||
// https://css-tricks.com/using-javascript-to-adjust-saturation-and-brightness-of-rgb-colors/
|
||||
|
||||
export function hexToRgb(rgb) {
|
||||
return (rgb = [rgb.substring(1, 3), rgb.substring(3, 5), rgb.substring(5, 7)].map((x) => parseInt(x, 16)));
|
||||
}
|
||||
|
||||
function componentToHex(c) {
|
||||
let num = Math.round(c);
|
||||
if (num < 0) num = 0;
|
||||
if (num > 255) num = 255;
|
||||
var hex = num.toString(16);
|
||||
return hex.length == 1 ? '0' + hex : hex;
|
||||
}
|
||||
|
||||
export function rgbToHex(r, g, b) {
|
||||
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
|
||||
}
|
||||
|
||||
export function getLightnessOfRGB(rgb) {
|
||||
// First convert to an array of integers by removing the whitespace, taking the 3rd char to the 2nd last then splitting by ','
|
||||
const rgbIntArray = hexToRgb(rgb);
|
||||
|
||||
// Get the highest and lowest out of red green and blue
|
||||
const highest = Math.max(...rgbIntArray);
|
||||
const lowest = Math.min(...rgbIntArray);
|
||||
|
||||
// Return the average divided by 255
|
||||
return (highest + lowest) / 2 / 255;
|
||||
}
|
||||
|
||||
export function saturateByTenth(rgb) {
|
||||
const rgbIntArray = hexToRgb(rgb);
|
||||
const grayVal = getLightnessOfRGB(rgb) * 255;
|
||||
const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
|
||||
|
||||
if (lowest.val === highest.val) {
|
||||
return rgb;
|
||||
}
|
||||
|
||||
const saturationRange = Math.round(Math.min(255 - grayVal, grayVal));
|
||||
const maxChange = Math.min(255 - highest.val, lowest.val);
|
||||
const changeAmount = Math.min(saturationRange / 10, maxChange);
|
||||
const middleValueRatio = (grayVal - middle.val) / (grayVal - highest.val);
|
||||
|
||||
const returnArray = [];
|
||||
returnArray[highest.index] = Math.round(highest.val + changeAmount);
|
||||
returnArray[lowest.index] = Math.round(lowest.val - changeAmount);
|
||||
returnArray[middle.index] = Math.round(grayVal + (returnArray[highest.index] - grayVal) * middleValueRatio);
|
||||
return `rgb(${[returnArray].join()})`;
|
||||
}
|
||||
|
||||
function getLowestMiddleHighest(rgbIntArray) {
|
||||
let highest = { val: -1, index: -1 };
|
||||
let lowest = { val: Infinity, index: -1 };
|
||||
|
||||
rgbIntArray.map((val, index) => {
|
||||
if (val > highest.val) {
|
||||
highest = { val: val, index: index };
|
||||
}
|
||||
if (val < lowest.val) {
|
||||
lowest = { val: val, index: index };
|
||||
}
|
||||
});
|
||||
|
||||
if (lowest.index === highest.index) {
|
||||
lowest.index = highest.index + 1;
|
||||
}
|
||||
|
||||
let middle = { index: 3 - highest.index - lowest.index };
|
||||
middle.val = rgbIntArray[middle.index];
|
||||
return [lowest, middle, highest];
|
||||
}
|
||||
|
||||
export function lightenByTenth(rgb, ratio = 0.1) {
|
||||
const rgbIntArray = hexToRgb(rgb);
|
||||
// Grab the values in order of magnitude
|
||||
// This uses the getLowestMiddleHighest function from the saturate section
|
||||
const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
|
||||
|
||||
if (lowest.val === 255) {
|
||||
return rgb;
|
||||
}
|
||||
|
||||
const returnArray = [];
|
||||
|
||||
// First work out increase on lower value
|
||||
returnArray[lowest.index] = Math.round(lowest.val + Math.min(255 - lowest.val, 255 * ratio));
|
||||
|
||||
// Then apply to the middle and higher values
|
||||
const increaseFraction = (returnArray[lowest.index] - lowest.val) / (255 - lowest.val);
|
||||
returnArray[middle.index] = middle.val + (255 - middle.val) * increaseFraction;
|
||||
returnArray[highest.index] = highest.val + (255 - highest.val) * increaseFraction;
|
||||
|
||||
// Convert the array back into an rgb string
|
||||
return rgbToHex(...returnArray);
|
||||
}
|
||||
|
||||
export function darkenByTenth(rgb, ratio = 0.1) {
|
||||
// Our rgb to int array function again
|
||||
const rgbIntArray = hexToRgb(rgb);
|
||||
//grab the values in order of magnitude
|
||||
//this uses the function from the saturate function
|
||||
const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
|
||||
|
||||
if (highest.val === 0) {
|
||||
return rgb;
|
||||
}
|
||||
|
||||
const returnArray = [];
|
||||
|
||||
returnArray[highest.index] = highest.val - Math.min(highest.val, 255 * ratio);
|
||||
const decreaseFraction = (highest.val - returnArray[highest.index]) / highest.val;
|
||||
returnArray[middle.index] = middle.val - middle.val * decreaseFraction;
|
||||
returnArray[lowest.index] = lowest.val - lowest.val * decreaseFraction;
|
||||
|
||||
// Convert the array back into an rgb string
|
||||
return rgbToHex(...returnArray);
|
||||
}
|
||||
|
||||
export function desaturateByTenth(rgb) {
|
||||
const rgbIntArray = hexToRgb(rgb);
|
||||
//grab the values in order of magnitude
|
||||
//this uses the getLowestMiddleHighest function from the saturate section
|
||||
const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
|
||||
const grayVal = getLightnessOfRGB(rgb) * 255;
|
||||
|
||||
if (lowest.val === highest.val) {
|
||||
return rgb;
|
||||
}
|
||||
|
||||
const saturationRange = Math.round(Math.min(255 - grayVal, grayVal));
|
||||
const maxChange = grayVal - lowest.val;
|
||||
const changeAmount = Math.min(saturationRange / 10, maxChange);
|
||||
|
||||
const middleValueRatio = (grayVal - middle.val) / (grayVal - highest.val);
|
||||
|
||||
const returnArray = [];
|
||||
returnArray[highest.index] = Math.round(highest.val - changeAmount);
|
||||
returnArray[lowest.index] = Math.round(lowest.val + changeAmount);
|
||||
returnArray[middle.index] = Math.round(grayVal + (returnArray[highest.index] - grayVal) * middleValueRatio);
|
||||
return rgbToHex(...returnArray);
|
||||
}
|
||||
|
||||
export function accentColor(rgb, index, ratio = 0.1) {
|
||||
const rgbIntArray = hexToRgb(rgb);
|
||||
const returnArray = rgbIntArray.map((v, i) => {
|
||||
if (i == index) return v + 255 * ratio;
|
||||
return v - 128 * ratio;
|
||||
});
|
||||
|
||||
return rgbToHex(...returnArray);
|
||||
}
|
||||
90
packages/web/src/theme/fillTheme.js
Normal file
90
packages/web/src/theme/fillTheme.js
Normal file
@@ -0,0 +1,90 @@
|
||||
import _ from 'lodash';
|
||||
import { accentColor, darkenByTenth, lightenByTenth } from './colorUtil';
|
||||
import { generate, presetPalettes, presetDarkPalettes, presetPrimaryColors } from '@ant-design/colors';
|
||||
|
||||
function fillOne(theme, name, type, add, background, fontName, invFontName, changeLightFunc, fontPalettes) {
|
||||
add[`${name}_font1`] = add[`${fontName}1`];
|
||||
add[`${name}_font2`] = add[`${fontName}2`];
|
||||
add[`${name}_font3`] = add[`${fontName}3`];
|
||||
|
||||
add[`${name}_invfont1`] = add[`${invFontName}1`];
|
||||
add[`${name}_invfont2`] = add[`${invFontName}2`];
|
||||
add[`${name}_invfont3`] = add[`${invFontName}3`];
|
||||
// add[`${name}_fontDisabled`] = add.fontBlack3;
|
||||
|
||||
if (background) {
|
||||
add[`${name}_background1`] = background;
|
||||
add[`${name}_background2`] = changeLightFunc(add[`${name}_background1`]);
|
||||
add[`${name}_background3`] = changeLightFunc(add[`${name}_background2`]);
|
||||
}
|
||||
|
||||
for (const colorName in presetPrimaryColors) {
|
||||
add[`${name}_font_${colorName}`] = fontPalettes[colorName];
|
||||
if (background) {
|
||||
add[`${name}_background_${colorName}`] = generate(presetPrimaryColors[colorName], {
|
||||
theme: type,
|
||||
backgroundColor: background,
|
||||
});
|
||||
|
||||
add[`${name}_selection`] = generate(
|
||||
theme.selectionAntName ? presetPrimaryColors[theme.selectionAntName] : theme.selectionBaseColor,
|
||||
{
|
||||
theme: type,
|
||||
backgroundColor: background,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
add[`${name}_font_hover`] = add[`${name}_font_geekblue`][8];
|
||||
add[`${name}_font_link`] = add[`${name}_font_geekblue`][7];
|
||||
|
||||
if (background) {
|
||||
add[`${name}_background_alt2`] = changeLightFunc(add[`${name}_background1`], 0.05);
|
||||
add[`${name}_background_alt3`] = add[`${name}_background_geekblue`][0];
|
||||
}
|
||||
}
|
||||
|
||||
export default function fillTheme(theme) {
|
||||
const add = {};
|
||||
add.fontWhite1 = theme.fontWhite1 || '#FFFFFF';
|
||||
add.fontWhite2 = theme.fontWhite2 || darkenByTenth(add.fontWhite1, 0.3);
|
||||
add.fontWhite3 = theme.fontWhite3 || darkenByTenth(add.fontWhite2, 0.2);
|
||||
|
||||
add.fontBlack1 = theme.fontBlack1 || '#000000';
|
||||
add.fontBlack2 = theme.fontBlack2 || lightenByTenth(add.fontBlack1, 0.3);
|
||||
add.fontBlack3 = theme.fontBlack3 || lightenByTenth(add.fontBlack2, 0.2);
|
||||
|
||||
for (const key of _.keys(theme)) {
|
||||
const match = key.match(/(.*)_type/);
|
||||
if (!match) continue;
|
||||
const name = match[1];
|
||||
const type = theme[key];
|
||||
if (type != 'light' && type != 'dark') continue;
|
||||
|
||||
const background = theme[`${name}_background`];
|
||||
if (type == 'light') {
|
||||
fillOne(theme, name, type, add, background, 'fontBlack', 'fontWhite', darkenByTenth, presetPalettes);
|
||||
}
|
||||
if (type == 'dark') {
|
||||
fillOne(theme, name, type, add, background, 'fontWhite', 'fontBlack', lightenByTenth, presetDarkPalettes);
|
||||
}
|
||||
// add[`${name}_fontr`] = accentColor(add[`${name}_font1`], 0, 0.6);
|
||||
// add[`${name}_fontg`] = accentColor(add[`${name}_font1`], 1, 0.6);
|
||||
// add[`${name}_fontb`] = accentColor(add[`${name}_font1`], 2, 0.6);
|
||||
|
||||
// if (background) {
|
||||
// add[`${name}_backgroundr`] = accentColor(add[`${name}_background1`], 0);
|
||||
// add[`${name}_backgroundg`] = accentColor(add[`${name}_background1`], 1);
|
||||
// add[`${name}_backgroundb`] = accentColor(add[`${name}_background1`], 2);
|
||||
// }
|
||||
}
|
||||
console.log('COLORS', {
|
||||
...add,
|
||||
...theme,
|
||||
});
|
||||
return {
|
||||
...add,
|
||||
...theme,
|
||||
};
|
||||
}
|
||||
@@ -1,39 +1,79 @@
|
||||
export default {
|
||||
import fillTheme from './fillTheme';
|
||||
|
||||
const theme = {
|
||||
main_type: 'light',
|
||||
selectionAntName: 'blue',
|
||||
// main_background:
|
||||
|
||||
// fontWhite1: '#FFFFFF',
|
||||
// fontWhite2: '#CCCCCC',
|
||||
// fontWhite3: '#AAAAAA',
|
||||
|
||||
// fontBlack1: '#000000',
|
||||
// fontBlack2: '#333333',
|
||||
// fontBlack3: '#666666',
|
||||
|
||||
border: '#ccc',
|
||||
|
||||
mainAreaBackground: '#eee',
|
||||
mainFont: 'black',
|
||||
mainFontGray: 'gray',
|
||||
mainFontActive: 'blue',
|
||||
toolbar_background: '#eeeeee',
|
||||
toolbar_type: 'light',
|
||||
|
||||
leftPanelBackground: '#ccc',
|
||||
content_background: '#eee',
|
||||
content_type: 'light',
|
||||
// mainAreaBackground: '#eee',
|
||||
// mainFont: 'black',
|
||||
// mainFontGray: 'gray',
|
||||
// mainFontActive: 'blue',
|
||||
|
||||
widgetBackground: '#222',
|
||||
widgetIconFontColor: '#eee',
|
||||
widgetBackgroundHover: '#555',
|
||||
widgetBackgroundSelected: '#4CAF50',
|
||||
widgetTitleBackground: 'gray',
|
||||
left_background: '#cccccc',
|
||||
left_type: 'light',
|
||||
|
||||
tabsPanelBackground: '#ddd',
|
||||
tabsPanelBackgroundHover: '#ccc',
|
||||
tabsPanelBackgroundHoverClick: '#aaa',
|
||||
tabsPanelSelectedBackground: '#eee',
|
||||
tabsPanelHoverFont: '#338',
|
||||
// leftPanelBackground: '#ccc',
|
||||
|
||||
widget_type: 'dark',
|
||||
widget_background: '#222222',
|
||||
|
||||
// widgetBackground: '#222',
|
||||
// widgetIconFontColor: '#eee',
|
||||
// widgetBackgroundHover: '#555',
|
||||
// widgetBackgroundSelected: '#4CAF50',
|
||||
// widgetTitleBackground: 'gray',
|
||||
|
||||
title_type: 'dark',
|
||||
title_background: '#888888',
|
||||
|
||||
manager_type: 'light',
|
||||
manager_background: '#ffffff',
|
||||
|
||||
tabs_type: 'light',
|
||||
tabs_background: '#eeeeee',
|
||||
// tabsPanelBackground: '#ddd',
|
||||
// tabsPanelBackgroundHover: '#ccc',
|
||||
// tabsPanelBackgroundHoverClick: '#aaa',
|
||||
// tabsPanelSelectedBackground: '#eee',
|
||||
// tabsPanelHoverFont: '#338',
|
||||
|
||||
statusBarBackground: '#00c',
|
||||
toolBarBackground: '#eee',
|
||||
|
||||
gridHeaderBackground: '#f6f7f9',
|
||||
gridRowCountLabel: 'lightgoldenrodyellow',
|
||||
gridSelectionBackground: 'deepskyblue',
|
||||
gridSelectionFont: 'white',
|
||||
gridModifiedRowBackground: '#FFFFDB',
|
||||
gridModifiedCellBackground: 'bisque',
|
||||
gridInsertedRowBackground: '#DBFFDB',
|
||||
gridDeletedRowBackground: '#FFDBFF',
|
||||
gridFocusedColumnBackground: 'lightgoldenrodyellow',
|
||||
gridRowBackground: '#ffffff',
|
||||
gridRowBackground2: '#ebebeb',
|
||||
gridRowBackground3: '#ebf5ff',
|
||||
gridAutoFillBackground: '#1a73e8',
|
||||
gridheader_background: '#f6f7f9',
|
||||
gridheader_type: 'light',
|
||||
|
||||
gridbody_type: 'light',
|
||||
gridbody_background: '#ffffff',
|
||||
// TRADITIONAL ALTERNATIVES:
|
||||
// gridbody_background_alt2: '#ebebeb',
|
||||
// gridbody_background_alt3: '#ebf5ff',
|
||||
|
||||
// gridHeaderBackground: '#f6f7f9',
|
||||
// gridRowCountLabel: 'lightgoldenrodyellow',
|
||||
// gridSelectionBackground: 'deepskyblue',
|
||||
// gridSelectionFont: 'white',
|
||||
// gridModifiedRowBackground: '#FFFFDB',
|
||||
// gridModifiedCellBackground: 'bisque',
|
||||
// gridInsertedRowBackground: '#DBFFDB',
|
||||
// gridDeletedRowBackground: '#FFDBFF',
|
||||
// gridFocusedColumnBackground: 'lightgoldenrodyellow',
|
||||
// gridAutoFillBackground: '#1a73e8',
|
||||
};
|
||||
|
||||
export default fillTheme(theme);
|
||||
|
||||
Reference in New Issue
Block a user