/* 定义浅色主题（默认）的变量 */
:root {
  --background: #f5f5f5;
  --text: #363636;
  --primary: #00d1b2;
  --link: #3273dc;
  /* 你可以根据 Bulma 的颜色方案继续扩展变量 */
}

/* 定义深色主题的变量，通过 .dark-mode 类来应用 */
.dark-mode {
  --background: #121212;
  --text: #f5f5f5;
  --primary: #00d1b2; /* 可以保持品牌色不变，或调整为更适合深色的色调 */
  --link: #8bb9fe;
}

/* 将这些变量应用到页面的关键元素上 */
body {
  background-color: var(--background);
  color: var(--text);
  transition: background-color 2s ease, color 2s ease; /* 平滑过渡 */
}

/* 覆盖 Bulma 的一些组件颜色，示例：按钮和卡片 */
.button.is-primary {
  background-color: var(--primary);
}
.card {
  background-color: var(--background);
  color: var(--text);
}