Snowy extension: change color of snowflakes!

Hello,

I know that some of you might laugh at what you are about to read, yet it was bothering me for more than a year:

I chose to install the snowy extension, which spices up a little bit my desktop during winter days.

I know that some of you might be fed up with snow, yet some of us do not see snow so often.

Now, for some reason, some gnome shell themes were showing the snowflakes black instead of white and I wanted to change that.

In order to do so I did the following (with the aid of chatgpt):

  1. go to ~/.local/share/gnome-shell/extensions/snowy@exposedcat/lib

  2. find the file snowflake.js and add the following code:

import Clutter from ‘gi://Clutter’;
import St from ‘gi://St’;
import * as Main from ‘resource:///org/gnome/shell/ui/main.js’;
import { Utils } from ‘./utils.js’;

export class Snowflake {label;rotationAngle;duration;

constructor(settings) {
    const icons = settings.get_string('flake-icons').split(',');
    const iconNumber = Utils.random(0, icons.length - 1);
    const icon = icons[iconNumber];

    this.label = new St.Label({
        text: icon,
        style_class: 'snowflake'
    });

    // Set color to white and font size directly
    const minSize = settings.get_int('min-size');
    const maxSize = settings.get_int('max-size');
    const size = Utils.random(minSize, maxSize);
    this.label.set_style(`color: white; font-size: ${size}px;`);

    // Set rotation
    const side = Utils.random(0, 1) || -1;
    const minRotation = settings.get_int('min-rotation-angle');
    const maxRotation = settings.get_int('max-rotation-angle');
    this.rotationAngle = Utils.random(minRotation, maxRotation) * side;

    // Set duration
    const minDuration = settings.get_int('min-fall-duration');
    const maxDuration = settings.get_int('max-fall-duration');
    this.duration = Utils.random(minDuration, maxDuration);
}

destroy() {
    this.label.remove_all_transitions();
    Main.layoutManager.uiGroup.remove_child(this.label);
}

fall(onCompleteFunc, maxX, maxY) {
    const xPosition = Utils.random(0, maxX);
    Main.layoutManager.uiGroup.add_child(this.label);
    this.label.set_position(xPosition, -50);
    this.label.ease({
        y: maxY,
        x: xPosition,
        rotation_angle_z: this.rotationAngle,
        duration: this.duration,
        mode: Clutter.AnimationMode.LINEAR,
        onComplete: () => onCompleteFunc(this.destroy.bind(this))
    });
}
}
  1. Log out and back in and snowflakes should be white! :snowflake:

Regards!