Add dark mode

[MiguelHigueraDev]

Light mode is bad for the eyes, so dark mode is always preferred.

Edit all components' styling to prefer darker colors instead of pure white.

[Ziphozenkosimthombe]

can I jump on it?

[MiguelHigueraDev]

can I jump on it?

Sure, you can!

Make sure windows have a dark shade of gray (like #212121) and all text is white.

Thanks for your contribution!

[Ziphozenkosimthombe]

okay so when i run it on my local machine i just get some errors saying "don't have the TrackList.tsx"

[MiguelHigueraDev]

Sorry for the late reply. Yeah, that's because of copyright reasons, I didn't include the tracklist file.

You can fix it by editing TrackList.example.ts so it looks like this (just copy the contents):

const TrackList: Track[] = [
    {
        name: "Cradles",
        artist: "Sub Urban",
        src: "./songs/cradles.mp3",
        coverArt: "./covers/cradles.jpg",
        lyrics: [
            {
                "startTimeMs": 12660,
                "text": "Enter lyrics here",
            },
            {
                "startTimeMs": 18690,
                "text": "With their timestamps in milliseconds",
            },
            {
                "startTimeMs": 24720,
                "text": "One",
            },
            {
                "startTimeMs": 30780,
                "text": "Two",
            },
            {
                "startTimeMs": 36780,
                "text": "Three",
            },
        ]
    },
    {
        name: "Bones",
        artist: "Imagine Dragons",
        src: "./songs/bones.mp3",
        coverArt: "./covers/bones.jpg",
    },
    {
        name: "Let It Be",
        artist: "The Beatles",
        src: "./songs/letitbe.mp3",
        coverArt: "./covers/letitbe.jpg",
    },
];

export interface Track {
    name: string;
    artist: string;
    src: string;
    coverArt: string;
    lyrics?: Lyrics[];
}

 export interface Lyrics {
    startTimeMs: number;
    text: string;
}

Rename the file to TrackList.ts and it should work.

If you want to test it with real songs and cover art you can add them in their respective folders (songs and covers) and add their paths to the TrackList array.

[Ziphozenkosimthombe]

okay no problem thanks

[Ziphozenkosimthombe]

so the dark mode button I should put it on the top right corner or ?

[MiguelHigueraDev]

so the dark mode button I should put it on the top right corner or ?

I think it would be better in the StartMenu.

You could put it next to the power button.

For the icon, I'd suggest using IconMoon and IconSun from @tabler/icons-react

import { IconMoon, IconSun } from "@tabler/icons-react";

<IconMoon />
<IconSun />

[MiguelHigueraDev]

Saw that you deleted your fork. I'm going to implement it in case you are not interested anymore.

Thanks for giving it a shot anyway!

[coderight1]

Hi @MiguelHigueraDev i would like to work on this.

[MiguelHigueraDev]

@coderight1 Sure you can, thanks for your collaboration!

Just make sure to follow the instructions I provided to the other user. If you have any questions feel free to ask.