github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/charts/Chart/themes/dark.ts (about)

     1  const darkTheme = (colors) => ({
     2    color: colors,
     3    backgroundColor: "#181717",
     4    textStyle: {},
     5    title: {
     6      textStyle: {
     7        color: "#eeeeee",
     8      },
     9      subtextStyle: {
    10        color: "#aaaaaa",
    11      },
    12    },
    13    line: {
    14      itemStyle: {
    15        borderWidth: 1,
    16      },
    17      lineStyle: {
    18        width: 2,
    19      },
    20      symbolSize: 4,
    21      symbol: "circle",
    22      smooth: false,
    23    },
    24    radar: {
    25      itemStyle: {
    26        borderWidth: 1,
    27      },
    28      lineStyle: {
    29        width: 2,
    30      },
    31      symbolSize: 4,
    32      symbol: "circle",
    33      smooth: false,
    34    },
    35    bar: {
    36      itemStyle: {
    37        barBorderWidth: 0,
    38        barBorderColor: "#ccc",
    39      },
    40    },
    41    pie: {
    42      itemStyle: {
    43        borderWidth: 0,
    44        borderColor: "#ccc",
    45      },
    46    },
    47    scatter: {
    48      itemStyle: {
    49        borderWidth: 0,
    50        borderColor: "#ccc",
    51      },
    52    },
    53    boxplot: {
    54      itemStyle: {
    55        borderWidth: 0,
    56        borderColor: "#ccc",
    57      },
    58    },
    59    parallel: {
    60      itemStyle: {
    61        borderWidth: 0,
    62        borderColor: "#ccc",
    63      },
    64    },
    65    sankey: {
    66      itemStyle: {
    67        borderWidth: 0,
    68        borderColor: "#ccc",
    69      },
    70    },
    71    funnel: {
    72      itemStyle: {
    73        borderWidth: 0,
    74        borderColor: "#ccc",
    75      },
    76    },
    77    gauge: {
    78      itemStyle: {
    79        borderWidth: 0,
    80        borderColor: "#ccc",
    81      },
    82    },
    83    candlestick: {
    84      itemStyle: {
    85        color: "#fd1050",
    86        color0: "#0cf49b",
    87        borderColor: "#fd1050",
    88        borderColor0: "#0cf49b",
    89        borderWidth: 1,
    90      },
    91    },
    92    graph: {
    93      itemStyle: {
    94        borderWidth: 0,
    95        borderColor: "#ccc",
    96      },
    97      lineStyle: {
    98        width: 1,
    99        color: "#aaaaaa",
   100      },
   101      symbolSize: 4,
   102      symbol: "circle",
   103      smooth: false,
   104      color: [
   105        "#dd6b66",
   106        "#759aa0",
   107        "#e69d87",
   108        "#8dc1a9",
   109        "#ea7e53",
   110        "#eedd78",
   111        "#73a373",
   112        "#73b9bc",
   113        "#7289ab",
   114        "#91ca8c",
   115        "#f49f42",
   116      ],
   117      label: {
   118        color: "#eeeeee",
   119      },
   120    },
   121    map: {
   122      itemStyle: {
   123        normal: {
   124          areaColor: "#eee",
   125          borderColor: "#444",
   126          borderWidth: 0.5,
   127        },
   128        emphasis: {
   129          areaColor: "rgba(255,215,0,0.8)",
   130          borderColor: "#444",
   131          borderWidth: 1,
   132        },
   133      },
   134      label: {
   135        normal: {
   136          textStyle: {
   137            color: "#000",
   138          },
   139        },
   140        emphasis: {
   141          textStyle: {
   142            color: "rgb(100,0,0)",
   143          },
   144        },
   145      },
   146    },
   147    geo: {
   148      itemStyle: {
   149        normal: {
   150          areaColor: "#eee",
   151          borderColor: "#444",
   152          borderWidth: 0.5,
   153        },
   154        emphasis: {
   155          areaColor: "rgba(255,215,0,0.8)",
   156          borderColor: "#444",
   157          borderWidth: 1,
   158        },
   159      },
   160      label: {
   161        normal: {
   162          textStyle: {
   163            color: "#000",
   164          },
   165        },
   166        emphasis: {
   167          textStyle: {
   168            color: "rgb(100,0,0)",
   169          },
   170        },
   171      },
   172    },
   173    categoryAxis: {
   174      axisLine: {
   175        show: true,
   176        lineStyle: {
   177          color: "#eeeeee",
   178        },
   179      },
   180      axisTick: {
   181        show: true,
   182        lineStyle: {
   183          color: "#eeeeee",
   184        },
   185      },
   186      axisLabel: {
   187        show: true,
   188        textStyle: {
   189          color: "#eeeeee",
   190        },
   191      },
   192      splitLine: {
   193        show: true,
   194        lineStyle: {
   195          color: ["#aaaaaa"],
   196        },
   197      },
   198      splitArea: {
   199        show: false,
   200        areaStyle: {
   201          color: ["#eeeeee"],
   202        },
   203      },
   204    },
   205    valueAxis: {
   206      axisLine: {
   207        show: true,
   208        lineStyle: {
   209          color: "#eeeeee",
   210        },
   211      },
   212      axisTick: {
   213        show: true,
   214        lineStyle: {
   215          color: "#eeeeee",
   216        },
   217      },
   218      axisLabel: {
   219        show: true,
   220        textStyle: {
   221          color: "#eeeeee",
   222        },
   223      },
   224      splitLine: {
   225        show: true,
   226        lineStyle: {
   227          color: ["#aaaaaa"],
   228        },
   229      },
   230      splitArea: {
   231        show: false,
   232        areaStyle: {
   233          color: ["#eeeeee"],
   234        },
   235      },
   236    },
   237    logAxis: {
   238      axisLine: {
   239        show: true,
   240        lineStyle: {
   241          color: "#eeeeee",
   242        },
   243      },
   244      axisTick: {
   245        show: true,
   246        lineStyle: {
   247          color: "#eeeeee",
   248        },
   249      },
   250      axisLabel: {
   251        show: true,
   252        textStyle: {
   253          color: "#eeeeee",
   254        },
   255      },
   256      splitLine: {
   257        show: true,
   258        lineStyle: {
   259          color: ["#aaaaaa"],
   260        },
   261      },
   262      splitArea: {
   263        show: false,
   264        areaStyle: {
   265          color: ["#eeeeee"],
   266        },
   267      },
   268    },
   269    timeAxis: {
   270      axisLine: {
   271        show: true,
   272        lineStyle: {
   273          color: "#eeeeee",
   274        },
   275      },
   276      axisTick: {
   277        show: true,
   278        lineStyle: {
   279          color: "#eeeeee",
   280        },
   281      },
   282      axisLabel: {
   283        show: true,
   284        textStyle: {
   285          color: "#eeeeee",
   286        },
   287      },
   288      splitLine: {
   289        show: true,
   290        lineStyle: {
   291          color: ["#aaaaaa"],
   292        },
   293      },
   294      splitArea: {
   295        show: false,
   296        areaStyle: {
   297          color: ["#eeeeee"],
   298        },
   299      },
   300    },
   301    toolbox: {
   302      iconStyle: {
   303        normal: {
   304          borderColor: "#999999",
   305        },
   306        emphasis: {
   307          borderColor: "#666666",
   308        },
   309      },
   310    },
   311    legend: {
   312      textStyle: {
   313        color: "#eeeeee",
   314      },
   315    },
   316    tooltip: {
   317      axisPointer: {
   318        lineStyle: {
   319          color: "#eeeeee",
   320          width: "1",
   321        },
   322        crossStyle: {
   323          color: "#eeeeee",
   324          width: "1",
   325        },
   326      },
   327    },
   328    timeline: {
   329      lineStyle: {
   330        color: "#eeeeee",
   331        width: 1,
   332      },
   333      itemStyle: {
   334        normal: {
   335          color: "#dd6b66",
   336          borderWidth: 1,
   337        },
   338        emphasis: {
   339          color: "#a9334c",
   340        },
   341      },
   342      controlStyle: {
   343        normal: {
   344          color: "#eeeeee",
   345          borderColor: "#eeeeee",
   346          borderWidth: 0.5,
   347        },
   348        emphasis: {
   349          color: "#eeeeee",
   350          borderColor: "#eeeeee",
   351          borderWidth: 0.5,
   352        },
   353      },
   354      checkpointStyle: {
   355        color: "#e43c59",
   356        borderColor: "#c23531",
   357      },
   358      label: {
   359        normal: {
   360          textStyle: {
   361            color: "#eeeeee",
   362          },
   363        },
   364        emphasis: {
   365          textStyle: {
   366            color: "#eeeeee",
   367          },
   368        },
   369      },
   370    },
   371    visualMap: {
   372      color: ["#bf444c", "#d88273", "#f6efa6"],
   373    },
   374    dataZoom: {
   375      backgroundColor: "rgba(47,69,84,0)",
   376      dataBackgroundColor: "rgba(255,255,255,0.3)",
   377      fillerColor: "rgba(167,183,204,0.4)",
   378      handleColor: "#a7b7cc",
   379      handleSize: "100%",
   380      textStyle: {
   381        color: "#eeeeee",
   382      },
   383    },
   384    markPoint: {
   385      label: {
   386        color: "#eeeeee",
   387      },
   388      emphasis: {
   389        label: {
   390          color: "#eeeeee",
   391        },
   392      },
   393    },
   394  });
   395  
   396  export default darkTheme;