ful1e5 / fuchsia-cursor

First OpenSource port of FuchsiaOS's cursors for Linux and Windows.

First open source port of FuchsiaOS's cursors for Linux and Windows.

Notes

• All cursor's SVG files are found in svg directory or you can also find them on Figma.

• 2024-06-24: f3ca511 Partitioned cursor build configuration into multiple files according to platform: build.toml -> configs/win_lg.build.toml, configs/win_rg.build.toml, configs/win_xl.build.toml, configs/x.build.toml.

---

Cursor Sizes

Xcursor Sizes:

16 20 22 24 28 32 40 48 56 64 72 80 88 96

Windows Cursor Size:

size	Regular (× ²⁄₃)	Large (× ⁴⁄₅)	Extra-Large (× 1)
32	21.333 → 22	25.6 → 26	32
48	32	38.4 → 39	48
64	42.666 → 43	51.2 → 52	64
96	64	76.8 → 77	96
128	85.333 → 86	102.4 → 103	128

Colors

Fuchsia

• Outline Color - #FFFFFF (White)
• Base Color - #E11C79 (Fuchsia)

Fuchsia Amber

• Outline Color - #FFFFFF (White)
• Base Color - #FFA400 (Amber)

Fuchsia Red

• Outline Color - #FFFFFF (White)
• Base Color - #FF0000 (Red)

Fuchsia Pop!

• Outline Color - #FFFFFF (White)
• Base Color - #F8B572 (PopOS Orange)

How to get it

Easiest Way

You can download latest stable & development releases from Release Page.

Installing Fuchsia Cursor

Linux/X11

Installation:

tar -xvf Fuchsia.tar.gz                   # extract `Fuchsia.tar.gz`
mv Fuchsia ~/.icons/                      # Install to local users
sudo mv Fuchsia /usr/share/icons/         # Install to all users

Uninstallation:

rm ~/.icons/Fuchsia                       # Remove from local users
sudo rm /usr/share/icons/Fuchsia          # Remove from all users

Windows

Installation:

1. Unzip .zip file
2. Open unziped directory in Explorer, and right click on install.inf.
3. Click 'Install' from the context menu, and authorize the modifications to your system.
4. Open Control Panel > Personalization and Appearance > Change mouse pointers, and select Fuchsia Cursors.
5. Click 'Apply'.

Uninstallation:

Run the uninstall.bat script packed with the .zip archive

OR follow these steps:

1. Go to Registry Editor by typing the same in the start search box.
2. Expand HKEY_CURRENT_USER folder and expand Control Panel folder.
3. Go to Cursors folder and click on Schemes folder - all the available custom cursors that are installed will be listed here.
4. Right Click on the name of cursor file you want to uninstall; for eg.: Fuchsia Cursors and click Delete.
5. Click 'yes' when prompted.

Build From Source

Prerequisites

• Python version 3.7 or higher
• clickgen>=2.2.5 (pip install clickgen)
• yarn

Quick start

1. Install build prerequisites on your system
2. git clone https://github.com/ful1e5/fuchsia-cursor
3. cd fuchsia-cursor
4. yarn install
5. yarn generate
6. See Installing Fuchsia Cursor.

Getting Started

Once you have the build prerequisites installed, You can personalize colors, customize sizes, change target platforms, and more. This process involves using external tools, as this repository only contains SVG files and configuration for these tools:

• cbmp: Used for customizing colors and generating PNG files.
• ctgen: Used for customizing sizes and building XCursor and Windows Cursors.

You can refer to the README of each tool for more information on their command-line options.

Crafting Your Fuchsia Cursor

The process of creating custom cursor themes involves two main steps:

1. Rendering SVG files to PNG files.
2. Building cursor themes from PNG files.

Customize Colors

cbmp provides three options for changing colors:

1. -bc: Base color, which replaces the #00FF00 color in the SVG.
2. -oc: Outlined color, which replaces the #0000FF color in the SVG.
3. -wc (optional): Watch Background color, which replaces the #FF0000 color in the SVG.

npx cbmp [...] -bc "<hex>" -oc "<hex>" -wc "<hex>"

Alternatively, you can provide a JSON configuration file to render SVG files, which contains a sequence of cbmp commands:

npx cbmp render.json

Customize Sizes

Customize Windows Cursor size

To build Windows cursor with size 16:

ctgen configs/win_rg.build.toml -s 16 -d "bitmaps/Fuchsia" -n "Fuchsia" -c "First OpenSource port of FuchsiaOS Windows Cursors with size 16"

You can also customize output directory with -o option:

ctgen configs/win_xl.build.toml -s 16 -d "bitmaps/Fuchsia" -o "out" -n "Fuchsia" -c "First OpenSource port of FuchsiaOS Windows Cursors with size 16"

Customize XCursor size

To build XCursor with size 16:

ctgen configs/x.build.toml -s 16 -d "bitmaps/Fuchsia" -n "Fuchsia" -c "FuchsiaOS XCursors with size 16"

You can also assign multiple sizes to ctgen for XCursors build:

ctgen configs/x.build.toml -s 16 18 24 32 -d "bitmaps/Fuchsia" -n "Fuchsia" -c "FuchsiaOS XCursors"

Examples

Lets generate Fuchsia Cursor with green and black colors:

npx cbmp -d "svg" -o "bitmaps/Fuchsia-Hacker" -bc "#00FE00" -oc "#000000"

After rendering custom color you have to build cursor through ctgen:

• XCursor:

  ctgen configs/x.build.toml -d "bitmaps/Fuchsia-Hacker" -n "Fuchsia-Hacker" -c "Green and Black FuchsiaOS XCursors."

• Windows Regular Cursor:

  ctgen configs/win_rg.build.toml -d "bitmaps/Fuchsia-Hacker" -n "Fuchsia-Hacker" -c "Green and Black FuchsiaOS Regular Windows Cursors."

• Windows Large Cursor:

  ctgen configs/win_lg.build.toml -d "bitmaps/Fuchsia-Hacker" -n "Fuchsia-Hacker" -c "Green and Black FuchsiaOS Large Windows Cursors."

• Windows Extra Large Cursor:

  ctgen configs/win_xl.build.toml -d "bitmaps/Fuchsia-Hacker" -n "Fuchsia-Hacker" -c "Green and Black FuchsiaOS Extra Large Windows Cursors."

Afterwards, Generated theme can be found in the themes directory.

Fuchsia Gruvbox

npx cbmp -d "svg" -o "bitmaps/Fuchsia-Gruvbox" -bc "#282828" -oc "#EBDBB2"

ctgen configs/x.build.toml -d "bitmaps/Fuchsia-Gruvbox" -n "Fuchsia-Gruvbox" -c "Groovy FuchsiaOS XCursors."
ctgen configs/win_rg.build.toml -d "bitmaps/Fuchsia-Gruvbox" -n "Fuchsia-Gruvbox" -c "Groovy FuchsiaOS Windows Regular Cursors."
ctgen configs/win_lg.build.toml -d "bitmaps/Fuchsia-Gruvbox" -n "Fuchsia-Gruvbox" -c "Groovy FuchsiaOS Windows Large Cursors."
ctgen configs/win_xl.build.toml -d "bitmaps/Fuchsia-Gruvbox" -n "Fuchsia-Gruvbox" -c "Groovy FuchsiaOS Windows Extra Large Cursors."

Fuchsia Solarized Dark

npx cbmp -d "svg" -o "bitmaps/Fuchsia-Solarized-Dark" -bc "#002b36" -oc "#839496"

ctgen configs/x.build.toml -d "bitmaps/Fuchsia-Solarized-Dark" -n "Fuchsia-Solarized-Dark" -c "Solarized Dark FuchsiaOS XCursors."
ctgen configs/win_rg.build.toml -d "bitmaps/Fuchsia-Solarized-Dark" -n "Fuchsia-Solarized-Dark" -c "Solarized Dark FuchsiaOS Windows Regular Cursors."
ctgen configs/win_lg.build.toml -d "bitmaps/Fuchsia-Solarized-Dark" -n "Fuchsia-Solarized-Dark" -c "Solarized Dark FuchsiaOS Windows Large Cursors."
ctgen configs/win_xl.build.toml -d "bitmaps/Fuchsia-Solarized-Dark" -n "Fuchsia-Solarized-Dark" -c "Solarized Dark FuchsiaOS Windows Extra Large Cursors."

Fuchsia Solarized Light

npx cbmp -d "svg" -o "bitmaps/Fuchsia-Solarized-Light" -bc "#839496" -oc "#002b36"

ctgen configs/x.build.toml -d "bitmaps/Fuchsia-Solarized-Light" -n "Fuchsia-Solarized-Light" -c "Solarized Light FuchsiaOS XCursors."
ctgen configs/win_rg.build.toml -d "bitmaps/Fuchsia-Solarized-Light" -n "Fuchsia-Solarized-Light" -c "Solarized Light FuchsiaOS Windows Regular Cursors."
ctgen configs/win_lg.build.toml -d "bitmaps/Fuchsia-Solarized-Light" -n "Fuchsia-Solarized-Light" -c "Solarized Light FuchsiaOS Windows Large Cursors."
ctgen configs/win_xl.build.toml -d "bitmaps/Fuchsia-Solarized-Light" -n "Fuchsia-Solarized-Light" -c "Solarized Light FuchsiaOS Windows Extra Large Cursors."

Fuchsia Dracula

npx cbmp -d "svg" -o "bitmaas/Fuchsia-Dracula" -bc "#282a36" -oc "#f8f8f2"

ctgen configs/x.build.toml -d "bitmaps/Fuchsia-Dracula" -n "Fuchsia-Dracula" -c "Dracula FuchsiaOS XCursors."
ctgen configs/win_rg.build.toml -d "bitmaps/Fuchsia-Dracula" -n "Fuchsia-Dracula" -c "Dracula FuchsiaOS Windows Regular Cursors."
ctgen configs/win_lg.build.toml -d "bitmaps/Fuchsia-Dracula" -n "Fuchsia-Dracula" -c "Dracula FuchsiaOS Windows Large Cursors."
ctgen configs/win_xl.build.toml -d "bitmaps/Fuchsia-Dracula" -n "Fuchsia-Dracula" -c "Dracula FuchsiaOS Windows Extra Large Cursors."

Testing Cursor

There are several websites that allow you to test your cursor states by hovering over buttons. This can be very useful when developing or verifying the behavior of a cursor. The following websites cover many of the most commonly used cursors, although they may not include all available options.

• Cursor-Test
• Mozilla CSS Cursor

For a blueprint for creating XCursors, you may also want to refer to Cursor-demo.

Bugs

Bugs should be reported here on the Github issues page.

Getting Help

You can create a issue, I will help you.

Contributing

Check CONTRIBUTING.md, any suggestions for features and contributions to the continuing code masterelopment can be made via the issue tracker or code contributions via a Fork & Pull requests.