-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Tooltip } from 'recharts';
export default function Chart({ chartData }: { chartData: { name: string, count: number }[] }) {
return (
<ResponsiveContainer width="100%" height={150}>
<BarChart data={chartData}>
- <CartesianGrid strokeDasharray="3 3" />
- <XAxis dataKey="name" />
- <YAxis width="auto"/>
+ <XAxis
+ dataKey="name"
+ tick={{ fill: "light-dark(#000000, #e6e2d6)" }}
+ />
+ <YAxis
+ width="auto"
+ tick={{ fill: "light-dark(#000000, #e6e2d6)" }}
+ />
<Tooltip
- contentStyle={{ color: "light-dark(#000000, #000000)" }}
- itemStyle={{ color: "light-dark(#000000, #000000)" }}
- labelStyle={{ color: "light-dark(#000000, #000000)" }}
- wrapperStyle={{ color: "light-dark(#000000, #000000)" }}
+ contentStyle={{ backgroundColor: "light-dark(#000000, #e6e2d6)" }}
+ itemStyle={{ color: "light-dark(#e6e2d6, #000000)" }}
+ labelStyle={{ color: "light-dark(#e6e2d6, #000000)" }}
/>
- <Bar dataKey="count" fill="light-dark(#000000, #ffffff)" />
+ <Bar dataKey="count" fill="light-dark(#000000, #e6e2d6)" />
</BarChart>
</ResponsiveContainer>
)
<style>
details.spoiler {
- color: light-dark(#ffffff, #000000);
- background-color: light-dark(#000000, #ffffff);
+ color: light-dark(#e6e2d6, #000000);
+ background-color: light-dark(#000000, #e6e2d6);
margin-bottom: 1rem;
padding: 0.5rem;
&[open] {
}
html {
- background-color: light-dark(#ffffff, #000000);
- color: light-dark(#000000, #ffffff);
+ background-color: light-dark(#e6e2d6, #000000);
+ color: light-dark(#000000, #e6e2d6);
font-family: "Source Serif 4 Variable", serif;
font-kerning: normal;
font-weight: 400;
}
a {
text-decoration: none;
- color: light-dark(#086ddd, #398ae3);
+ color: light-dark(#8b2942, #d4637a);
}
a:hover {
text-decoration: underline;
border-collapse: collapse;
}
th, td {
- border: 0.1rem solid light-dark(#000000, #2F3336);
+ border: 0.1rem solid light-dark(#000000, #e6e2d6);
text-align: center;
vertical-align: middle;
padding: 0.5rem;
}
.footnotes {
font-size: 0.9rem;
- border-top: 1px dashed light-dark(#000000, #ffffff);
+ border-top: 1px dashed light-dark(#000000, #e6e2d6);
margin-top: 1rem;
padding-top: 1rem;
}