@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000;
    --text-color: #fff;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --background-color: #fff;
    --text-color: #000;
  }
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

Bun-http

Express-like but way faster HTTP server for Bun. 0 dependencies library.

See blog post

GitHub repo

import { http, Res } from "path/to/lib/http"; // http from bun-http repo
http.get("/", (req) => {
  return new Res(`Hello from home`);
});
http.get("/product/:productId", (req) => {
  return new Res(`Product id: ${req.params.productId}`);
});
http.post("/blog/create", (req) => {
  return new Res(`${req.params}, ${req.query}, ${req.body}`);
});
 
const server = http.serve({ port: 3000 });
console.log(`Listening on port ${server.port}...`);
 
/* Example output
$ bun main.ts
    [0.90ms] ".env"
    Listening on port 3000...
    8:27:48 PM: 200 GET /
    8:27:52 PM: 200 GET /blog/123
    8:27:56 PM: 405 POST /blog/123
    8:27:58 PM: 200 GET /__endpoints // [DEV VIEW] list of all endpoints
*/

Qtheme

Light/dark/any your app/website. Works with any framework/vanilla.

See website

NPM package

import { Qtheme } from '@quak.lib/qtheme'
import { darkTheme } from 'path/to/your/themes'
Qtheme.setTheme(darkTheme)
 
<body className="bg-color text-color">
  <h1 className="text-primary">Hello world!</h1>
  <p>This is regular text color</p>
  <button className="btn">Action</button>
</body>

Qstore

Store for any SPA app. Depends on RxJS.
Use it as your reactive source of data.

See docs page

GitHub repo

class CounterStore extends Store<{count: number}> {
  count$ = this.select(state => state.count)
 
  constructor() { super({count: 0}) }
 
  add(value: number) {
    this.set({count: this.values.count + value})
  }
}
 
@Component({
  selector: 'app-counter',
  template: `
    <div>
      <span>Count: {{counterStore.count$ | async}}</span>
      <button (click)="counterStore.add(1)">Increment</button>
      <button (click)="counterStore.add(5)">Add 5</button>
    </div>
  `
})
class CounterComponent implements OnInit {
  constructor(public counterStore: CounterStore) {}
}