@inkline/inkline/css/variables/dark/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

.dark-theme {
  /**
   * Border variables
   */
  --border-top-color: var(--color-gray-700);
  --border-right-color: var(--color-gray-700);
  --border-bottom-color: var(--color-gray-700);
  --border-left-color: var(--color-gray-700);
  --border-color: var(--border-top-color) var(--border-right-color) var(--border-bottom-color) var(--border-left-color);
}

.dark-theme {
  /**
   * Code variables
   */
  --code--color: var(--color-red);
  --code--background: var(--color-gray-900);
  /**
   * Body variables
   */
  --body--background: var(--color-dark-shade-50);
  --body--color: var(--color-gray-100);
}

.dark-theme {
  /**
   * Text color variables
   */
  --text-color-weak-h: var(--color-gray-300-h);
  --text-color-weak-s: var(--color-gray-300-s);
  --text-color-weak-l: var(--color-gray-300-l);
  --text-color-weak-a: var(--color-gray-300-a);
  --text-color-weak: hsla(var(--text-color-weak-h), var(--text-color-weak-s), var(--text-color-weak-l), var(--text-color-weak-a));
  --text-color-weaker-h: var(--color-gray-500-h);
  --text-color-weaker-s: var(--color-gray-500-s);
  --text-color-weaker-l: var(--color-gray-500-l);
  --text-color-weaker-a: var(--color-gray-500-a);
  --text-color-weaker: hsla(var(--text-color-weaker-h), var(--text-color-weaker-s), var(--text-color-weaker-l), var(--text-color-weaker-a));
  --text-color-weakest-h: var(--color-gray-700-h);
  --text-color-weakest-s: var(--color-gray-700-s);
  --text-color-weakest-l: var(--color-gray-700-l);
  --text-color-weakest-a: var(--color-gray-700-a);
  --text-color-weakest: hsla(var(--text-color-weakest-h), var(--text-color-weakest-s), var(--text-color-weakest-l), var(--text-color-weakest-a));
}