You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/10/12 08:14:44 UTC
[incubator-echarts] branch next updated: fix(theme): fix dark theme
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/next by this push:
new a7b4243 fix(theme): fix dark theme
a7b4243 is described below
commit a7b4243edb3be9d8688b0dc39d628ca65aa6777e
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Oct 12 16:14:20 2020 +0800
fix(theme): fix dark theme
---
src/theme/dark.ts | 14 ++---
theme/dark.js | 171 ++++++++++++++++++++++++++++++++++--------------------
2 files changed, 113 insertions(+), 72 deletions(-)
diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index 073e70d..04fb851 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -90,9 +90,7 @@ const theme = {
},
toolbox: {
iconStyle: {
- normal: {
- borderColor: contrastColor
- }
+ borderColor: contrastColor
}
},
dataZoom: {
@@ -193,12 +191,10 @@ const theme = {
},
candlestick: {
itemStyle: {
- normal: {
- color: '#FD1050',
- color0: '#0CF49B',
- borderColor: '#FD1050',
- borderColor0: '#0CF49B'
- }
+ color: '#FD1050',
+ color0: '#0CF49B',
+ borderColor: '#FD1050',
+ borderColor0: '#0CF49B'
}
}
};
diff --git a/theme/dark.js b/theme/dark.js
index 768a201..708e3a3 100644
--- a/theme/dark.js
+++ b/theme/dark.js
@@ -41,65 +41,59 @@
log('ECharts is not Loaded');
return;
}
- var contrastColor = '#eee';
- var axisCommon = function() {
+ var contrastColor = '#B9B8CE';
+ var backgroundColor = '#100C2A';
+ var axisCommon = function () {
return {
axisLine: {
lineStyle: {
color: contrastColor
}
},
- axisTick: {
- lineStyle: {
- color: contrastColor
- }
- },
- axisLabel: {
- textStyle: {
- color: contrastColor
- }
- },
splitLine: {
lineStyle: {
- type: 'dashed',
- color: '#aaa'
+ color: '#484753'
}
},
splitArea: {
areaStyle: {
- color: contrastColor
+ color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)']
+ }
+ },
+ minorSplitLine: {
+ lineStyle: {
+ color: '#20203B'
}
}
};
};
var colorPalette = [
- '#dd6b66',
- '#759aa0',
- '#e69d87',
- '#8dc1a9',
- '#ea7e53',
- '#eedd78',
- '#73a373',
- '#73b9bc',
- '#7289ab',
- '#91ca8c',
- '#f49f42'
+ '#4992ff',
+ '#7cffb2',
+ '#fddd60',
+ '#ff6e76',
+ '#58d9f9',
+ '#05c091',
+ '#ff8a45',
+ '#8d48e3',
+ '#dd79ff'
];
var theme = {
+ darkMode: true,
+
color: colorPalette,
- backgroundColor: '#333',
- tooltip: {
- axisPointer: {
- lineStyle: {
- color: contrastColor
- },
- crossStyle: {
- color: contrastColor
- },
- label: {
- color: '#000'
- }
+ backgroundColor: backgroundColor,
+ axisPointer: {
+ lineStyle: {
+ color: '#817f91'
+ },
+ crossStyle: {
+ color: '#817f91'
+ },
+ label: {
+ // TODO Contrast of label backgorundColor
+ color: '#fff'
}
},
legend: {
@@ -107,42 +101,100 @@
color: contrastColor
}
},
+ textStyle: {
+ color: contrastColor
+ },
title: {
textStyle: {
- color: contrastColor
+ color: '#EEF1FA'
+ },
+ subtextStyle: {
+ color: '#B9B8CE'
}
},
toolbox: {
iconStyle: {
- normal: {
- borderColor: contrastColor
- }
+ borderColor: contrastColor
}
},
-
- // Area scaling controller
dataZoom: {
- dataBackgroundColor: '#eee', // Data background color
- fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
- handleColor: '#dd6b66' // Handle color
+ borderColor: '#71708A',
+ textStyle: {
+ color: contrastColor
+ },
+ brushStyle: {
+ color: 'rgba(135,163,206,0.3)'
+ },
+ handleStyle: {
+ color: '#353450',
+ borderColor: '#C5CBE3'
+ },
+ moveHandleStyle: {
+ color: '#B0B6C3',
+ opacity: 0.3
+ },
+ fillerColor: 'rgba(135,163,206,0.2)',
+ emphasis: {
+ handleStyle: {
+ borderColor: '#91B7F2',
+ color: '#4D587D'
+ },
+ moveHandleStyle: {
+ color: '#636D9A',
+ opacity: 0.7
+ }
+ },
+ dataBackground: {
+ lineStyle: {
+ color: '#71708A',
+ width: 1
+ },
+ areaStyle: {
+ color: '#71708A'
+ }
+ },
+ selectedDataBackground: {
+ lineStyle: {
+ color: '#87A3CE'
+ },
+ areaStyle: {
+ color: '#87A3CE'
+ }
+ }
+ },
+ visualMap: {
+ textStyle: {
+ color: contrastColor
+ }
},
-
timeline: {
- itemStyle: {
- color: colorPalette[1]
- },
lineStyle: {
color: contrastColor
},
+ label: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
controlStyle: {
color: contrastColor,
borderColor: contrastColor
+ }
+ },
+ calendar: {
+ itemStyle: {
+ color: backgroundColor
},
- label: {
+ dayLabel: {
+ color: contrastColor
+ },
+ monthLabel: {
+ color: contrastColor
+ },
+ yearLabel: {
color: contrastColor
}
},
-
timeAxis: axisCommon(),
logAxis: axisCommon(),
valueAxis: axisCommon(),
@@ -154,20 +206,13 @@
graph: {
color: colorPalette
},
-
gauge: {
- axisLine: {
- lineStyle: {
- color: [
- [0.2, '#dd6b66'],
- [0.8, '#759aa0'],
- [1, '#ea7e53']
- ],
- width: 8
+ title: {
+ textStyle: {
+ color: contrastColor
}
}
},
-
candlestick: {
itemStyle: {
color: '#FD1050',
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org