🎨 [Playground] Alternative color themes for ElegantFin

[lscambo13]

Hey everyone 👋

A few of you have asked about experimenting with different color combinations in ElegantFin. Until now, customizing colors wasn’t very well documented, so I’ve put together a basic dark theme template to make things easier and more fun to explore.

✨ Can you come up with alternative color themes for ElegantFin?

Use this thread as a playground to experiment with new color palettes, share your custom themes, and discuss ideas and get feedback from other users.

If you’re not familiar with hsla(), this guide will help you get started:
👉 https://www.w3schools.com/css/css_colors_hsl.asp

🧩 Below is a starter dark theme template you can tweak and build on.

:root {
    /* Gradient points */
    --darkerGradientPoint: hsla(0, 0%, 0%, 1);
    --darkerGradientPointAlpha: hsla(0, 0%, 0%, 0.85);

    --lighterGradientPoint: hsla(0, 0%, 7%, 1);
    --lighterGradientPointAlpha: hsla(0, 0%, 7%, 0.85);

    /* Header / drawer */
    --headerColor: hsla(0, 0%, 7%, 0.8);
    --drawerColor: hsla(0, 0%, 7%, 0.9);

    --headerColorGradient:
        linear-gradient(
            180deg,
            hsla(0, 0%, 7%, 0.95) 30%,
            55%,
            transparent 90%
        );

    /* Borders */
    --borderColor: hsla(0, 0%, 32%, 1);
    --darkerBorderColor: hsla(0, 0%, 22%, 1);
    --lighterBorderColor: hsla(0, 0%, 100%, 0.2);

    /* Selectors */
    --selectorBackgroundColor: hsla(0, 0%, 27%, 1);
    --selectorBackgroundColorAlpha: hsla(0, 0%, 27%, 0.5);

    /* Buttons */
    --btnMiniPlayColor: hsla(0, 0%, 0%, 0.8);
    --btnMiniPlayBorderColor: hsla(0, 0%, 30%, 0.8);

}

[datwildfire]

Very cool, keep it coming legend!

[caela-uk]

thank you so much

[Brramble]

Here is a charcoal grey palette, for those wanting something a bit lighter:

:root {
    /* Gradient points - Deep charcoal base */
    --darkerGradientPoint: hsla(220, 10%, 12%, 1);
    --darkerGradientPointAlpha: hsla(220, 10%, 12%, 0.85);

    --lighterGradientPoint: hsla(220, 10%, 16%, 1);
    --lighterGradientPointAlpha: hsla(220, 10%, 16%, 0.85);

    /* Header / drawer - Slightly lighter for depth */
    --headerColor: hsla(220, 10%, 18%, 0.8);
    --drawerColor: hsla(220, 10%, 15%, 0.9);

    --headerColorGradient: 
        linear-gradient(
            180deg, 
            hsla(220, 10%, 15%, 0.95) 30%, 
            55%, 
            transparent 90%
        );

    /* Borders - Low contrast subtle lines */
    --borderColor: hsla(220, 5%, 25%, 1);
    --darkerBorderColor: hsla(220, 5%, 20%, 1);
    --lighterBorderColor: hsla(0, 0%, 100%, 0.1);

    /* Selectors - Soft grey-blue */
    --selectorBackgroundColor: hsla(220, 8%, 22%, 1);
    --selectorBackgroundColorAlpha: hsla(220, 8%, 22%, 0.5);

    /* Buttons */
    --btnMiniPlayColor: hsla(220, 10%, 10%, 0.8);
    --btnMiniPlayBorderColor: hsla(220, 5%, 30%, 0.8);
    
    /* Primary Action / Submit Button */
    --btnSubmitColor: hsla(220, 10%, 25%, 1);
    --btnSubmitHoverColor: hsla(220, 10%, 30%, 1);

    /* Checkboxes */
    --checkboxCheckedBgColor: hsla(220, 20%, 35%, 1);

    /* Submit Button Border */
    --btnSubmitBorderColor: hsla(220, 10%, 35%, 1);
}

[chrickers]

Don't know if this is worth sharing, but I wanted something dark/gray-blueish:

--darkerGradientPoint: hsla(210, 12%, 10%, 1);
--darkerGradientPointAlpha: hsla(210, 12%, 10%, 0.85);

--lighterGradientPoint: hsla(210, 12%, 16%, 1);
--lighterGradientPointAlpha: hsla(210, 12%, 16%, 0.85);
   
--headerColor: hsla(210, 12%, 10%, 0.8);
--drawerColor: hsla(210, 12%, 12%, 0.95);

--borderColor: hsla(210, 14%, 28%, 1);
--darkerBorderColor: hsla(210, 14%, 22%, 1);
--lighterBorderColor: hsla(210, 10%, 92%, 0.25);

--selectorBackgroundColor: hsla(210, 22%, 18%, 1);
--selectorBackgroundColorAlpha: hsla(210, 22%, 18%, 0.5);

--btnMiniPlayColor: hsla(0, 0%, 0%, 0.85);
--btnMiniPlayBorderColor: hsla(210, 18%, 30%, 0.85);

--headerColorGradient:
linear-gradient(
180deg,
hsla(210, 12%, 10%, 0.96) 30%,
55%,
transparent 90%
);

[MartSchilt]

For anyone who's wondering what the default values of ElegantFin as of right now are. They are as follows:

:root {
    /* Gradient points */
    --darkerGradientPoint: rgb(17, 24, 39);
    --darkerGradientPointAlpha: rgba(17, 24, 39, .85);

    --lighterGradientPoint: rgb(29, 38, 53);
    --lighterGradientPointAlpha: rgba(29, 38, 53, .85);

    /* Header / drawer */
    --headerColor: rgba(30, 40, 54, .8);
    --drawerColor: rgba(30, 40, 54, .9);

    --headerColorGradient:
        linear-gradient(
            180deg,
            rgba(30, 40, 54, .95) 30%,
            55%,
            transparent 90%
        );

    /* Borders */
    --borderColor: rgb(71, 80, 92)
    --darkerBorderColor: rgb(49, 55, 63);
    --lighterBorderColor: rgba(255, 255, 255, .2);

    /* Selectors */
    --selectorBackgroundColor: rgb(55, 65, 81);
    --selectorBackgroundColorAlpha: rgba(55, 65, 81, .5);

    /* Buttons */
    --btnMiniPlayColor: rgb(41, 154, 93);
    --btnMiniPlayBorderColor: rgb(50, 167, 105);
    --btnDeleteColor: rgb(169, 29, 29);
    --btnDeleteBorderColor: rgb(217, 84, 84);
    --btnSubmitColor: rgb(61, 54, 178);
    --btnSubmitBorderColor: rgb(117, 111, 226);
}

Also you don't need to use hsl or rgb. You can use any valid css value!

[LordRofl]

Just wanted to ask about it! Thanks!

[harlsofallthings]

Hi, is there any explanation as to what css values correspond with what element? Some of them I can sort of understand but changing the values often doesn't produce the desired result so they get a little confusing.

[datwildfire]

Which part specifically? can try to help

[TwistedZeon]

Is it possible to change the Count Indicators?

[TwistedZeon]

I figured it out, this is what I've got going so far but I'm really happy with how it's turning out!

@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");
:root{
  --extraCardButtonsVisibility: block;
}
.countIndicator,.playedIndicator {
    background: #9861c4 !important;
}
.playstatebutton-icon-played {
    color: #9861c4 !important;
}
:root {
    /* Gradient points */
    --darkerGradientPoint: hsla(0, 0%, 0%, 1);
    --darkerGradientPointAlpha: hsla(0, 0%, 0%, 0.85);

    --lighterGradientPoint: hsla(0, 0%, 7%, 1);
    --lighterGradientPointAlpha: hsla(0, 0%, 7%, 0.85);

    /* Header / drawer */
    --headerColor: hsla(0, 0%, 7%, 0.8);
    --drawerColor: hsla(0, 0%, 7%, 0.9);

    --headerColorGradient:
        linear-gradient(
            180deg,
            hsla(0, 0%, 7%, 0.95) 30%,
            55%,
            transparent 90%
        );

    /* Borders */
    --borderColor: hsla(0, 0%, 32%, 1);
    --darkerBorderColor: hsla(0, 0%, 22%, 1);
    --lighterBorderColor: hsla(0, 0%, 100%, 0.2);

    /* Selectors */
    --selectorBackgroundColor: hsla(0, 0%, 27%, 1);
    --selectorBackgroundColorAlpha: hsla(0, 0%, 27%, 0.5);

    /* Buttons */
    --btnMiniPlayColor: #9861c4;
    --btnMiniPlayBorderColor: hsla(0, 0%, 30%, 0.8);

}

[eshaane]

AMOLED Burgundy (No gradient)

.root {
  --darkerGradientPoint: #000000;
  --darkerGradientPointAlpha: #000000;
  --lighterGradientPoint: #000000;
  --lighterGradientPointAlpha: #000000;
  --headerColorGradient: none;   
  --headerColor: #000000;
  --drawerColor: #000000;
  --borderColor: hsla(350, 40%, 20%, 1);
  --darkerBorderColor: hsla(350, 40%, 15%, 1);
  --lighterBorderColor: hsla(350, 50%, 30%, 0.3);

  --selectorBackgroundColor: hsla(350, 30%, 15%, 1);
  --selectorBackgroundColorAlpha: hsla(350, 30%, 15%, 0.5);

  --btnMiniPlayColor: hsla(350, 70%, 30%, 1);
  --btnMiniPlayBorderColor: hsla(350, 60%, 25%, 0.8);

  --btnSubmitColor: hsla(350, 70%, 30%, 1);
  --btnSubmitHoverColor: hsla(350, 70%, 40%, 1);
  --btnSubmitBorderColor: hsla(350, 50%, 20%, 1);
  
  --checkboxCheckedBgColor: hsla(350, 70%, 30%, 1);
}

.countIndicator, .playedIndicator, .mediaSourceIndicator {
    background: hsla(350, 70%, 30%, 1) !important;
}
.playstatebutton-icon-played {
    color: hsla(350, 70%, 30%, 1) !important;
}
.backgroundContainer, .dialog, html {
    background-color: #000000 !important;
}

[toheed2z]

not look as it in screenshot

[eshaane]

Could you explain what's different?

[jakub-antos]

Black

:root {
    /* Gradient points */
    --darkerGradientPoint: hsla(0, 0%, 0%, 1);
    --darkerGradientPointAlpha: hsla(0, 0%, 0%, 0.85);

    --lighterGradientPoint: hsla(0, 0%, 3%, 1);
    --lighterGradientPointAlpha: hsla(0, 0%, 3%, 0.85);

    /* Header / drawer */
    --headerColor: hsla(0, 0%, 2%, 0.8);
    --drawerColor: hsla(0, 0%, 2%, 0.9);

    --headerColorGradient:
        linear-gradient(
            180deg,
            hsla(0, 0%, 2%, 0.95) 30%,
            hsla(0, 0%, 0%, 0.9) 55%,
            transparent 90%
        );

    /* Borders */
    --borderColor: hsla(0, 0%, 18%, 1);
    --darkerBorderColor: hsla(0, 0%, 12%, 1);
    --lighterBorderColor: hsla(0, 0%, 100%, 0.1);

    /* Selectors */
    --selectorBackgroundColor: hsla(0, 0%, 15%, 1);
    --selectorBackgroundColorAlpha: hsla(0, 0%, 15%, 0.5);

    /* Buttons */
    --btnMiniPlayColor: hsla(0, 0%, 0%, 0.8);
    --btnMiniPlayBorderColor: hsla(0, 0%, 18%, 0.8);
}

[bharathreddyd39]

How to make the movie page look like as per the image. Need help please

[lscambo13]

This is the TV layout. You can switch to it from Settings > Display.

[Krafting]

Any way we can enable it for Desktop layout too?

[vin22863589]

Here is a background featuring a blue-and-purple gradient, similar to the Jellyfin logo.

  --colorOverlayMoviesCover: rgba(20, 80, 100, 5.0);
  --urlMoviesCover: url('https://s.yimg.com/ny/api/res/1.2/BLYlVSEmWAH2Lj0Z0xSHQw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTk2MDtoPTU0MDtjZj13ZWJw/https://media.zenfs.com/en/cinemablend_388/6695caf27e247b1de952e35ade38a42c');
}
:root {
  /* Gradient points */
  --darkerGradientPoint: hsla(285, 50%, 25%, 1); /* Deep Purple */
  --darkerGradientPointAlpha: hsla(285, 50%, 25%, 0.8);
  --lighterGradientPoint: hsla(210, 80%, 30%, 1); /* Deep Blue */
  --lighterGradientPointAlpha: hsla(210, 80%, 30%, 0.8);

  /* Header / drawer */
  --headerColorGradient: none;
  --headerColor: hsla(210, 80%, 20%, 0.9);
  --drawerColor: hsla(285, 50%, 20%, 0.95);

  /* Borders */
  --borderColor: hsla(210, 30%, 40%, 1);
  --darkerBorderColor: hsla(210, 30%, 30%, 1);
  --lighterBorderColor: hsla(210, 30%, 50%, 0.3);

  /* Selectors */
  --selectorBackgroundColor: hsla(210, 50%, 25%, 1);
  --selectorBackgroundColorAlpha: hsla(210, 50%, 25%, 0.5);

  /* Buttons and Accents */
  --btnMiniPlayColor: hsla(210, 100%, 43%, 1); /* Jellyfin Blue */
  --btnMiniPlayBorderColor: hsla(210, 100%, 50%, 0.8);
  --btnSubmitColor: hsla(285, 60%, 50%, 1); /* Jellyfin Purple */
  --btnSubmitHoverColor: hsla(285, 60%, 60%, 1);
  --btnSubmitBorderColor: hsla(285, 60%, 40%, 1);
  --checkboxCheckedBgColor: hsla(285, 60%, 50%, 1);
}

.countIndicator, .playedIndicator, .mediaSourceIndicator { 
  background: hsla(210, 100%, 43%, 1) !important; /* Accent: Jellyfin Blue */
}
.playstatebutton-icon-played { 
  color: hsla(210, 100%, 43%, 1) !important; 
}
.backgroundContainer, .dialog, html { 
  background-color: transparent !important; /* Required for the gradient to show */
}

[lscambo13]

Lines 1-3 are malformed as they are missing the opening bracket and a selector. I tried it without them and it worked.

[chrisspeakseh]

Can anyone help to create sometjing ghat uses netflix colors

Also same for the media player bar and stuff, i love the elegant fin design but would like the colors to match netflix.

Any help is appreciated