테마

테마를 설정하여 Misskey 클라이언트의 외관을 변경할 수 있습니다.

테마 설정

설정 > 테마

테마 만들기

테마 코드는 JSON5로 작성된 테마 객체입니다.

{
    id: '17587283-dd92-4a2c-a22c-be0637c9e22a',

    name: 'Danboard',
    author: 'syuilo',

    base: 'light',

    props: {
        accent: 'rgb(218, 141, 49)',
        bg: 'rgb(218, 212, 190)',
        fg: 'rgb(115, 108, 92)',
        panel: 'rgb(236, 232, 220)',
        renote: 'rgb(100, 152, 106)',
        link: 'rgb(100, 152, 106)',
        mention: '@accent',
        hashtag: 'rgb(100, 152, 106)',
        header: 'rgba(239, 227, 213, 0.75)',
        navBg: 'rgb(216, 206, 182)',
        inputBorder: 'rgba(0, 0, 0, 0.1)',
    },
}

id ... 테마는 다음과 같은 객체입니다.테마의 고유 ID.UUID를 추천합니다.
name ... 테마 이름
author ... 테마 제작자
desc ... 테마 설명(옵션)
base ... 밝은 테마인지, 어두운 테마인지
- light로 하면 밝은 테마가 되고, dark로 하면 어두운 테마가 됩니다.
- 테마는 여기서 상속된 베이스 테마를 기준으로 합니다.
props ... 테마 스타일 정의。이제부터 설명하겠습니다.

테마 스타일 정의

베이스 테마는 이 테마의 base가 light라면 \_light.json5이고, dark라면 \_dark.json5입니다.

값으로 사용할 수 있는 구문

16진수로 표현된 색
- 예: #00ff00
rgb(r, g, b) 형식으로 나타낸 색
- 예: rgb(0, 255, 0)
rgb(r, g, b, a) 형식으로 표현된 투명도를 포함한 색상
- 예: rgba(0, 255, 0, 0.5)
다른 키 값 참조
- @{키 이름}이라고 쓰면 다른 키의 값을 참조하게 됩니다.{키 이름}은 참조하고자 하는 키의 이름으로 대체됩니다.키 이름을 $로 시작하면 해당 키는 CSS 변수로 출력되지 않습니다.
- 예: @panel
상수(후술)의 참조
- ${상수명}이라고 쓰면 상수 참조가 됩니다.{상수 이름}은 참조하고자 하는 상수의 이름으로 대체됩니다.:{함수명}<{인수}<{색상}
- 예: $main
함수(후술)
- :{함수명}<{인수}<{색상}

상수

'CSS 변수로 출력하고 싶지 않지만 다른 CSS 변수의 값으로 사용하고 싶은' 값이 있을 때는 상수를 사용하면 편리합니다.

함수

'버튼 위에 커서를 올렸을 때만 색상을 밝게 하고 싶다'와 같이 기존 색상에서 조금 변경된 색상을 사용하고 싶을 때 이 함수를 사용하면 편리합니다.

:{함수명}<{인수}<{색상이나 다른 키 참조}의 형태로 사용할 수 있습니다.

props: {
    accent: '#86b300',
    accentDarken: ':darken<10<#86b300',
    accentLighten: ':lighten<10<@accent'
}

사용 가능한 함수

lighten ... 전달받은 색의 밝기(0~100)에 인수(0~100)를 더한 색을 반환합니다.
darken ... 전달받은 색의 밝기(0~100)에 인수(0~100)를 뺀 색을 반환합니다.
alpha ... 전달받은 색의 투명도를 인수(0.0 ~ 1.0)로 설정한 색을 반환합니다.
- 0.0이면 완전히 투명하고 1.0이면 완전히 불투명합니다.
hue ... 전달받은 색상의 색조(-360 ~ 360)에 대해 인수(-360 ~ 360)의 값만큼 회전시킨 색을 반환합니다.
saturate ... 전달받은 색의 채도(0~100)에 인수(0~100)를 더한 색을 반환합니다.

테마 배포하기

v2023.11.0 이상에서는 웹 사이트에서 클릭 한 번으로 직접 테마를 설치할 수 있습니다.

테마 설치 기능을 제공하는 경우, 여러분의 사이트에 API를 구현해야 합니다.자세한 내용은 여기에서 확인할 수 있습니다.자세한 내용은 여기에서 확인할 수 있습니다.

테마