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

Size17 kB

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      20240907.11.06
@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/") {
: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{
    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;
}
/*------------------------------------------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*/
/*------------------------------------------Main Area------------------------------------------*/

/*------------------------------------------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{
    background-color: var(--button-hover)!important;
}
.cbox.cbox-list{
    background-color: var(--bg3)!important;
    border-radius: 20px!important;
}
.cbox.cbox-genres{
    background-color: var(--bg3)!important;
    border-radius: 20px!important;
}
.player-controls{
    background-color: var(--bg2)!important;
}
.player-servers{
    background-color: var(--bg3)!important;
}
.player-servers #servers-content{
    background-color: var(--bg3)!important;
}
#episodes-content{
    background-color: var(--bg3)!important;
}
#header.fixed{
    background-color: var(--bg33)!important;
}
#mw-top .mwt-content{
    background-color: var(--bg2)!important;
}
#slider .swiper-slide{
    background-color: var(--bg2)!important;
}
.share-buttons.share-buttons-detail{
    background-color: var(--bg2)!important;
}


/* first time making theme, might be missing stuff */

/* root colors, pulled from aniwave. not following the exact theme, a lot of aniwave is just gray */
:root {
	--pri9ani: #6900ff; /*#6900ff;*/
	--sec9ani: #151515; /*#eb00ff;*/
	--ter9ani: #fff; /*#ffe600;*/
}


/* HOME PAGE */

/* top left "hamburger" menu */


/* filter button in search bar */
	.search-content .filter-icon {
	    background: var(--pri9ani);
	    color: #fff;
	}
		.search-content .filter-icon:hover {
	    background: var(--sec9ani)!important;
	    color: #fff;
	}

/* top categories */
	.hs-toggles .hst-item .hst-icon i {
 	   color: var(--ter9ani);
	}
	.toggle-lang>span.en {
	    background: var(--ter9ani);
	    color: #111;
	}
	.toggle-lang.off>span.jp {
	    background: var(--ter9ani);
	    color: #111;
	}
.zicon.zicon-live {
	background-image: url("https://svgshare.com/i/19nm.svg");
}


/* login button */
.btn-focus, .btn-primary, .btn-tab.active {
    background: var(--pri9ani)!important;
    color: #fff!important;
    border-color: var(--sec9ani)!important;
}

/* login x */
.premodal .modal-content .close:hover {
	background: var(--ter9ani);
}

/* spotlight text */
	.deslide-item .desi-sub-text {
	    color: var(--ter9ani);
	}

/* hd button on spotlight stuff */
#slider .sc-detail .scd-item .quality {
    background: var(--sec9ani);
    color: #fff;
}

/* watch now button on spotlight stuff */
	.btn-focus, .btn-primary, .btn-tab.active {
	    background: var(--pri9ani)!important;
	    color: #fff!important;
	    border-color: var(--pri9ani)!important;
	}
	.btn-focus:hover, .btn-primary:hover, .btn-tab.active:hover {
	    background: var(--sec9ani)!important;
	    border-color: var(--sec9ani)!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;
}


/* indenting is too much work */


/* comments section */
#discussion .pre-tabs .nav-item .nav-link.active {
    color: var(--ter9ani)!important;
    border-color: var(--ter9ani)!important;
}
.pre-tabs .nav-item .nav-link:hover {
    color: var(--ter9ani);
}
.toggle-onoff>span {
    background: var(--ter9ani);
}
.dwl-ul .dwl-item .on-chapt a {
    color: var(--ter9ani);
}



/* changes toast bottom right */
#toast-container > div.toast-success {
	background-color: var(--ter9ani)!important;
}


/* top airing, most popu... */
.anif-block .anif-block-header {
    color: var(--ter9ani);
}


/* continue watching times */
.fd-bar .zr-bar span {
	background: var(--ter9ani);
}
.fd-bar .fdb-time span {
	color: var(--ter9ani);
}


/* top 10 d/w/m select + top 3 */
.anw-tabs .nav-item .nav-link.active {
	background: var(--ter9ani);
	color: #000;
}
.cbox.cbox-list .anif-block-chart li.item-top .film-number span {
	border-bottom: 3px solid var(--ter9ani);
}


/* schedule section */
.table_schedule .table_schedule-date .tsd-item.active {
    background: var(--sec9ani);
    color: #fff;
}
....

Reviews

No reviews yet.