1. Overview of Theme Customization
Taskify is built with TailwindCSS, so you can easily customize the colors and styles by editing the tailwind configuration and custom styles.
You can add more broad colors and other customizations in tailwind.config.ts file.
But if you want to customize the Taskify's unique styles you can do it in assets/style.css file.
2. Changing Colors
To change the colors of the Taskify, you can edit the classes in the assets/style.css file.
There are typically named in the format of bg-base, text-primary, border-primary, etc.
For example, if you want to change the background color of the Taskify, you can edit the bg-base class in the assets/style.css file.
.bg-base {
background-color: #09090f; // Edit this line
}
3. Changing Logo
To change the logo of the Taskify, you can edit the components/base/Logo.vue file. Logo component accepts 3 different sizes and optional hideText prop to hide the text of the logo.
So if you want to change the logo to your own logo, you must have 3 different logos for 3 different sizes and if logo has text, you must have 2 different logos for with or without text.
4. Typography Settings
Taskify's uses 'San Francisco' font by default. But you can easily change it to any other font you want.
To change the font, you can edit the assets/main.css file.
html {
font-family: "-apple-system", "BlinkMacSystemFont", "SF Pro Display Regular",
"SF Pro Display Regular Placeholder", sans-serif;
}
You can also change the specific font sizes, weights and other typography settings in the assets/style.css file.
Text styles are named in the format of heading-1, paragraph, display-xl, etc.
For example, if you want to change the font size of the paragraph style, you can edit the paragraph class in the assets/style.css file.
.paragraph {
font-size: 15px; // Edit this line
line-height: 24px; // Edit this line
}
5. Custom CSS
If you want to add more custom styles, you can create a new file in the assets/css/ folder and import it in the assets/main.css file.
Taskify already uses Tailwind CSS utility classes, so you can use them to add more custom styling for you components & pages.