Setup logo, colors, fonts, and other visuals for your application.
resources/css/theme-{color}.css
.
To use one of the themes, update this line: @import url(theme-neutral.css)
in app.css
.
To update default border radius, change the --radius
value in your theme css
file.
For example, if you want sharp borders, use this --radius: 0rem
and if you want round borders, use this --radius: 1rem
. Default is --radius: 0.5rem
. You can set any value and see what works best for you.
theme-custom.css
using shadcn-custom-theme.
This generator works only with Tailwind colors and you can customize it as you like. If you want to create unique theme with completely custom colors, this generator could be a good start.
Custom theme has been generated using this code:
Card
background color bg-red-100 dark:bg-red-900
or Button
bg-indigo-600
, etc.
tailwind.config.js
and do the updates.
theme
object.theme.extend
object.DEFAULT
in your config.
resources/js/Components/ApplicationLogo.vue
with your own SVG logo.
You can also upload PNG
or SVG
image to the public
folder and use img
tag instead.
public
folder.
Figtree
and Inter
.
Default font family is Figtree
. Class for default font family is font-body
.
If you want to use Inter
instead, or any other custom font family, update the tailwind.config.js
file:
resources/views/app.blade.php
and similar example instead of the current fonts. Make sure to copy embed code provided by Google, and not the one in example.
tailwind.config.js
accordingly.
app.blade.php
and tailwind.config.js
accordingly.
If you need help to include custom fonts which are not hosted on any CDN, please, create Helpdesk ticket in your dashboard.
@tailwindcss/typography
package and its prose classes.
You can style it under typography
in tailwind.config.js
configuration file and in resources/css/app.css
using .prose
class (there are already some custom styles included).
resources/css/app.css
and update selection:bg-foreground
and selection:text-background
.