How to Customize Traccar Web Application HTML React

Traccar Course

Access the Traccar course here: Traccar Course

Have you wondered how to give your personal touch to the Traccar web application? Customizing its appearance can make your experience more pleasant and adapted to your tastes. In this article, we'll explain step-by-step how to change colors, logos, and other visual elements of Traccar.

If you are looking for something less advanced, I would recommend checking this entry: How to Customize Traccar Web Application from the Platform.

You can find the guided video here: How to Customize Traccar Web.

You might also be interested in how to update Traccar on DigitalOcean.

Environment Preparation

Before diving into customization, it's important to have the right environment set up. Here are the necessary steps to prepare your development environment:

Download Source Code: Go to the Traccar GitHub repository and clone the project or download it directly.
Install Dependencies: Make sure you have Node.js and Visual Studio Code installed. Open a terminal, navigate to the project directory, and run npm install to install the necessary dependencies.
Configure the Server: If you already have your Traccar server ready, you can connect it to the local environment by changing the necessary settings in the vite.config.js file.

Changing Application Colors

Colors play a crucial role in the appearance of any application. Here's how you can customize colors in Traccar:

Editing the Color Palette

Locate the Theme File: Open the file src/common/theme/palette.js.
Modify Colors: Inside this file, you will find the variables that define the main colors of the application. For example:
```
  primary: {
    main: "#0dd3ba",
  },
```
Use Color Tools: You can use tools like Coolors to generate attractive color palettes.

Implementing Changes

Save and Build: After making changes, save the file and build the project with npm run build.
View Results: Start the server with npm run start and check the changes in your browser.

Customizing Logos and Images

Your application logo is an essential part of its visual identity. Changing it is simple:

Changing the Logo

Locate Public Folder: Navigate to the public folder.
Replace the Logo: Find the current logo file (e.g., logo.png) and replace it with your new logo. Ensure the filename matches.

Adjusting Code

Modify HTML Code: If necessary, adjust the corresponding HTML file (e.g., index.html) to ensure the logo shows correctly.
Verify Changes: Save all files and restart the server to verify the changes.

Additional Adjustments

Besides colors and logos, you can customize other interface elements:

Changing Element Sizes

Modify Dimensions: In the theme.scss file, you can also adjust the dimensions of key elements. For example:
```
$header-height: 60px;
$sidebar-width: 250px;
```
Save and Build: Make the necessary changes, save the file, and build the project.

Dark and Light Mode

Configure Modes: Add configurations to support dark and light modes, adjusting color variables according to the selected mode.
Test Modes: Make sure to test both modes to verify colors adapt correctly.

Conclusion

Customizing the Traccar web application can seem complicated at first, but following these steps, you can make the application look exactly as you want. Change colors, update logos, and adjust dimensions to create a unique and personalized experience.

Remember that the key is to experiment and adjust until you find the perfect combination for your needs. If you liked this tutorial, feel free to share it and leave your comments on what else you'd like to learn!

Course content