Shikai

Modern lightdm webkit2 theme

Index

Description []

Sleek lightdm webkit2 theme that focuses on looks with performance in mind

Features []

The theme features:

• Draggable windows
• Multi-monitor support
• Multi-language support
• Custom time and date formats
• Saving configurations as sub-themes
• Background shuffle on background click
• Sleek animations and on-hover effects
• Graphical on-theme style configuration
• Graphical on-theme behaviour configuration
• Custom backgrounds configured via web-greeter.yml
• Idle login window auto-hiding at x seconds of inactivity
• Default user and session configured via web-greeter.yml
• Background synchronization when using the multi-headed mode
• Custom user images configured via a .face image on user home folders

Live Demo []

https://thewisker.github.io/Shikai

[!TIP] Demo password: password

[!NOTE] Demo wallpapers do not properly fit on some aspect ratios, thus looking out of place, but that can be fixed when the theme is installed by changing the wallpapers for ones that have the correct aspect ratio

Screenshots []

Install []

There are several ways to install the theme, whichever you use, do not forget to also follow the steps in General.

General

After having installed the theme, you will need to follow these steps to get it running:

1. Select the greeter you are using in the /etc/lightdm/lightdm.conf file, which hosts LightDM's configuration:
   • Under [Seat:*], set greeter-session to the one you use: greeter-session=web-greeter
2. Select the Shikai theme in the /etc/lightdm/web-greeter.yml file, which hosts the greeter's configuration:
   • Under branding, set theme to shikai: theme: shikai
3. Optionally, configure the environment to your liking, as explained in configuration

[!NOTE] You can skip any step you have already completed previously

[!WARNING] When selecting a greeter-session have in mind that Shikai only supports WebGreeter, NodyGreeter and SeaGreeter as greeters

Arch Linux

You can install Shikai from the AUR repository:

• Package shikai-theme:

[!TIP] For information on how to install an AUR package read this wiki

Script

Follow the steps:

1. Download and unpack a release and cd into its root folder.
2. Execute the following bash script from the repo root directory:
   • ./scripts/install.sh.

Manual

Follow the steps:

1. Download and unpack a release, then, cd into its root folder.
2. Locate, under the dist directory, the index.html and monitor.html files.
3. In said files, search and replace the string window.__is_debug = true; with window.__is_debug = false;.
4. Copy the contents of the dist directory to /usr/share/web-greeter/themes/shikai.

Uninstall []

The theme is uninstalled in different ways depending on how it was installed.
For a complete uninstall, one must also follow the steps in General.

General

After having uninstalled the theme you will, optionally, need to follow some steps to not lose functionality:

• If keeping the Greeter, select another theme in the /etc/lightdm/web-greeter.yml file which hosts the greeter's configuration:
  • Under branding, set theme to the new theme: theme: which-theme
• If removing the Greeter but keeping LightDM, select another greeter in the /etc/lightdm/lightdm.conf file which hosts LightDM's configuration:
  • Under [Seat:*], set greeter-session to the new greeter: greeter-session=which-greeter
• If removing LightDM, make sure to set up a new way to login into the system.

Arch Linux

Simply uninstall the shikai-theme package.

Script & Manual

Simply remove the /usr/share/web-greeter/themes/shikai folder.

Update []

To update the theme simply install the new version overwriting the old version.

[!TIP] The theme localStorage can be deleted from the on-theme configuration

[!CAUTION] Failure to delete localStorage before updating to a version which introduces breaking changes will result in errors on theme load

Configuration []

On-Theme

The configuration button becomes avaiable by hovering over the top-left corner of the window.
The behaviour and style settings are saved locally only when the configuration panel gets closed.
The themes configuration gets saved on theme creation, deletion and activation.

[!NOTE] Make sure to delete this configuration when updating to a Shikai version that introduces breaking changes

Greeter

The configuration for the greeter resides in /etc/lightdm/web-greeter.yml

Shikai uses the following entries from the configuration:

• Under branding:

| Key | Description | Recommended Value | Shikai-only | Type | |---------------------------|---------------------------------------|-----------------------------------------------------------------|-------------------|--------------| | backgroundimagesdir | directory where wallpapers are stored | /usr/share/web-greeter/themes/shikai/assets/media/wallpapers | | str | | logo_image | directory where logos are stored | /usr/share/web-greeter/themes/shikai/assets/media/logos | | str | | user_image | default image for users that lack one | /usr/share/web-greeter/themes/shikai/assets/media/profile.jpg | | str |

• Under greeter:

| Key | Description | Recommended Value | Shikai-only | Type | |-------------------------|---------------------------------------------------------------------------|-------------------------|-------------------|--------------| | theme | greeter theme to use | shikai | | str | | icon_theme | cursor icon theme to use | | | str | | default_user | default user to select initially | | [X] | str | | default_session | default session to select initially | | [X] | str | | screensaver_timeout | blank the screen after this many seconds of inactivity | | | int | | detectthemeerrors | provide an option to load a fallback theme when theme errors are detected | True | | bool | | debug_mode | enable debug mode for the greeter as well as greeter themes | False | | bool | | secure_mode | don't allow themes to make remote http requests | True | | bool |

• Under layouts:

List of preferred keyboard layouts to use.
Shikai only uses the first layout as, at the moment, it does not provide a way to switch layout on-theme.

[!TIP] Consider using ACLs for a more fine-grained control over permissions

[!WARNING] Paths and assets loaded by the theme must be accessible to the lightdm system user account with read and execute permissions

LightDM

LightDM can be configured to turn on the numlock by default:

1. Install numlockx

   • Arch:

     • Install the numlockx package

     

- ***Other***:
  - **Install** it by *other means*

      ![GitHub Release](https://img.shields.io/github/v/release/rg3/numlockx?display_name=tag&style=for-the-badge&logo=github&label=numlockx)

1. Once installed, edit /etc/lightdm/lightdm.conf
   • Under [Seat:*], set greeter-setup-script to: greeter-setup-script=/usr/bin/numlockx on

Working Environment []

When developing Shikai, one must have a proper working environment set up.
To initalize said environment, one must have installed npm and run npm install.

The repo comes with some scripts to facilitate the development process:

• To package the development version run npm run dev or ./scripts/development.sh
• To package the production version run npm run build or ./scripts/production.sh
• To package the development version on source change run npm run watch or ./scripts/watch.sh
• To package the development version on source change and serve said package locally run npm run server or ./scripts/server.sh

[!NOTE] Scripts must be run from the repo's root directory

[!WARNING] If you run npm update you are almost guaranteed to end up with package breakages, so just don't.
If you did, delete ./node_modules/ and replace both ./package.json and ./package-lock.json with the ones in the repo.

Dependencies []

Buildtime

The theme buildtime dependencies are listed in the ./package.json file.

Runtime

The theme depends on web-greeter, nody-greeter or sea-greeter and its respective dependencies, plus lightdm.

Contributions []

First and foremost, all contributions are welcome!
The steps involved when making a contribution are explained in the CONTRIBUTING.md file.
We look forward to your contributions!

• The contributors list is located here.

Translations []

First and foremost, as with contributions, all translations are also welcome!
The steps involved when making a translation are explained in the CONTRIBUTING.md file.
More specific steps can be found in the CONTRIBUTING.md file in the /src/lang folder.
We look forward to your translations!

• The translators list is located here.

Discussions []

The following spaces are provided to discuss: - Ideas for future improvements in here - Questions you want to ask in here - Screenshots you want to share in here

Notes []

• Missing linux distro logo? Submit a pull request!
• Missing language? Submit a pull request including it in ./src/lang! Further details here.
• Have a really cool wallpaper to add to the live demo? Submit a pull request!
• Undefined behaviour when adding non-browser-compliant images and non-image files to the wallpapers directory

Troubleshooting []

Profile image not loading

If you have added a .face image to you home folder and it does not load on-theme, it is probably due to a lack of permisions for the lightdm user on the .face file. Thus, ensure the image and its parent folder have read and execute permissions for the lightdm user, either by having them set for others or by using ACLs.

If this does not solve the issue, you can try the following steps:

1. Copy the .face image to /var/lib/AccountsService/icons/ renaming it to the desired user's name.
2. Create the configuration file /var/lib/AccountsService/users/<username> if it does not exist.
3. Add the line Icon=/var/lib/AccountsService/icons/<username> to the configuration file.

As a last resort, if none of these solutions work you can set a default user image as explained here under the Greeter section.

[!NOTE] Replace <username> with the desired user's username

Incomplete loading

On the rare case that the demo or the theme itself only load the backgrounds or do not load the settings,
it is most probably due to a recent update that contains changes to the settings JSON structure.

This can be fixed by either: - Looking at the errors in the developer console and manually adding the missing keys and values - Deleting the page's localStorage

Metrics []

License []

Code of Conduct []

This project follows the Contributor Covenant Code of Conduct.

Author []

TheWisker