GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → CTalvio → Ultrachromic

CTalvio / Ultrachromic

Licence: MIT license
The final form, the true evolution of the chromic theme saga!

Programming Languages

CSS
56736 projects

Labels

cssthemelight-themedark-themejellyfin

Projects that are alternatives of or similar to Ultrachromic

reveal-jekyll
Online presentation for GitHub Pages and Jekyll in Markdown using reveal.js with a Solarized Color Theme
Stars: ✭ 67 (-58.12%)
Mutual labels:  light-theme, dark-theme
Bubble-Space-Theme
A theme for https://obsidian.md/ inspired by Bubbles for Light Mode and Outer Space for Dark Mode!
Stars: ✭ 86 (-46.25%)
Mutual labels:  light-theme, dark-theme
xcode-theme
Bring the color of the Xcode 'Default (Dark)', Xcode 'Classic (Dark)' and Xcode 'Classic (Light)' themes to Visual Studio Code.
Stars: ✭ 28 (-82.5%)
Mutual labels:  light-theme, dark-theme
paddy-color-theme
A very detailed VS Code color theme with earthy tones and many background options for all ye badass hackers. 🍁
Stars: ✭ 29 (-81.87%)
Mutual labels:  light-theme, dark-theme
hexagonTab
Hexagon bookmarks accented with a chosen colour. Customise the layout, style, background and bookmarks with hexagonTab.
Stars: ✭ 65 (-59.37%)
Mutual labels:  light-theme, dark-theme
fsc
A set of themeable WPF File System Controls similar to some parts of Windows (7-10) Explorer
Stars: ✭ 66 (-58.75%)
Mutual labels:  light-theme, dark-theme
Appearance-figma-plugin
Figma plugin. This plugin generates a dark/light theme from your selection.
Stars: ✭ 36 (-77.5%)
Mutual labels:  light-theme, dark-theme
ColorPickerLib
A WPF/MVVM implementation of a themeable color picker control.
Stars: ✭ 44 (-72.5%)
Mutual labels:  light-theme, dark-theme
Starlight
Automatic macOS Dark/Light shift based on surrounding ambient light.
Stars: ✭ 26 (-83.75%)
Mutual labels:  light-theme, dark-theme
Samurai-theme-vscode
Samurai Theme for VSCode
Stars: ✭ 15 (-90.62%)
Mutual labels:  light-theme, dark-theme
vuepress-theme-ououe
A blog theme for VuePress
Stars: ✭ 77 (-51.87%)
Mutual labels:  light-theme, dark-theme
SuggestBoxLib
A WPF Dark/Light AutoComplete TextBox that can easily handle 20.000+ entries.
Stars: ✭ 36 (-77.5%)
Mutual labels:  light-theme, dark-theme
vuepress-theme-default-prefers-color-scheme
add prefers-color-scheme for vuepress default theme
Stars: ✭ 51 (-68.12%)
Mutual labels:  light-theme, dark-theme
hyperterm-gruvbox
Hyperterm theme based on gruvbox
Stars: ✭ 16 (-90%)
Mutual labels:  light-theme, dark-theme
vscode-theme-gruvbox-minor
Gruvbox theme for Visual Studio Code
Stars: ✭ 17 (-89.37%)
Mutual labels:  light-theme, dark-theme
Light-Switch
Easily switch from light to dark theme, or the other way around, in Windows 10/11.
Stars: ✭ 25 (-84.37%)
Mutual labels:  light-theme, dark-theme
Startpage
New revamped and improved Startpage, now with Dark Mode support!
Stars: ✭ 35 (-78.12%)
Mutual labels:  light-theme, dark-theme
theme-collection
A collection of themes for Node-RED
Stars: ✭ 43 (-73.12%)
Mutual labels:  light-theme, dark-theme
firefox-edge
Firefox Edge is a theme for Mozilla Firefox that closely replicates the look of Microsoft Edge (dark theme) without losing any features of Firefox.
Stars: ✭ 65 (-59.37%)
Mutual labels:  light-theme, dark-theme
repo-card
😎 showcase repositories on your website 🤘!
Stars: ✭ 141 (-11.87%)
Mutual labels:  light-theme, dark-theme
View All Similar Projects ➔

Ultrachromic

The final form, the true evolution of the chromic theme saga! The old trilogy of chromic themes are deprecated, as their appearances can be replicated using Ultrachromic.

This is a custom theme for Jellyfin mediaserver created using CSS overrides. Note that I maintain this theme to be compatible with whatever version of Jellyfin I am currently using. Which is usually the latest stable release. You can therefore assume that using the theme on older versions may not work, but also that if a new release breaks something, that I will fix it. If you encounter unthemed elements or something broken, open an issue.

Untitled


Features

  • Themes EVERYTHING
  • Three types of styles to choose from
  • Extensive additional options
  • Customizable accent color
  • Choose how blurry you want your backdrops
  • Squared or rounded UI
  • Options for progress bars, title pages, backdrops, logos...
  • Works well on mobile, more compact and aligned UI
  • Various small tweaks and fixes to the stock UI

How to

To use the theme copy paste one of the presets, or follow the instructions to create a custom combination, paste that into "Dashboard>General>Custom CSS" and click save, it will apply immediately server-wide to all users on top of any theme they may be using. To remove the theme, clear the "Custom CSS" field and then click save.

Adding modules after a preset may or may not work, do not open an issue if you try to do things this way and it doesn't work. Either use a preset or a custom combination, not a mix of both, as that is not a use case I will be testing and guaranteeing to work.

NOTE: Theme may not work when using reverse proxy, check the bottom section of this readme for more info.


Single line presets

These let you use Ultrachromic using a couple presets. These follow the same look as the old chromic themes.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/kaleidochromic_preset.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/novachromic_preset.css');

Only one line is needed, nova and kaleido support custom accents.



Customization using multiple import lines

Ultrachromic is composed of multiple "parts" allowing you to theme only the parts you want, and to have some choice in how you want things themed. Simply add one import after another, in the order they are listed here. Simply omit the options you do not want to use.


1. Recommended

fixes.css contains various small tweaks all over the JF UI, an alignment here, a size tweak there. That kind of thing. jf_font.css will make JF use the same font as its logo, for everything. You can use both, one, or none of these.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');

2. Required

These lines are required.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');

3. Rounding

If you want to modify the rounding of corners in the UI, include one of these, circlehover keeps the stock circle accent when hovering over things, otherwise the accent will be a rounded square like everythig else.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding_circlehover.css');

4. Smaller cast list

image

A smaller, square aspect ratio style cast list.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css');

5. Compact episode list

image

A more easily scrolled episode list, there is the option to keep it as a list that is more compact, or turning the episode list into a grid menu.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_grid.css');

6. Transparent top bar

image

Transaparent top bar.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css');

7. Login screen

image

Login screen styles. The minimalistic option has no frame or prompt text. You can also set a custom background, see further below.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');

8. Input fields

image

Input field styles, with borders that highlight when selected, or with no borders, and the background highlights, when selected.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_border.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');

9. Watched/Unwatched indicators

image

Two options, should the indicator be floating, or attached to the corner of the title card.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');

10. Choose type

Untitled

Dark, light, and colorful type. You must use one of these. If you wish to use an accent color with the dark style, use the "_withaccent" line.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/light.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/colorful.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');

11. Title page

image

Four options, two versions, each version can be used with or without a logo replacing title text.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner-logo.css');

12. Progress bar

Screenshot_20210817_003507

Default, overlay or floating style progress indicator for library items.

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css');

OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');

13. Effects

image

Additional eye candy. Make items glow on hover, make some UI elements glassy see-through. Pan animation animates the backdrop with a slow pan. The last one is a hacky way to turn the cover art into a backdrop on mobile, as it was removed in 10.7.0.

Known issues: Pan-animation can cause flickering on chromium based browsers when the backdrop is also modified. Glassy is not supported by firefox, unless some flags are set to enable it (though even this is currently broken in firefox).

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css');

AND/OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');

AND/OR

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/pan-animation.css');

AND/OR

@import url('https://ctalvio.github.io/Monochromic/backdrop-hack_style.css');

14. Manual options

There are some manual options you can define if you want, after the import lines add this short snippet of code, you can edit it to set anything you want as a login background, or modify how blurry or dark/light your backdrops are, as well as to set a custom accent color.

/*Style backdrop*/
.backdropImage {filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);}

/*Login background*/
#loginPage {background: url(https://i.imgur.com/9vL4iNf.png) !important;}

/*Accent and roundingd*/
:root {--accent: 98, 121, 205;}
:root {--rounding: 12px;}

Extras

Check out these custom icons by @prayag17!

Also a general thanks to prayag17, I've joinked some code from him for this project. (grid episodes, title logo)



Fix for use with some reverse proxy setups

When using the Nginx Reverse proxy config from the Jellyfin docs the theme will not work by default. (If you are using the subpath config, you can ignore this.)

Because the config includes Content-Security-Policy which reduces risk of XSS, you need to add the URL's from this repo and the fonts to the list of allowed external sources.

In the nginx config you should change the

add_header Content-Security-Policy ....

to:

add_header Content-Security-Policy "default-src https: data: blob:; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding_circlehover.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding_circlehover.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/pan-animation.css https://ctalvio.github.io/Monochromic/backdrop-hack_style.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/scrollfade.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_grid.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_border.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/kaleidochromic_preset.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/novachromic_preset.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner_logo.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/light.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/colorful.css https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css https://fonts.googleapis.com/css2; script-src 'self' 'unsafe-inline' https://www.gstatic.com/cv/js/sender/v1/cast_sender.js worker-src 'self' blob:; connect-src 'self'; object-src 'none'; frame-ancestors 'self'";

If you don't do this the theme will simply not load (reverts back to default theme) and the browser console will spit out an error. Even if you paste in all the CSS, the font will still not load since it is loaded from an external source.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].