jointrashposs/content/pl/.docs-legacy/features/theme.md
2023-07-11 23:48:17 +09:00

2.4 KiB

Motyw

Możesz zmienić motyw kolorystyczny Misskey zgodnie z własnym gustem.

Ustawienia motywów

Ustawienia > Motywy

Tworzenie motywów

Motywy są pisane za pomocą JSON5. Motywy mają obiekty tak jak ten przykład:

{
 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 Motywu. UUID jest rekomendowane.
  • name ... Nazwa motywu
  • author ... Autor motywu
  • desc ... Opis motywu (Object)
  • base ... tryb jasny czy ciemny?
    • Użyj light dla jasnego i dark dla ciemnego trybu.
    • Motyw używa bazy wyspecyfikowanej.
  • props ... Definicje stylu motywu. Wytłumacznone w następujących punktach.

Definicje stylów motywu

Definiuj style motywów z props. Wartości to nazwy wartości CSS i one ustawiają materiały.The Poza tym props pobiera dane z bazowego motywu. Bazowy motyw to _light.json5 jeśli base motywu jest light i _dark.json5 jeśli dark. Jeśli nie ma wartości props nazwanej panel w motywie, to będzie użyta wartość panel z bazowego motywu.

Składnia wartości

  • Kolory w formacie #rrggbb
    • Na przykład: #00ff00
  • Kolory w formacie rgb(r, g, b)
    • Na przykład: rgb(0, 255, 0)
  • kolory w wartościach alfa/przezroczystość w formacie rgb(r, g, b, a)
    • przykład: rgba(0, 255, 0, 0.5)
  • Inne wartości
    • @{key name} Nazwa wartości z innego klucza. Zamień {key name} z nazwą klucza do którego chcesz nawiązać.
    • example: @panel
  • Zmienne:
    • ${constant name} nawiązuje do stałej. Zamień {constant name} z nawą stałej do której chcesz nawiązać.
    • przykład: $main
  • Funkcje:
    • :{nazwa funkcji}<{argumenty}}<{kod}

Stałe

Stałe są przydatne kiedy masz wartości których nie chcesz wyświetlać jako zmienną CSS, ale chcesz użyć ich jako wartości dla innych zmiennych CSS.

Funkcje

WIP (TODO)