透明なゲーム機、携帯電話、その他コンピュータ…
透明な機械はどういうわけかワクワクします。
透明な機械が商品として出回ることはあまり多くありませんが、透明なiMac、ゲームボーイカラーやニンテンドー2DSは、好きな人にとってはとても心躍るものだったのではないでしょうか。
ActivityPubに対応したソフトウェア「Misskey」やそのフォークである「Firefish」では、見た目を自分好みにすることができます。
GUI上での設定だけでも十分ですが、コードをいじることができれば、もっと自由自在に見た目を変えることができます。
ちなみに、Misskeyでは、「中央寄せ」モード以外だと、せっかく設定した壁紙が隠れてしまいますが、この透明テーマを使うことで、デフォルトでも壁紙が見えるようになります。
この記事では、僕が実際に自鯖「Aurora Planet」と「㐂五亭」で使用しているスケルトンなテーマのコードを公開しています。是非試してみてください。
また、ライセンスはCC-BY 4.0なので、作者名を表示してもらえれば、自由に改変したり配布したりできます。あなたのオリジナルなスケルトンテーマを作ってみてください。
GitHubでも公開しています。
GitHub - uryokurin/misskeytheme: Misskeyとそのフォーク(Firefishなど)で使えるテーマです
Misskeyとそのフォーク(Firefishなど)で使えるテーマです. Contribute to uryokurin/misskeytheme development by creating an account on GitHub.
github.com
Aurora Planetのテーマ
こちらは、Aurora Planetで自分が使っている透明テーマです。サンプルの画像を以下に載せておきます。
長いので折りたたみました。
Aurora Planet Light Transparent
{
id: '2caa9f7c-206e-4a15-9bc7-093044a03458',
base: 'light',
name: 'Aurora Planet Light Transparent',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(0, 0, 0, 0.05)',
X4: 'rgba(0, 0, 0, 0.1)',
X5: 'rgba(0, 0, 0, 0.05)',
X6: 'rgba(0, 0, 0, 0.25)',
X7: 'rgba(0, 0, 0, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: 'rgba(247,252,254,0.7)',
fg: '#241a08',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.1)',
X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#b1b9c1',
cwFg: '#fff',
link: '#9079ad',
warn: '#ecb637',
badge: '#31b1ce',
error: '#ec4137',
focus: ':alpha<0.3<@accent',
navBg: '@panel',
navFg: '@fg',
panel: ':lighten<3<@bg',
popup: ':lighten<3<@panel',
accent: '#674196',
header: ':alpha<0.7<@panel',
infoBg: '#e5f5ff',
infoFg: '#72818a',
renote: '#229e82',
shadow: 'rgba(0, 0, 0, 0.1)',
divider: 'rgba(0, 0, 0, 0.1)',
hashtag: '#028760',
mention: '@accent',
modalBg: 'rgba(0, 0, 0, 0.3)',
success: '#86b300',
buttonBg: 'rgba(0, 0, 0, 0.05)',
switchBg: 'rgba(0, 0, 0, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#bbc4ce',
indicator: '@accent',
mentionMe: '@mention',
messageBg: '@bg',
navActive: '@accent',
accentedBg: ':alpha<0.15<@accent',
codeNumber: '#0fbbbb',
codeString: '#b98710',
fgOnAccent: '#fff',
infoWarnBg: '#fff0db',
infoWarnFg: '#8f6e31',
navHoverFg: ':darken<17<@fg',
swutchOnBg: '@accent',
swutchOnFg: '@fgOnAccent',
codeBoolean: '#62b70c',
dateLabelFg: '@fg',
inputBorder: 'rgba(0, 0, 0, 0.1)',
panelBorder: '" solid 1px var(--divider)',
swutchOffBg: 'rgba(0, 0, 0, 0.1)',
swutchOffFg: '@panel',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
windowHeader: ':alpha<0.85<@panel',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':darken<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg',
panelHighlight: ':darken<3<@panel',
listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
inputBorderHover: 'rgba(0, 0, 0, 0.2)',
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
},
author: '@windowsrinboku@auroraplanet.blue',
}
Aurora Planet Dark Transparent
{
id: '8077ed85-e0b0-41ff-b37e-1ab581954c83',
base: 'dark',
name: 'Aurora Planet Dark Transparent',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: 'rgba(22,22,14,0.7)',
fg: '#f7fcfe',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#687390',
cwFg: '#393f4f',
link: '#c1e4e9',
warn: '#ecb637',
badge: '#31b1ce',
error: '#ec4137',
focus: ':alpha<0.3<@accent',
navBg: '@panel',
navFg: '@fg',
panel: ':lighten<3<@bg',
popup: ':lighten<3<@panel',
accent: '#69821b',
header: ':alpha<0.7<@panel',
infoBg: '#253142',
infoFg: '#fff',
renote: '#229e82',
shadow: 'rgba(0, 0, 0, 0.3)',
divider: 'rgba(255, 255, 255, 0.1)',
hashtag: '#bbc8e6',
mention: '@accent',
modalBg: 'rgba(0, 0, 0, 0.5)',
success: '#86b300',
buttonBg: 'rgba(255, 255, 255, 0.05)',
switchBg: 'rgba(255, 255, 255, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#707b97',
indicator: '@accent',
mentionMe: '@mention',
messageBg: '@bg',
navActive: '@accent',
accentedBg: ':alpha<0.15<@accent',
codeNumber: '#cfff9e',
codeString: '#ffb675',
fgOnAccent: '#fff',
infoWarnBg: '#42321c',
infoWarnFg: '#ffbd3e',
navHoverFg: ':lighten<17<@fg',
swutchOnBg: '@accentedBg',
swutchOnFg: '@accent',
codeBoolean: '#c59eff',
dateLabelFg: '@fg',
inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--divider)',
swutchOffBg: 'rgba(255, 255, 255, 0.1)',
swutchOffFg: '@fg',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
windowHeader: ':alpha<0.85<@panel',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg',
panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},
author: '@windowsrinboku@auroraplanet.blue',
}㐂五亭のテーマ
同様にサンプル画像を載せます。
長いので折りたたみました。
Ddoskey Light Transparent
{
id: 'b012c462-0d02-4176-97ab-7823afe5ac56',
base: 'light',
name: 'ddoskey light transparent',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(0, 0, 0, 0.05)',
X4: 'rgba(0, 0, 0, 0.1)',
X5: 'rgba(0, 0, 0, 0.05)',
X6: 'rgba(0, 0, 0, 0.25)',
X7: 'rgba(0, 0, 0, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: 'rgba(253,249,242,0.7)',
fg: '#5f5f5f',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.1)',
X12: 'rgba(0, 0, 0, 0.1)',
X13: 'rgba(0, 0, 0, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#b1b9c1',
cwFg: '#fff',
link: '#b28c6e',
warn: '#ecb637',
badge: '#31b1ce',
error: '#ec4137',
focus: ':alpha<0.3<@accent',
navBg: '@panel',
navFg: '@fg',
panel: ':lighten<3<@bg',
popup: ':lighten<3<@panel',
accent: '#ce5242',
header: ':alpha<0.7<@panel',
infoBg: '#e5f5ff',
infoFg: '#72818a',
renote: '#229e82',
shadow: 'rgba(0, 0, 0, 0.1)',
divider: 'rgba(0, 0, 0, 0.1)',
hashtag: '#cb8347',
mention: '@accent',
modalBg: 'rgba(0, 0, 0, 0.3)',
success: '#86b300',
buttonBg: 'rgba(0, 0, 0, 0.05)',
switchBg: 'rgba(0, 0, 0, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#bbc4ce',
indicator: '@accent',
mentionMe: '@mention',
messageBg: '@bg',
navActive: '@accent',
accentedBg: ':alpha<0.15<@accent',
codeNumber: '#0fbbbb',
codeString: '#b98710',
fgOnAccent: '#fff',
infoWarnBg: '#fff0db',
infoWarnFg: '#8f6e31',
navHoverFg: ':darken<17<@fg',
swutchOnBg: '@accent',
swutchOnFg: '@fgOnAccent',
codeBoolean: '#62b70c',
dateLabelFg: '@fg',
inputBorder: 'rgba(0, 0, 0, 0.1)',
panelBorder: '" solid 1px var(--divider)',
swutchOffBg: 'rgba(0, 0, 0, 0.1)',
swutchOffFg: '@panel',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
windowHeader: ':alpha<0.85<@panel',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':darken<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg',
panelHighlight: ':darken<3<@panel',
listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
inputBorderHover: 'rgba(0, 0, 0, 0.2)',
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
},
author: '@madorinboku@ddoskey.com',
}
Ddoskey Dark Transparent
{
id: '47ba6125-7497-4f20-a10c-d952c39d054b',
base: 'dark',
name: 'ddoskey dark transparent',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: 'rgba(63,49,43,0.6)',
fg: '#fffffc',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#687390',
cwFg: '#393f4f',
link: '#f8b862',
warn: '#ecb637',
badge: '#31b1ce',
error: '#ec4137',
focus: ':alpha<0.3<@accent',
navBg: '@panel',
navFg: '@fg',
panel: ':lighten<3<@bg',
popup: ':lighten<3<@panel',
accent: '#ce5242',
header: ':alpha<0.7<@panel',
infoBg: '#253142',
infoFg: '#fff',
renote: '#229e82',
shadow: 'rgba(0, 0, 0, 0.3)',
divider: 'rgba(255, 255, 255, 0.1)',
hashtag: '#f8b862',
mention: '@accent',
modalBg: 'rgba(0, 0, 0, 0.5)',
success: '#86b300',
buttonBg: 'rgba(255, 255, 255, 0.05)',
switchBg: 'rgba(255, 255, 255, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#707b97',
indicator: '@accent',
mentionMe: '@mention',
messageBg: '@bg',
navActive: '@accent',
accentedBg: ':alpha<0.15<@accent',
codeNumber: '#cfff9e',
codeString: '#ffb675',
fgOnAccent: '#fff',
infoWarnBg: '#42321c',
infoWarnFg: '#ffbd3e',
navHoverFg: ':lighten<17<@fg',
swutchOnBg: '@accentedBg',
swutchOnFg: '@accent',
codeBoolean: '#c59eff',
dateLabelFg: '@fg',
inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--divider)',
swutchOffBg: 'rgba(255, 255, 255, 0.1)',
swutchOffFg: '@fg',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
windowHeader: ':alpha<0.85<@panel',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg',
panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},
author: '@madorinboku@ddoskey.com',
}
