번역을 도와주세요

이 문서는 커뮤니티에 의해 번역되었어요. 번역 제출은 Crowdin에서 할 수 있어요. 많은 도움 부탁드려요 🙏

테마

테마를 설정하여 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 ... 테마 스타일 정의。이제부터 설명하겠습니다.

테마 스타일 정의

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

값(Value)을 사용할 수 있는 구문

  • 16진수 색상 표기
    • 예: #00ff00
  • rgb(r, g, b) 색상 표기
    • 예: rgb(0, 255, 0)
  • rgba(r, g, b, a) 색상 표기 (색상과 투명도)
    • 예: rgba(0, 255, 0, 0.5)
  • 다른 변수 값 참조
    • @{변수 이름}을 입력하여 다른 변수 값을 참조합니다.{변수 이름}은 사용할 변수 이름을 정하세요.
    • 예: @panel
  • 정수 값 참조 (후술)
    • ${정수 이름}과 사용할 정수 값을 참조합니다.{정수 이름}과 사용할 정수 이름을 정하세요.
    • 예: $main
  • 함수 (후술)
    • :{함수 이름}<{인수 값}<{색상 값}

정수

"CSS 변수로 출력하고 싶진 않지만, 다른 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를 추가해야 합니다.상세 내용은여기를 참조하세요.