Code Monkey home page Code Monkey logo

astrocolors's Introduction

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

astrocolors's People

Contributors

rayyannafees avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.