Firefly MAL Theme

This site is to showcase its properties for the theme.

Changelog

All of the mentioned properties have to be inside of the :root.

color-scheme

As of Version 0.2, you can now change the theme by just using this property.


/* If you want to use only light mode: */
color-scheme: light;
  
/* If you want to use only dark mode: */
color-scheme: dark;
  
/* If you want to use both of the themes at once (for accessibility): */
color-scheme: light dark;

--font-text

This property is used to change the font of the entire list.

In order to set it up properly, you have to first import the font (you have to do this online only).

As an example, we'll use Google Fonts. The font we picked is Albert Sans.

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');
  
--font-text: "Albert Sans";

If your font does take longer to load, you have to add fallbacks:

--font-text: "Albert Sans", "Verdana", system-ui;

/*
  In this example, the very first font that'll load is "Albert Sans",
  which is the font that we've imported using Google Fonts.

  If that font doesn't load right away, it'll use "Verdana" as a fallback.

  However, if "Verdana" doesn't exist on the user's machine,
  then it'll fallback to *system-ui*. (which is the browser's way of checking
  what the font the OS defaults to)
*/

--font-icon

This property is used to change the icon pack. It is mandatory to use one in order to get the buttons to show up properly.

If you don't like the default icon pack (Material Icons), you can always choose a different icon pack, and use that instead.

For example, we can use Font Awesome:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');
    
--font-icon: "Font Awesome 7 Free";

Then, you can use them anywhere in your list. However, it is best to change the default values as well for the best desired effect.

Here are the default icons that you can replace at the moment:

--icon-check
--icon-close
--icon-search
--icon-edit
--icon-all_anime
--icon-watching
--icon-completed
--icon-onhold
--icon-plantowatch
--icon-add
--icon-quick-add
--icon-anime-list
--icon-manga-list
--icon-statistics
--icon-history
--icon-export
--icon-logout
--icon-settings
--icon-filter

In this example, we'll be replacing the search icon:

/* 
  You do need to find the ID of the icon first.
  In this case, it is: *\f002*
*/

--icon-search: '\f002';
This may not work on some icon packs.

--side-logo

This property changes the image right next to the main logo. 

--side-logo: url("https://upload-os-bbs.hoyolab.com/upload/2024/07/10/268570541/46445c2d5d80ab898ec1dcccaf44930e_2037043727854361374.png?x-oss-process=image%2Fresize%2Cs_1000%2Fauto-orient%2C0%2Finterlace%2C1%2Fformat%2Cwebp%2Fquality%2Cq_70");

/* This is the default image */
This has to be a valid image url, otherwise it won't work.

--clr-primary --clr-secondary

These properties determine the main accent colors for the list.

It doesn't have to be Firefly colors; it can be any color you wish.

--clr-primary: red;
--clr-secondary: orange;

/* On the list's status page, it is now a gradient
consisting of those red and orange colors. */

--clr-base-white --clr-base-black

These are default (base) values for black and white. They can be interchangeable depending on user's theme on the OS level or on the website level.

YOU DO NOT NEED TO CHANGE THESE VALUES. If anything, they need to be modified just a tiny amount if you want different shades of white and/or black.

Before Version 0.2, those properties were named --clr-def-white and --clr-def-black

--clr-gray-< 10-50 >

These properties determine the different shades of gray.

You can only do 10 different gray colors, 5 for each theme (light/dark).

This property has been deprecated as of Version 0.2.
While you can still modify those properties, we recommend using the --clr-gray property instead, to change all of the gray colors at once.

--clr-gray

This property allows you to modify all of the gray color properties inside of the list.

It is recommended that you leave the value as default for the best desired effect.

--clr-gray: var(--clr-black);

/* Default */
If you want the property to work for dark/light themes, add the light-dark() function built in modern CSS. 
--clr-gray: light-dark(gray, black);
  
/* First value is for the light theme,
   second value is for the dark theme. */

Then, later on, when you want to use the gray colors on the list, just add var(--clr-gray-< number >) to add it.

The default amount of gray colors you can add is 10.

--clr-score-< 1-10 >

These properties determine the different colors for each score given by the list's user.

It is recommended that you leave the values as the default.

--clr-stat-< watching-completed-onhold-dropped-plantowatch >

These properties determine the different colors for each stat of a list item.

It is recommended that you leave the values as the default.

--font-size-table

This property changes the size of the font inside of the list table.

It is recommended that you leave the value as the default.