Dark Mode Login Page for Code-Server

This repository provides a dark mode theme for the login page of code-server, along with VS Code logos. The theme enhances the login experience with a sleek, dark interface.

Preview

Features

• Dark Mode design
• Integrated VS Code branding for a consistent feel
• Customizable login page text (e.g., app name and welcome message)

Installation Instructions

Follow the steps below to install the dark mode theme on your code-server instance. Please note that after each code-server update or upgrade, this process will need to be repeated as code-server will overwrite the theme files.

Step-by-Step Installation

1. Download the repository archive and extract it into the usr (/usr/) directory. This will replace the original template files located in the code-server installation folder.

Download the theme

wget https://github.com/sickplanet/code-server-dark-mode-login-page/archive/refs/heads/main.zip

Extract the archive into the current directory

sudo unzip main.zip

Copy theme files

sudo cp -r "code-server-dark-mode-login-page-main/usr/"* "/usr/"

Remove the downloaded zip file

sudo rm main.zip

Remove extracted folder

sudo rm -rf code-server-dark-mode-login-page-main/

All of the above in one line command style

wget https://github.com/sickplanet/code-server-dark-mode-login-page/archive/refs/heads/main.zip &&
 sudo unzip main.zip &&
 sudo cp -r "code-server-dark-mode-login-page-main/usr/"* "/usr/" &&
 sudo rm -rf code-server-dark-mode-login-page-main/ && sudo rm main.zip

2. Add or modify the following lines in config.yaml:

app-name: VS Code (server)
welcome-text: Please enter your password to start coding

2.1 Example commands to modify config.yaml:

For a regular user:

nano /home/USER/.config/code-server/config.yaml

For root:

sudo nano /root/.config/code-server/config.yaml

Notes

• The app-name and welcome-text configurations allow you to personalize the login page with your own branding or a custom welcome message.
• Ensure you restart code-server after making changes to the config.yaml for them to take effect

3. Restarting Code-Server:

After applying the dark mode theme and making any customizations (e.g., modifying the config.yaml to add custom app-name and welcome-text), you need to restart code-server for the changes to take effect.

#Restart code-server with the following command:

sudo systemctl restart code-server

Notes:

• This step is essential to apply any changes, including the theme or text customizations.
• You will need to perform this step after reinstalling the theme if code-server is updated or upgraded, as the update will restore the default theme files.

Contributing

  Feel free to submit pull requests or open issues for feature requests, bug reports, or enhancements.