Add custom CSS support (#868)

Co-authored-by: André Oliveira <oliveira.andrerodrigues95@gmail.com>
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

2 files changed, 22 insertions, 0 deletions

diff --git a/README.md b/README.md
index 8d98f9dcd..692f90943 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@
   - [Screenshots](#screenshots)
   - [Download](#download)
   - [Migrating from Ferdi](#migrating-from-ferdi)
+  - [Styling](#styling)
   - [Contributing](#contributing)
   - [Contributors ✨](#contributors-)
 
@@ -63,6 +64,18 @@ _Find answers to frequently asked questions on [ferdium.org/faq](https://ferdium
 
 If you are a pre-existing user of Ferdi, and are thinking of switching to Ferdium, you might want to run [the following scripts](./scripts/migration) to migrate your existing Ferdi profile such that Ferdium can pick up the configurations. (.ps1 for PowerShell/Windows users and .sh for UNIX (Linux and MacOS users). For a more detailed explanation, please see [MIGRATION.md](MIGRATION.md)
 
+## Styling
+
+You can style Ferdium's UI with the `USER_DATA/Ferdium/config/custom.css` file.
+
+> **Note**
+>
+> `USER_DATA`'s location depends on your platform:
+>
+> - **Windows**: `%APPDATA%`
+> - **Linux**: `$XDG_CONFIG_HOME` or `~/.config/`
+> - **MacOS**: `~/Library/Application Support`
+
 ## Contributing
 
 Please read the [contributing guidelines](CONTRIBUTING.md) to setup your development machine and proceed.
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index b3cbd3347..9c9f3e175 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -2,6 +2,7 @@ import color from 'color';
 import { reaction } from 'mobx';
 import TopBarProgress from 'react-topbar-progress-indicator';
 
+import { pathExistsSync, readFileSync } from 'fs-extra';
 import { isWindows, isLinux } from '../../environment';
 import {
   DEFAULT_APP_SETTINGS,
@@ -10,6 +11,7 @@ import {
   SIDEBAR_SERVICES_LOCATION_CENTER,
   SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT,
 } from '../../config';
+import { userDataPath } from '../../environment-remote';
 
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
 
@@ -34,6 +36,11 @@ function darkenAbsolute(originalColor, absoluteChange) {
   return originalColor.lightness(originalLightness - absoluteChange);
 }
 
+function generateUserCustomCSS() {
+  const path = userDataPath('config', 'custom.css');
+  return pathExistsSync(path) ? readFileSync(path).toString() : '';
+}
+
 function generateAccentStyle(accentColorStr) {
   let accentColor;
   try {
@@ -421,6 +428,8 @@ function generateStyle(settings, app) {
     style += generateOpenWorkspaceStyle();
   }
 
+  style += generateUserCustomCSS();
+
   return style;
 }