RSS ログイン
Date==== Time==== Update==== Time==== Title==== [[W]WRITE [RET]READ [?]HELP]
2024-01-22 18:25:49 0000-00-00 00:00:00 [備忘録]Vencordのテーマ作成
TEXT FILE (   3KiB ) を受信しますか? [Y]/[N] > Y

備忘録 Vencord Discord CSS テーマ

Vencordのテーマを自作したくなることありますよね(?)ということでテーマの作り方を教えます(まだ解析中)

CSSを用意

用意してください

作り方

/*
	鯖一覧
*/
div[class*=scroller]{
	background-color: aqua;
}
/*セパレーター*/
div[class*=scroller] > div[class*=listItem] > div[class*=guildSeparator] {
	background-color: rgb(255, 94, 0);
	width: 100%;
	height: 10px;
}

/*鯖(フォルダー外)*/
div[class*=scroller] > div > div[class*=listItem] {
	background-color: blueviolet;
}
/*フォルダー*/
div[class*=scroller] > div > div[class*=wrapper] {
	background-color: rgb(39, 0, 75);
}
/*フォルダーアイコン*/
div[class*=scroller] > div > div[class*=wrapper] > div[class*=listItem] {
	background-color: rgb(75, 0, 31);
}
/*フォルダー内*/
div[class*=scroller] > div > div[class*=wrapper] > ul[id*=folder-items] {
	background-color: rgb(255, 0, 106);
}
/*フォルダー内の鯖*/
div[class*=scroller] > div > div[class*=wrapper] > ul[id*=folder-items] > div[class*=listItem] {
	background-color: blueviolet;
}

/*
	サイドバー
*/
div[class*=sidebar] * {
	background-color: greenyellow;
}
/*サイドバーのユーザーのあれ*/
section[class*=panels] div[class*=container] {
	background-color: blue;
}
/*未読のチャンネルの文字部分*/
[class*=iconVisibility] [class*=unread] + div > a > div[class*=linkTop] > div[class*=name]{
	background-color: dodgerblue;
}

/*
	プロフィール
*/
/*プロフのだーくてーま*/
[class*=profileColors].theme-dark {
  --header-primary: black;
  --text-normal: black;
  --text-link: black;
}
/*プロフのライトテーマ*/
[class*=profileColors].theme-light {
  --header-primary: red;
  --text-normal: rgb(174, 0, 255);
  --text-link: blue;
}

/*
	チャット
*/
/*チャンネルのタイトル*/
section[class*=title] * {
	background-color: aquamarine;
}
/*チャットの内容*/
main[class*=chatContent] {
	background-color: aqua;
}
/*チャットのフォーム*/
form[class*=form]{
	background-color: blue;
}

/*
	メンバー一覧
*/
div[class*=members] {
  background-color: aqua;
}
/*メンバーのロールのあれ*/
[class*=membersGroup] {
	background-color: blue;
}
/*メンバー本体*/
[class*=member]{
	background-color: pink;
}
/*メンバーのステータスメッセージ*/
[class*=member] [class*=subText]{
	background-color: rgb(255, 0, 43);
}

/*
	メッセージ
*/
/*メッセージ本体*/
li[id*=chat-messages] {
	background-color: rgb(43, 255, 0);
}
li:hover[id*=chat-messages] {
	background-color: red;
}
/*リプライ*/
li[id*=chat-messages] > div[class*=hasReply] {
	background-color: yellowgreen;
}
/*メンションされたリプライ*/
li[id*=chat-messages] > div[class*=hasReply], li[id*=chat-messages] > div[class*=mentioned] {
	background-color: yellow;
}
/*メンション*/
li[id*=chat-messages] > div[class*=mentioned]{
	background-color: yellow;
}
/*日付*/
[class*=timestamp]{
	background-color: brown;
}

/*ユーザー名*/
[class*=username]:not([class*="usernameSection"]){
	background-color: blueviolet;
}

/*
	Vencordの独自機能
*/

/*メッセージロガーの削除したやつ*/
.messagelogger-deleted {
	border-left: 4px solid red;
}

/*例のタグ(BOT/OWNER/MOD/ADMIN)*/
[class*=botTag]{
	background-color: blueviolet;
}