A palette editor for use when making TWiLightMenu++ skins. Creates the palette.bin files that go in the palettes folder when using the UserPalette options.
A palette.bin file consists of 16 palettes, corresponding to the DS profile colors. The order is Gray-Blue, Brown, Red, Pink, Orange, Yellow, Lime, Green, Dark Green, Turquoise, Light Blue, Blue, Dark Blue, Violet, Purple, and Magenta. (This is also visible in the favicon , in left-to-right top-to-bottom order).
The "Palette Collection" section in the middle of the page is your view of all the palettes in your palette file. The first color in each palette is reserved for transparency, and is marked with the '🚫' emoji.
Click any color slot to select it, then adjust the color with the color picker to the right. You can alternatively enter color codes in either BGR15 or standard RGB using the text fields. Whatever method you use, the result will be converted to BGR15 for use in the palette file.
To preview your color palettes, import a base image using the "Set Base Image" button. It must be either a .bmp or .grf image. This will load the image and show you its original palette. When you mouse over a palette in your palette set, the preview image will update to use that palette. You can also hover over the base palette to see the original image again.
With the "Copy to All" button under the base palette, you can copy the palette of your base image to every palette in the collection. This may speed up the process if you have an image where only a few colors will need to be changed in each palette.
You can also generate a palette using a recolored version of your base image. In the "Set Palette via Recolored Image" section, use the selector to choose the target palette (they are listed by color name). Click the button to the right and select your recolored version of the base image (these do not have to be .bmp, just any regular image file will do). Preview the palette afterward to ensure it was generated correctly.
When you're finished making changes, click the "Export palette.bin" button to download your palette set. Place this file in the palettes folder of your skin and name it after the image it is for, replacing the extension with .bin. Be sure to enable the corresponding UserPalette option for that image in your theme.ini.
Enter font mode by clicking the "Switch to Font Mode" button in the Palette Collection. This mode is for creating smaller palette files used with NFTR fonts (currently this is only for username.bin). It also has a preview feature! Load in a .nftr file to see a text box and preview appear. Type in the text box to update the preview. Like with images, hover over the palettes with your mouse to preview them with your text.
With Deno installed, run deno task build to build, then serve via the http server of your choice. You can also run deno task serve to run a development server with file watching and live reload.
Deno is mostly here in the project workspace just so that I can get types on http imports (Preact in this case) while editing in VSCode. Otherwise, the project doesn't require Deno at all. You could build with esbuild normally by recreating the same commands used in the Deno tasks.