Misskeyのテーマを作ろう

Misskey

2024.02.02

Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。

前提

misskeyのテーマの作り方を解説します。

やり方

misskeyアプリから作成

設定＞テーマ＞テーマを作るからいけます。

どのような仕上がりになるのか見ながらできるので作りやすいです。

気に入ったら右上のチェックを押して保存して使いましょう。

コードを編集する方法

今回は２種類の方法を説明します。一つはmisskey-hubのサイトからコードをコピペしてくることです。編集するは少ないですが、自動で他の色も設定されるのでとりあえずこっちで大丈夫だと思います。

テーマ | Misskey Hub

テーマを設定して、Misskeyクライアントの見た目を変更できます。

misskey-hubにあったコードを改造したテスト用テーマです。作るときの参考にして下さい

{
    id: 'f7fe8090-98a9-5f75a-1be6-e95ba59a3183',
    name: 'Test',
    author: 'nanasina',
    base: 'light',
    props: {
        accent: 'rgb(255, 0, 0)', // 赤色
        bg: 'rgb(0, 255, 0)', // 緑色
        fg: 'rgb(0, 0, 255)', // 青色
        panel: 'rgb(255, 255, 0)', // 黄色
        renote: 'rgb(255, 0, 255)', // マゼンタ
        link: 'rgb(0, 255, 255)', // シアン
        mention: 'rgb(128, 0, 128)', // 紫色
        hashtag: 'rgb(255, 165, 0)', // オレンジ
        header: 'rgba(128, 128, 128, 0.75)', // 灰色
        navBg: 'rgb(255, 192, 203)', // ピンク
        inputBorder: 'rgba(128, 0, 0, 0.5)', // 暗赤色
    },
}