테마

테마를 적용해 미스키 클라이언트의 분위기와 느낌을 바꿀 수 있습니다.

테마 설정

설정 > 테마로 들어가 설정할 수 있습니다.

테마 작성

테마 오브젝트는 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 ... 테마의 스타일 설정. 아래 섹션에 설명되어 있습니다.

테마 스타일 정의

props 아래에 테마의 스타일을 정의합니다. 키는 CSS 변수의 명칭이며, 값은 해당 변수의 값을 정의합니다. 또한, props 변수를 통해 기본 테마를 덮어씌웁니다. base가 light이면 기본 테마의 이름은 _light.json5이고, dark이면 _dark.json5입니다. 이렇게 해서, 만약 props에 panel 값이 설정되어 있지 않다면 기본 테마의 panel 값이 이용됩니다.

값 형식

16진수 형식의 색상 코드 (#RRGGBB, #RRGGBBAA)
- 예시: #00ff00
rgb(r, g, b) 형식의 색상 코드
- 예시: rgb(0, 255, 0)
rgba(r, g, b, a) 형식의 색상 코드
- 예시: rgba(0, 255, 0, 0.5)
다른 키 값 사용
- @{key name}을 이용해 다른 키의 값을 사용할 수 있습니다. {key name}을 다른 키의 이름으로 변경해 사용합니다.
  - 예시: @panel
상수 사용
- ${constant name}로 상수의 값을 이용할 수 있습니다. {constant name}을 상수의 이름으로 변경해 사용합니다.
  - 예시: $main
함수
- :{함수명}<{인수}<{다른 값}

상수

상수는 CSS 값을 지정하고 싶지만 해당값을 출력하지 않고 다른 CSS 값으로서만 이용하려 할 때 유용합니다. 키 이름을 $로 시작하게 하면 변수로 설정할 수 있습니다.

함수

버튼 위에 커서를 올려두었을 때에만 조금 밝게 색상을 변경하는 것처럼 기존 색상에서 조금 변경된 색상을 이용할 때 활용하면 편리합니다.

:{함수명}<{인수}<{다른 값} 형식을 이용해 사용할 수 있습니다.

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

사용 가능한 함수

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

3.8 KiB Raw Blame History

테마

테마 설정

테마 작성

테마 스타일 정의

값 형식

상수

함수

사용 가능한 함수

3.8 KiB

Raw Blame History