Custom configuration

Parfait also offers the ability to make your own configuration using the custom.css file. Preferences made here will override the built-in variables, and you have to be careful when making these changes.

Tip

In rare cases when changing a variable doesn't work, append the !important keyword next to the value to change it.

Creating custom.css

To get started, we should first create the custom.css file.

1. Type and enter about:support in the address bar.
2. Scroll down to the Profile Folder row and click Open Folder.
3. Go to the chrome folder and then the parfait folder.
4. Create a file named custom.css.
5. Open custom.css in any text editor and start editing.

The custom.css file is not part of the Parfait repository and will persist through updates regardless of what installation method you choose.

Sample configuration

Here's a sample custom.css file, so you can understand what the variables do.

:root {
  /* changes the accent color, rounded corners, and sidebar width */
  --pf-accent-color: #f8a8bc;
  --pf-border-radius-md: 12px;
  --pf-sidebar-width: 240px;

  /* insert your variables here */
}

Common methods

I'll be listing down methods that I think you will likely put first in the custom.css file.

Colors

Browser background

Note

Modifying this will ignore opacity and contrast settings. For a better solution, choose your favorite accent color and edit the --pf-accent-color variable instead.

Change the color value with your own:

--pf-browser-bgcolor: #ffe3ea;

Accent color

--pf-accent-color: #f8a8bc;

Background opacity and contrast

Change the % values with your own.

--pf-browser-opacity: 50%;
--pf-browser-contrast: 25%;

Gradient background

--pf-bg-gradient-1: #f8a8bc;
--pf-bg-gradient-2: #a75a6d;

Corner radius

Change the px values with your own.

--pf-border-radius-md: 12px;
--pf-border-radius-sm: 8px;
--pf-browser-radius: 6px;

Sidebar width

Warning

Minimum sidebar width should be at least 210px if you have traffic lights option enabled or on macOS. Any value below this will displace toolbar items or visually break the sidebar.

Change the px value with your own.

--pf-sidebar-width: 250px;

Traffic light colors

Note

Only works on Windows and Linux.

Change the HEX color values with your own.

--pf-tl-min-color: #febc2e;
--pf-tl-max-color: #28c840;
--pf-tl-close-color: #ff5f57;

Linux CSD

If you use a custom user theme, and the menu, extension, and overflow buttons look misaligned to you. Adjust the --pf-wc-width variable accordingly.

--pf-wc-width: 114px;

Advanced stuff

The above section only covers a small section of the root variables available in Parfait. For further customization, you can take a look at the variables.css file inside the components folder for a list of all variables, and apply them in custom.css.

You may also add custom CSS or your personal modifications in custom.css. But do note that if you plan to file an issue, please test it without any third-party modifications first.