🎨

単色パネル表示するだけのツール作った

1 min read

たまにモニターの焼け付きが気になって、グレイ色の背景のウィンドウを用意して確認することがあります。
そんなときに単色のページ探すがだるいので Web ツール化しました。
真っ黒や真っ白なウィンドウも作ることができます。

ツール

Mitelop という自分が作ってたツール群のサイトに置きました。
Widget makeing tool | Mitelop

Mitelop カラーパネル作成
Mitelop ポップアップ画像

PWA で Mitelop をインストールして作成すると上のようなウィンドウを作れます。

技術的な話

単色背景については誰でもできるそのまんまの実装です。
作成画面のカラーピッカーは React Color というコンポーネントを使っています。

import Head from 'next/head'

const ColorPage: NextPage = () => {
  // 省略
  return (
    <Layout title="Color" reset>
      <Head>
        <meta name="theme-color" content={color} />
        <title>Color-{color}</title>
      </Head>
    </Layout>
  )
}

export default ClockPage

<meta name="theme-color" /> を指定することで PWA ウィンドウヘッダーの色を変えられます。
Next.js で実装しているアプリなので、next/head を使うことで動的に変更しています。

GitHub elzup/mitelop: Widget makeing tool

GitHubで編集を提案

Discussion

ログインするとコメントできます