mirror of
https://iceshrimp.dev/Crimekillz/jointrashposs.git
synced 2024-11-24 09:49:06 +01:00
91 lines
3.8 KiB
Markdown
91 lines
3.8 KiB
Markdown
|
# 테마
|
||
|
|
테마를 적용해 미스키 클라이언트의 분위기와 느낌을 바꿀 수 있습니다.
|
||
|
|
|
||
|
|
## 테마 설정
|
||
|
|
`설정 > 테마`로 들어가 설정할 수 있습니다.
|
||
|
|
|
||
|
|
## 테마 작성
|
||
|
|
테마 오브젝트는 JSON5 형식으로 작성됩니다.
|
||
|
|
이러한 테마는 아래의 오브젝트 형식을 가지고 있습니다.
|
||
|
|
``` js
|
||
|
|
{
|
||
|
|
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](https://github.com/misskey-dev/misskey/blob/develop/packages/frontend/src/themes/_light.json5)이고, `dark`이면 [_dark.json5](https://github.com/misskey-dev/misskey/blob/develop/packages/frontend/src/themes/_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 값으로서만 이용하려 할 때 유용합니다.
|
||
|
|
키 이름을 `$`로 시작하게 하면 변수로 설정할 수 있습니다.
|
||
|
|
|
||
|
|
#### 함수
|
||
|
|
버튼 위에 커서를 올려두었을 때에만 조금 밝게 색상을 변경하는 것처럼 기존 색상에서 조금 변경된 색상을 이용할 때 활용하면 편리합니다.
|
||
|
|
|
||
|
|
`:{함수명}<{인수}<{다른 값}` 형식을 이용해 사용할 수 있습니다.
|
||
|
|
|
||
|
|
```js
|
||
|
|
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)를 더한 색상을 반환합니다.
|