diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index 2fa611a693..78e97bf44e 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -75,6 +75,9 @@ const theme = {
     legend: {
         textStyle: {
             color: contrastColor
+        },
+        pageTextStyle: {
+            color: contrastColor
         }
     },
     textStyle: {
diff --git a/test/legend.html b/test/legend.html
index 74c448a190..e5839d41e5 100644
--- a/test/legend.html
+++ b/test/legend.html
@@ -72,6 +72,8 @@ <h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50% (
         <div id="only-single-item"></div>
         <div id="vary-size"></div>
         <div id="index-to-no-name"></div>
+        <h1>Legend page text color should be light in dark mode</h1>
+        <div class="chart" id="dark-pageTextStyle"></div>
 
         <script>
 
@@ -1099,6 +1101,30 @@ <h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50% (
             })
         </script>
 
+        <script>
+            require([
+                'echarts',
+            ], function (echarts) {
 
+                var seriesInfo = makeSeries(5, 3);
+
+                var option = {
+                    legend: [{
+                        type: 'scroll',
+                        width: 200,
+                        data: seriesInfo.legendData
+                    }],
+                    series: seriesInfo.series,
+                    xAxis: {
+                        data: seriesInfo.xAxisData
+                    },
+                    yAxis: {}
+                };
+                var chart = echarts.init(document.getElementById('dark-pageTextStyle'), 'dark', {
+                    renderer: 'svg'
+                });
+                chart.setOption(option);
+            })
+        </script>
     </body>
-</html>
\ No newline at end of file
+</html>