Skip to content

HiAnime (Darker) by zaltroscrown

Screenshot of HiAnime (Darker)
Write a review Install Get Stylus

Details

Authorzaltroscrown

LicenseNo License

Categoryhianime.to

Created

Updated

Code size19 kB

Code checksum9bd69252

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

An even darker theme for HiAnime website by Zaltros Crown.

Notes

If you encounter anything you don’t like and would like to have changed or would like for me to make a dark theme for a different site please contact me on zaltros.work@gmail.com or over on Discord - zaltroscrownwork

The dark theme is still a work in progress and will get updated over time as I get time to work on it.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         HiAnime (Darker)
@version      20250410.16.38
@namespace    https://userstyles.world/user/zaltroscrown
@description  An even darker theme for HiAnime website by Zaltros Crown.
@author       zaltroscrown
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://hianime.to/"), url-prefix("https://hianimez.to") {
:root{
    --bg1: #050505;
    --bg2: #090909;
    --bg3: #151515;
    --bg3t: #151515a6;
    --bg4: #222;
    --scroll: #555;
    --scroll-blank: #151515;
    --border: #444;
    --border-extra: #888;
    --ora: #fd5e1e;
    --fg-extra: #fff;
    --fg: #b9b9b9;
    --fg-dull: #636363;
    --button-hover: #333;
    --blu: #0165b9;
    }

body{
    background-color: var(--bg1)!important;
}
body, html {
    scrollbar-color: var(--scroll) var(--scroll-blank)!important;
}
/*------------------------------------------Landing Page------------------------------------------*/
#action-button .btn { /*"Watch anime" button*/
	background: var(--bg3) !important;
	color: var(--fg-extra) !important;
    border: 1px solid var(--border)!important;
}
#action-button .btn:hover { /*"Watch anime" button*/
	background: var(--button-hover) !important;
}
#xsearch.home-search .search-content .search-submit{ /*Submit button for search*/
    background: var(--bg3)!important;
    border: 1px solid var(--border)!important;
}
#xsearch.home-search .search-content .search-submit:hover{
    background: var(--button-hover)!important;
}
#xsearch.home-search .search-content .search-submit .search-icon i {
	color: var(--fg-extra)!important;
}
.share-buttons .share-buttons-block .sbb-title span {
	color: var(--fg-extra);
}
#xheader_menu ul.header_menu-list .nav-item > a{
    color: var(--fg)!important;
}
#xheader_menu ul.header_menu-list .nav-item > a:hover{
    color: var(--fg-extra)!important;
}
/*------------------------------------------HiAnime Connect------------------------------------------*/
.nc-list .item.item-pin .is-pin{ /*Pinned message background*/
    background: var(--fg-extra)!important;
}
.nc-list .item .is-vote.is-vote-new a.active, .nc-list .item .is-vote.is-vote-new a:hover { /*Upvote and downvote buttons*/
	background: var(--bg3t)!important;
	color: var(--fg-extra)!important;
}
.cd-article .cda-bottom .btn {
	color: var(--fg)!important;
}
.cd-article .cda-bottom .btn:hover {
	color: var(--fg-extra)!important;
}
.rep-more .btn{
    color: var(--fg-extra)!important;
}
html body div#wrapper div#main-wrapper.layout-page.layout-award div.container div.award-inner div.new-connect div.nc-wrap div.nc-body div.nc-list div.post-list div.item.item-pin div.is-body h4.item-name a, html body div#wrapper div#main-wrapper.layout-page.layout-award div.container div.award-inner div.new-connect div.nc-wrap div.nc-body div.nc-list div.post-list div.item div.is-body h4.item-name a{ /*Discussion topics*/
    color: var(--fg-extra)!important;
}
html body div#wrapper div#main-wrapper.layout-page.layout-award div.container div.award-inner div.new-connect div.nc-wrap div.nc-body div.nc-list div.post-list div.item.item-pin div.is-body h4.item-name a:hover, html body div#wrapper div#main-wrapper.layout-page.layout-award div.container div.award-inner div.new-connect div.nc-wrap div.nc-body div.nc-list div.post-list div.item div.is-body h4.item-name a:hover{
    border-bottom: 1px solid var(--fg-extra)!important;
}
.award-inner .ai_-tabs a{ /*Main Sections at the top*/
    color: var(--fg)!important;
}
.award-inner .ai_-tabs a.active{
    color: var(--fg-extra)!important;
}
.award-inner .ai_-tabs a:hover{
    color: var(--fg-extra)!important;
}
.award-inner .ai_-tabs a.active::before{
    background: var(--fg-extra)!important;
}
html body div#wrapper div#main-wrapper.layout-page.layout-award div.container div.award-inner div.new-connect div.nc-wrap div.nc-body div.nc-head div.is-right div.is-manager.ml-2 a.item-link:hover{
    color: var(--fg-extra)!important;
    border-bottom: 1px solid var(--fg-extra)!important;
}
.pre-tabs .nav-item .nav-link.active{ /*Super X sorting tags*/
    color: var(--fg-extra)!important;
}
.pre-tabs .nav-item .nav-link{
    color: var(--fg)!important;
}
.pre-tabs .nav-item .nav-link:hover{
    color: var(--fg-extra)!important;
}
.wv .wv-ul .item .item-name a{
    color: var(--fg-extra)!important;
}
/*------------------------------------------HEADER------------------------------------------*/
.search-content input.search-input{ /*Search box*/
    background-color: var(--bg3)!important;
    color: var(--fg)!important;
}
.search-content .search-result-pop .nav-item{
    background: var(--bg3)!important;
}
#header{ /*Header general background*/
    background: var(--bg2)!important;
}
/*Menu dropdown (top left corner)*/
#sidebar_menu{ /*Background of the dropdown*/
    background: var(--bg3t)!important;
}
.hr-community .btn i { /*Community buttons text bubbles*/
    color: var(--fg-extra)!important;
}
.hr-community .btn{
    color: var(--fg-extra)!important;
    background: var(--bg3)!important;
    border: 1px solid var(--border)!important;
}
.hr-community .btn:hover{
    background: var(--button-hover)!important;
}
#sidebar_menu .sidebar_menu-list>.nav-item>a.nav-link { /*Options under "Community"*/
    color: var(--fg)!important;
}
#sidebar_menu .sidebar_menu-list>.nav-item>a.nav-link:hover {
    color: var(--fg-extra)!important;
}
html body div#xwrapper div#xmain-wrapper div.mw-body div.container div.mwb-2col div.mwb-right div.zr-connect.zr-connect-list div.connecting-list div.item div.cn-owner a.user-name.is-level-x.is-level-a span:hover, html body div#xwrapper div#xmain-wrapper div.mw-body div.container div.mwb-2col div.mwb-right div.zr-connect.zr-connect-list div.connecting-list div.item div.cn-owner a.user-name.is-level-x.is-level-a:hover, html body div#xwrapper div#xmain-wrapper div.mw-body div.container div.mwb-2col div.mwb-right div.zr-connect.zr-connect-list div.connecting-list div.item div.cn-owner a.user-name:hover{
	color: var(--fg-extra)!important;
}
/*Menu dropdown (top left corner) END*/
/* filter button in search bar */
.search-content .filter-icon {
	background: var(--bg3);
	color: var(--fg-extra)!important;
    border-radius: 20px!important;
    border: 1px solid var(--border)!important;
}
.search-content .filter-icon:hover {
	background: var(--button-hover)!important;
	color: var(--fg-extra)!important;
}
.search-content .search-icon{
    color: var(--fg-extra)!important;
}
.search-content .search-result-pop .nav-item{
    color: var(--fg)!important;
}
.search-content .search-result-pop .nav-item:hover{
    color: var(--fg-extra)!important;
}
.search-content .search-result-pop .nav-bottom{ /*Search all button at the bottom of the search bar*/
    background: var(--bg3)!important;
    color: var(--fg-extra)!important;
}
.search-content .search-result-pop .nav-bottom:hover{ /*Search all button at the bottom of the search bar*/
    background: var(--button-hover)!important;
}
html body div#wrapper div#header.header-home div.container div.header-setting div.hs-toggles a.hst-item div.name{
    color: var(--fg)!important;
}
html body div#wrapper div#header.header-home div.container div.header-setting div.hs-toggles a.hst-item div.name:hover{
    color: var(--fg-extra)!important;
}
.hs-toggles .hst-item .hst-icon i{
    color: var(--fg-extra)!important;
}
.toggle-lang{ /*Language toggle button*/
    background: var(--fg-dull)!important;
}
.toggle-lang.off > span.en{
    background: var(--fg)!important;
    color: var(--bg1)!important;
}
.toggle-lang > span.en{
    background: transparent!important;
    color: var(--fg-extra)!important;
}
.toggle-lang.off > span.jp{
    background: transparent!important;
    color: var(--fg-extra)!important;
}
.toggle-lang > span.jp{
    background: var(--fg)!important;
    color: var(--bg1)!important;
}
.hr-notifications .hrn-icon{ /*Notification button*/
    background: var(--bg4)!important;
}
.hr-notifications .hrn-icon:hover{ /*Notification button*/
    background: var(--button-hover)!important;
}
.zicon.zicon-live {
	background-image: url("https://svgshare.com/i/19nm.svg");
    filter: brightness(200%)!important;
}
/*------------------------------------------Main Area------------------------------------------*/
.deslide-item .desi-sub-text{
    color: var(--fg-extra)!important;
}
#slider .sc-detail .scd-item .quality{
    background: var(--button-hover)!important;
    color: var(--fg-extra)!important;
}
.btn-focus, .btn-primary, .btn-tab.active { /* watch now button */
	background: var(--bg3)!important;
	color: var(--fg-extra)!important;
	border-color: var(--border)!important;
}
.btn-focus:hover, .btn-primary:hover, .btn-tab.active:hover {
	background: var(--button-hover)!important;
	border-color: var(--border)!important;
}

/* right & left arrows on spotlight stuff*/
.swiper-button:hover {
    background: var(--ter9ani)!important;
    color: #111;
}



/* trending text */
	.block_area .block_area-header .cat-heading {
	    color: var(--ter9ani);
	}
	.trending-list .item .number span {
	    color: var(--ter9ani);
	}

/* trending nav arrows */
.trending-navi>div:hover {
    background: var(--ter9ani)!important;
    color: #111;
}

/* trending tooltips/info cards */
.pre-qtip-button .btn.btn-play {
    color: #fff;
    background: var(--sec9ani);
}
.pre-qtip-detail .pqd-li.badge-quality {
    background: var(--sec9ani)!important;
    color: #fff;
}
.tick-item.tick-quality {
    background: var(--sec9ani);
    color: #fff;
}
/*------------------------------------------Anime Info------------------------------------------*/

/*------------------------------------------Open Anime------------------------------------------*/

/*------------------------------------------Footer------------------------------------------*/


.category_filter{
    background-color: var(--bg3)!important;
}
.nli-select .custom-select{
    background-color: var(--button)!important;
    color: var(--fg)!important;
}
.nli-select .custom-select:hover{
    back...

Reviews

No reviews yet.