Astro Colors

Realtime Colors site but much cleaner implementation in Astro + Solid + UnoCSS

REST API

baseURL: https://astrocolors.vercel.app

Endpoints:

GET /api => Returns the randomly generated color values with realtimecolors algorithm

GET /colorset => Returns the predefined set of beautiful colors in realtimecolors

Returned variables:

• text - text color
• bg - backrgound colors
• primary - primary color
• secondary - secondary colot
• accent - accent color

Endpoint Suffices

.css

Suffix .css to get the color values as css variables as in _/api.css or _/colorset.css

For example:

@import url('https://astrocolors.vercel.app/api.css');

Will return the css with variables:

:root {
    --rc-text:     #..., /*The hex colorcode for text*/
    --rc-bg:       #...; /*The hex colorcode for background*/
    --rc-primary:  #...; /*The primary color hexcode*/
    --rc-secondary:#...; /*The secondary color hexcode*/
    --rc-accent:   #...; /*The accent color hexcode*/
  }

.txt

Suffix .txt to get the variable as dash-separated text as in _/api.txt or _/colorset.txt

'text-bg-primary-secondary-accent'

Website Stack

• Starlight for the docs
• UnoCSS for Icons & Styling css
• Dexie for storing user themes in IndexedDB (Browser's Database)
• SolidJS for updating frotnend UI in a much cleaner and efficient way
• nanostores for managing state between different parts of the website
• Astro for providing the backend service for rendering & the REST API

Feature stack

• qrcode
• FileSaver
• zip