Skip to content

just another dark vk.com by directorrentv

Screenshot of just another dark vk.com

Details

Authordirectorrentv

LicenseCreative Commons Attribution (CC BY)

Categoryvk.com

Created

Updated

Size6.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Simple dark theme, that uses CSS-variables instead of painting the concrete elements. This method can be useful without updating style in future vk.com updates

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         just another dark vk.com
@version      20220426.21.30
@namespace    userstyles.world/user/directorrentv
@description  Simple dark theme, that uses CSS-variables instead of painting the concrete elements. This method can be useful without updating style in future vk.com updates
@author       directorrentv
@license      Creative Commons Attribution (CC BY)
==/UserStyle== */

@-moz-document domain("vk.com"), domain("vk-apps.com") {
:root{
    --background-common: #282b2f;
    --background-common-transparent: #44444688;
    --background-darkest: #181b1f;
    --background-darker: #444446;
    --background-accent: #2A6AAF;
    --background-accent-transparent: #2A6AAF66;
    --background-accent-alt: #0A2A3F;
    --background-brighter: #373b3e;
    --background-brightest: #494d50;
    --background-brightest-alt: #2D2F34;
    --background-bright-transparent-alt: #353639C9;
    --foreground-common: #7f7f7f;
    --foreground-common-alt: #69717a;
    --foreground-common-brighter: #e0e0e0;
    --foreground-common-brightest: #d7d8d8;
    --foreground-common-accent: #5ea8f7;
    
    --brand-color: #0077ff;
    --text_name: var(--foreground-common-accent);
    --im_text_name: var(--foreground-common-accent);
    --icon_medium_alpha: var(--foreground-common-brightest);
    --a:#444446;  
    --a1:#36383F;    
    --b:#4d4d54;    
    --c:#8b8b93;    
    --d:#3385ff;    
    --e:#3366ff;    
    --e1:#00336677;    
    --f:#dce2ea;
    --background-brighter: var(--a1);
    --content_tint_background: var(--e1);
    --snippet_background: var(--b);
    
    --like-red-background:#592F34;
}

html body[scheme~="vkcom_dark"]{
    --background_page: var(--background-common);
    --text_primary: var(--foreground-common-brighter);
    --header_background:var(--background-darkest);
    --separator_alternate: var(--background-darker);
    --separator_common: var(--background-darker);
    --background_content: var(--background-brighter);
    --text_subhead: var(--foreground-common-brighter);
    --background_hover: var(--background-brightest);
    --text_link: var(--foreground-common-accent);
    --background_light: var(--background-brightest-alt);
    --search_bar_field_background: var(--background-brightest-alt);
    --modal_card_background: var(--background-common);
    --input_background: var(--background-brightest-alt);
    --text_placeholder: var(--foreground-common-brighter);
    --input_border:var(--separator_common);
    --text_muted:var(--foreground-common);
    --button_secondary_background: var(--background-brighter);
    --widget_snippet_background:var(--background-accent-transparent);
    --modal_card_background: var(--background-bright-transparent-alt);
    --float_button_background:var(--background-accent);
    
}

.vkui__portal-root, .vkui__root {
    --header_background: var(--background-brighter);
    --header_alternate_background:var(--background-darkest);
    --background_hover: var(--background-accent-transparent);
    --search_bar_background:transparent;
    --modal_card_background: var(--background-darkest);
    --search_bar_field_background:var(--background-brightest-alt);
    --content_tint_background: var(--c);
    background: var(--background-common);
}
.like_wrap .ui_actions_menu_top .ui_actions_menu .ui_actions_menu_item{
    --background_hover:var(--background-accent-alt);
}
.vkuiHorizontalScroll__in-wrapper.HorizontalScroll__in-wrapper{
    --modal_card_background: var(--background-accent-transparent);
}
.categoryItem:hover{
    --background_hover: var(--background-accent)
}
.vkui{
    scrollbar-color:var(--background-accent) var(--background-brighter) !important;
    --main_background:var(--background-brighter);
}
.Panel--tm-white.Panel .Panel__in, .Panel::after,.MarketCard .vendorDeliveryInfoButton,.Tabs,.VendorListItemInfo .vendorDeliveryInfoButton {
    background:var(--background-common-transparent);
    --text_muted:var(--foreground-common-brighter);
    /*border: 1px solid var(--foreground-common);*/
}
.MarketCategoriesItem.active{
    color:var(--foreground-common-brightest);
}
.MarketCategoriesItem{
    color:var(--foreground-common-alt);
    transition: all 0.35s ease;
}
.ModalPage__in{
    background:var(--background-brightest-alt);
}
.promoItem{
    background: var(--background-brightest);
}
.promoItem .promoVendorProductName{
    color:var(--foreground-common-brighter);
}
.promoItem .promoItemTitle{
    color:var(--foreground-common-brightest);
}
.promoVendorProduct img:last-child{
    filter:invert() ;
}
.vkuiPanel.vkuiPanel--regular .vkuiPanel__in, .vkuiPanel.vkuiPanel--regular::after{
    background-color:var(--background-brighter);
}


body div div.online::after{
    --background_content: var(--e1) !important;
}
[dir] .top_notify_cont .feedback_img{
    background-color: var(--foreground-common) !important;
}
[dir] .top_notify_cont .feedback_img::after{
    background-color: var(--background-brighter) !important;
}
[dir] .top_notify_cont .feedback_img::before {
    background-color: var(--background-brighter) !important;
}
body .PostBottomAction--withBg{
    --post-bottom-action-background-color: var(--background-brightest-alt);
    --reaction-button-background-color-light: var(--like-red-background) !important;
}

body  .top_profile_vkconnect_card_wrapper>div:first-child{
    --content_tint_background:  var(--background-brightest);
}
body .ConvoMessage{
    --im_bubble_incoming: var(--background-brightest);
}

body .ConvoMessage--out{
    --im_bubble_outgoing: var(--background-accent);
}
body .im-mess.im-mess_selected{
    --content_tint_background: var(--background-accent-alt);
}
body .im-mess{
    transition: all 0.25s ease-in-out;
}
html body[scheme]{
    --background_content: var(--background-brighter);
    --separator_alternate: var(--background-darker);
    --separator_common: var(--background-darker);
    --text_primary: var(--foreground-common-brighter);
    --background_light: var(--background-brightest-alt);
    --modal_card_background: var(--background-brightest);
}


a{
    transition: all 0.25s ease-in-out;
}
a:not(#top_notify_btn):hover[href]{
    text-shadow: 0px 0px 0.5px currentColor;
    
}



}

@-moz-document url-prefix("") {
/*
Достаточно простой стиль для темного режима. 
Частично основан на теме NewVK Dark Theme MOD от Денисова Ярослава

*/
}

Reviews

No reviews yet.