diff options
author | 2023-01-19 02:37:18 +0100 | |
---|---|---|
committer | 2023-01-19 01:37:18 +0000 | |
commit | db137f5db3bb908df6fa6bec2e35ac8d61b8c70a (patch) | |
tree | 60247bcd2708e43e370e46a78cad2c521755e259 | |
parent | 6.2.4-nightly.9 [skip ci] (diff) | |
download | ferdium-app-db137f5db3bb908df6fa6bec2e35ac8d61b8c70a.tar.gz ferdium-app-db137f5db3bb908df6fa6bec2e35ac8d61b8c70a.tar.zst ferdium-app-db137f5db3bb908df6fa6bec2e35ac8d61b8c70a.zip |
Add custom CSS support (#868)
Co-authored-by: André Oliveira <oliveira.andrerodrigues95@gmail.com>
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
-rw-r--r-- | README.md | 13 | ||||
-rw-r--r-- | src/features/appearance/index.ts | 9 |
2 files changed, 22 insertions, 0 deletions
@@ -28,6 +28,7 @@ | |||
28 | - [Screenshots](#screenshots) | 28 | - [Screenshots](#screenshots) |
29 | - [Download](#download) | 29 | - [Download](#download) |
30 | - [Migrating from Ferdi](#migrating-from-ferdi) | 30 | - [Migrating from Ferdi](#migrating-from-ferdi) |
31 | - [Styling](#styling) | ||
31 | - [Contributing](#contributing) | 32 | - [Contributing](#contributing) |
32 | - [Contributors ✨](#contributors-) | 33 | - [Contributors ✨](#contributors-) |
33 | 34 | ||
@@ -63,6 +64,18 @@ _Find answers to frequently asked questions on [ferdium.org/faq](https://ferdium | |||
63 | 64 | ||
64 | 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) | 65 | 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) |
65 | 66 | ||
67 | ## Styling | ||
68 | |||
69 | You can style Ferdium's UI with the `USER_DATA/Ferdium/config/custom.css` file. | ||
70 | |||
71 | > **Note** | ||
72 | > | ||
73 | > `USER_DATA`'s location depends on your platform: | ||
74 | > | ||
75 | > - **Windows**: `%APPDATA%` | ||
76 | > - **Linux**: `$XDG_CONFIG_HOME` or `~/.config/` | ||
77 | > - **MacOS**: `~/Library/Application Support` | ||
78 | |||
66 | ## Contributing | 79 | ## Contributing |
67 | 80 | ||
68 | Please read the [contributing guidelines](CONTRIBUTING.md) to setup your development machine and proceed. | 81 | 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'; | |||
2 | import { reaction } from 'mobx'; | 2 | import { reaction } from 'mobx'; |
3 | import TopBarProgress from 'react-topbar-progress-indicator'; | 3 | import TopBarProgress from 'react-topbar-progress-indicator'; |
4 | 4 | ||
5 | import { pathExistsSync, readFileSync } from 'fs-extra'; | ||
5 | import { isWindows, isLinux } from '../../environment'; | 6 | import { isWindows, isLinux } from '../../environment'; |
6 | import { | 7 | import { |
7 | DEFAULT_APP_SETTINGS, | 8 | DEFAULT_APP_SETTINGS, |
@@ -10,6 +11,7 @@ import { | |||
10 | SIDEBAR_SERVICES_LOCATION_CENTER, | 11 | SIDEBAR_SERVICES_LOCATION_CENTER, |
11 | SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT, | 12 | SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT, |
12 | } from '../../config'; | 13 | } from '../../config'; |
14 | import { userDataPath } from '../../environment-remote'; | ||
13 | 15 | ||
14 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; | 16 | const STYLE_ELEMENT_ID = 'custom-appearance-style'; |
15 | 17 | ||
@@ -34,6 +36,11 @@ function darkenAbsolute(originalColor, absoluteChange) { | |||
34 | return originalColor.lightness(originalLightness - absoluteChange); | 36 | return originalColor.lightness(originalLightness - absoluteChange); |
35 | } | 37 | } |
36 | 38 | ||
39 | function generateUserCustomCSS() { | ||
40 | const path = userDataPath('config', 'custom.css'); | ||
41 | return pathExistsSync(path) ? readFileSync(path).toString() : ''; | ||
42 | } | ||
43 | |||
37 | function generateAccentStyle(accentColorStr) { | 44 | function generateAccentStyle(accentColorStr) { |
38 | let accentColor; | 45 | let accentColor; |
39 | try { | 46 | try { |
@@ -421,6 +428,8 @@ function generateStyle(settings, app) { | |||
421 | style += generateOpenWorkspaceStyle(); | 428 | style += generateOpenWorkspaceStyle(); |
422 | } | 429 | } |
423 | 430 | ||
431 | style += generateUserCustomCSS(); | ||
432 | |||
424 | return style; | 433 | return style; |
425 | } | 434 | } |
426 | 435 | ||