Skip to content

tonyfromundefined/placeholder.fromundefined.com

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌈 Placeholder

by fromundefined.com

Default icon generator using the Open Color palette and Pretendard

  • Extract the color by hashing the given string.
  • Inserts the initials of the given string into the icon.
  • Supports dark mode
  • Supports Hangul (Korean Character)
  • Caching with Cloudflare CDN (Cloudflare Workers + Cache API)

How to use

Basic

Enter the string needed to express the icon as a path parameter.

https://placeholder.fromundefined.com/[string]
<img src="https://placeholder.fromundefined.com/hello">

Dark Mode

Append ?theme=dark param in url

<img src="https://placeholder.fromundefined.com/hello?theme=dark">

Dark Mode Icon without JavaScript

Using <picture> tag with prefers-color-scheme

<picture>
  <source
    srcset="https://placeholder.fromundefined.com/hello?theme=dark"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://placeholder.fromundefined.com/hello"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img
    decoding="async"
    srcset="https://placeholder.fromundefined.com/hello"
  />
</picture>