Przejdź do treści
prfct

Kreator motywów

prfct jest czarno-biały. Nadaj mu dwa kolory swojej marki, szarość i promień: każda skala powstaje na nowo dla obu trybów, a kontrast każdego stopnia tekstu jest wyliczany od początku, więc cokolwiek wybierzesz, pozostanie dostępne.

Podgląd

Jasny
Pro
Przestrzeń robocza
Dostosuj sposób pracy zespołu.
Transfer72 ze 100 GB
x
Współbieżność
Okres próbny kończy się za 3 dni
Dodaj metodę płatności, aby zachować przestrzeń roboczą.
ALGHKJ
PomyślneZakłóceniaNieudaneW kolejceSzkic

Każda kontrolka powyżej pobiera kolor z motywu, który tworzysz.

Ciemny
Pro
Przestrzeń robocza
Dostosuj sposób pracy zespołu.
Transfer72 ze 100 GB
x
Współbieżność
Okres próbny kończy się za 3 dni
Dodaj metodę płatności, aby zachować przestrzeń roboczą.
ALGHKJ
PomyślneZakłóceniaNieudaneW kolejceSzkic

Każda kontrolka powyżej pobiera kolor z motywu, który tworzysz.

Wygenerowany CSS96 linii
/* prfct theme */
:root {
  --radius: 0.5rem;
}

:root,
.light {
  --gray-1: oklch(0.992 0 0);
  --gray-2: oklch(0.979 0 0);
  --gray-3: oklch(0.958 0 0);
  --gray-4: oklch(0.936 0 0);
  --gray-5: oklch(0.913 0 0);
  --gray-6: oklch(0.889 0 0);
  --gray-7: oklch(0.853 0 0);
  --gray-8: oklch(0.789 0 0);
  --gray-9: oklch(0.64 0 0);
  --gray-10: oklch(0.604 0 0);
  --gray-11: oklch(0.5 0 0);
  --gray-12: oklch(0.228 0 0);
  --gray-contrast: oklch(0.2 0 0);
  --gray-focus: oklch(0.64 0 0);
  --brand-1: oklch(0.992 0 0);
  --brand-2: oklch(0.979 0 0);
  --brand-3: oklch(0.958 0 0);
  --brand-4: oklch(0.936 0 0);
  --brand-5: oklch(0.913 0 0);
  --brand-6: oklch(0.889 0 0);
  --brand-7: oklch(0.853 0 0);
  --brand-8: oklch(0.789 0 0);
  --brand-9: oklch(0.228 0 0);
  --brand-10: oklch(0.308 0 0);
  --brand-11: oklch(0.228 0 0);
  --brand-12: oklch(0.228 0 0);
  --brand-contrast: oklch(1 0 0);
  --brand-focus: oklch(0.228 0 0);
  --brand-secondary-1: oklch(0.992 0 0);
  --brand-secondary-2: oklch(0.979 0 0);
  --brand-secondary-3: oklch(0.958 0 0);
  --brand-secondary-4: oklch(0.936 0 0);
  --brand-secondary-5: oklch(0.913 0 0);
  --brand-secondary-6: oklch(0.889 0 0);
  --brand-secondary-7: oklch(0.853 0 0);
  --brand-secondary-8: oklch(0.789 0 0);
  --brand-secondary-9: oklch(0.228 0 0);
  --brand-secondary-10: oklch(0.308 0 0);
  --brand-secondary-11: oklch(0.228 0 0);
  --brand-secondary-12: oklch(0.228 0 0);
  --brand-secondary-contrast: oklch(1 0 0);
  --brand-secondary-focus: oklch(0.228 0 0);
}

.dark {
  --gray-1: oklch(0.158 0 0);
  --gray-2: oklch(0.192 0 0);
  --gray-3: oklch(0.226 0 0);
  --gray-4: oklch(0.256 0 0);
  --gray-5: oklch(0.285 0 0);
  --gray-6: oklch(0.32 0 0);
  --gray-7: oklch(0.374 0 0);
  --gray-8: oklch(0.466 0 0);
  --gray-9: oklch(0.53 0 0);
  --gray-10: oklch(0.575 0 0);
  --gray-11: oklch(0.768 0 0);
  --gray-12: oklch(0.952 0 0);
  --gray-contrast: oklch(1 0 0);
  --gray-focus: oklch(0.575 0 0);
  --brand-1: oklch(0.158 0 0);
  --brand-2: oklch(0.192 0 0);
  --brand-3: oklch(0.226 0 0);
  --brand-4: oklch(0.256 0 0);
  --brand-5: oklch(0.285 0 0);
  --brand-6: oklch(0.32 0 0);
  --brand-7: oklch(0.374 0 0);
  --brand-8: oklch(0.466 0 0);
  --brand-9: oklch(0.952 0 0);
  --brand-10: oklch(0.892 0 0);
  --brand-11: oklch(0.952 0 0);
  --brand-12: oklch(0.952 0 0);
  --brand-contrast: oklch(0.158 0 0);
  --brand-focus: oklch(0.892 0 0);
  --brand-secondary-1: oklch(0.158 0 0);
  --brand-secondary-2: oklch(0.192 0 0);
  --brand-secondary-3: oklch(0.226 0 0);
  --brand-secondary-4: oklch(0.256 0 0);
  --brand-secondary-5: oklch(0.285 0 0);
  --brand-secondary-6: oklch(0.32 0 0);
  --brand-secondary-7: oklch(0.374 0 0);
  --brand-secondary-8: oklch(0.466 0 0);
  --brand-secondary-9: oklch(0.952 0 0);
  --brand-secondary-10: oklch(0.892 0 0);
  --brand-secondary-11: oklch(0.952 0 0);
  --brand-secondary-12: oklch(0.952 0 0);
  --brand-secondary-contrast: oklch(0.158 0 0);
  --brand-secondary-focus: oklch(0.892 0 0);
}