کـــیمــیا

- TailwindCSS (https://tailwindcss.com)
- Alpine.js (https://alpinejs.dev)
- @alpinejs/persist (https://alpinejs.dev/plugins/persist)

:root {
    --background-color: hsl(0 0% 100%);
    --foreground-color: hsl(20 14.3% 4.1%);

    --primary-color: hsl(0, 97%, 54%);
    --primary-foreground-color: hsl(0 0% 100%);
    --accent-color: hsl(186.13deg 100% 34.57%);
    --accent-foreground-color: hsl(210 40% 98%);

    --secondary-color: hsl(60 4.8% 95.9%);
    --secondary-foreground-color: hsl(24 9.8% 10%);

    --muted-color: hsl(60 4.8% 95.9%);
    --muted-foreground-color: hsl(25 5.3% 44.7%);

    --info-color: hsl(195.82 100% 50%);
    --info-foreground-color: hsl(0 0% 100%);
    --success-color: hsl(223.81 0% 45%);
    --success-foreground-color: hsl(210 40% 98%);
    --warning-color: hsl(44.37 100% 47%);
    --warning-foreground-color: hsl(217.28 36% 18%);
    --destructive-color: hsl(0, 86%, 40%);
    --destructive-foreground-color: hsl(210 40% 98%);

    --border-color: hsl(20 5.9% 90%);
    --input-color: hsl(0, 0%, 95%);
    --ring-color: hsl(20 5.9% 80%);
}

.dark {
    --background-color: hsl(20 14.3% 4.1%);
    --foreground-color: hsl(60 9.1% 97.8%);

    --primary-color: hsl(0, 97%, 54%);
    --primary-foreground-color: hsl(0 0% 100%);
    --accent-color: hsl(186.13deg 100% 34.57%);
    --accent-foreground-color: hsl(210 40% 98%);

    --secondary-color: hsl(12 6.5% 15.1%);
    --secondary-foreground-color: hsl(60 9.1% 97.8%);

    --muted-color: hsl(12, 9%, 11%);
    --muted-foreground-color: hsl(24 5.4% 63.9%);

    --info-color: hsl(202.59 100% 33%);
    --info-foreground-color: hsl(0 0% 100%);
    --success-color: hsl(164.5deg 100% 21.21%);
    --success-foreground-color: hsl(210 40% 98%);
    --warning-color: hsl(44.37 100% 47%);
    --warning-foreground-color: hsl(228.82 85% 5%);
    --destructive-color: hsl(0 63% 31%);
    --destructive-foreground-color: hsl(210 40% 98%);

    --border-color: hsl(12 6.5% 15.1%);
    --input-color: hsl(12, 4%, 22%);
    --ring-color: hsl(12, 5%, 18%);
}

@import "tailwindcss";

@import "./theme/colors.css";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --text-2xs: 0.65rem;

  --color-background: var(--background-color);
  --color-foreground: var(--foreground-color);
  --color-primary: var(--primary-color);
  --color-primary-foreground: var(--primary-foreground-color);
  --color-accent: var(--accent-color);
  --color-accent-foreground: var(--accent-foreground-color);
  --color-secondary: var(--secondary-color);
  --color-secondary-foreground: var(--secondary-foreground-color);
  --color-muted: var(--muted-color);
  --color-muted-foreground: var(--muted-foreground-color);
  --color-info: var(--info-color);
  --color-info-foreground: var(--info-foreground-color);
  --color-success: var(--success-color);
  --color-success-foreground: var(--success-foreground-color);
  --color-warning: var(--warning-color);
  --color-warning-foreground: var(--warning-foreground-color);
  --color-destructive: var(--destructive-color);
  --color-destructive-foreground: var(--destructive-foreground-color);
  --color-border: var(--border-color);
  --color-input: var(--input-color);
  --color-ring: var(--ring-color);
}

@layer base {
  * {
    @apply border-border ring-ring;
  }

  /* total width */
  *::-webkit-scrollbar {
    @apply bg-background w-4;
  }

  /* background of the scrollbar except button or resizer */
  *::-webkit-scrollbar-track {
    @apply bg-background;
  }

  /* scrollbar itself */
  *::-webkit-scrollbar-thumb {
    @apply bg-secondary border-solid border-4 border-background rounded-2xl;
  }

  /* set button(top and bottom of the scrollbar) */
  *::-webkit-scrollbar-button {
    @apply hidden;
  }

  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-background text-foreground;
  }

  [x-cloak] {
    @apply !hidden;
  }
}

import Alpine from "alpinejs";
import persist from "@alpinejs/persist";

Alpine.plugin(persist);

document.addEventListener("alpine:init", () => {
    Alpine.store("darkMode", {
        on: Alpine.$persist(false).as("is_dark"),

        toggle() {
            this.on = !this.on;
        },
    });
});

window.Alpine = Alpine;

Alpine.start();