WestMarches - Dark Mode Theme en

Installations 53 Likes 17

A dark and refined theme in a survival dark fantasy atmosphere where the colors selected have been chosen to represent the darkness of a starry night under the shadows of a bloody universe.

Important

To obtain the same rendering as that presented on the images of the slideshow, you will need the plugin Basics - Display Fix. It allows, among other things, an improvement of the basic display proposed by kanka.

Used Fonts

Roboto
Open Sans
Ubuntu

For an optimal rendering of the font, it is advisable to create a new style in the first position in your administration panel and add the following code to it:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap');

Used Plugins

Background Image #1.1 by Guardian
Scrollable Main Sidebar 1.9 by Salvatos

Note

The plugin is currently still in beta version and therefore, despite my special attention, may contain display bugs, especially on the mobile version. Thank you for your understanding.

Contact

For any feedback, suggestions, ideas or encountered issues, you can email me at [email protected] using the following subject: Kanka - [Plugin Name] - Your topic

Latest version 0.2 beta View content

Released 2 years ago

Changed the font size of table text that could display differently on some mobiles devices.
Display exception of the red border under the modules boxes.

Plugin CSS for 0.2 beta


/*****************/
/* GLOBAL PAGES */

:root {
    --theme-normal-tonic-color: #5B2E27;
    /* Normal Tonic - Dark Red */
    --theme-light-tonic-color: #75352c;
    /* Light Tonic - Dark Red */
    --theme-background: #141a24;
    /* Dark Blue */
    --theme-dark-background: #151B22;
    /* Dark Black */
    --theme-soft-background: #282c33;
    /* Dark Grey */
    --theme-light-background: #1e2630;
    /* Light Blue */
    --theme-soft: #282c33;
    /* Dark Grey */
    --theme-main-text: #afafb9;
    /* Light Grey */
    --theme-light-text: #fff5f5;
    /* Light White */
    --theme-hard-text: var(--theme-main-text);
    --input-background: var(--theme-dark-background);
    --theme-border: var(--theme-soft);
    --theme-soft-text: var(--theme-main-text);
    --theme-link: #97b9c9;
    /* Light Blue */
    --theme-link-hover: var(--theme-light-text);
    --theme-link-focus: var(--theme-light-text);
    --theme-input-text: var(--theme-light-text);
    --main-navbar-background: var(--theme-dark-background);
    --main-navbar-text: var(--theme-main-text);
    --main-navbar-user-footer: var(--theme-soft);
    --main-navbar-hover-background: var(--theme-soft);
    --main-navbar-user-background: var(--theme-dark-background);
    --table-highlight: var(--theme-soft);
    --table-border: var(--theme-soft);
    --table-warning: var(--theme-soft);
    --table-warning-hover: var(--theme-link-hover);
    --link-text: var(--theme-link);
    --link-focus: var(--theme-link-focus);
    --link-hover: var(--theme-link-hover);
    --breadcrumb-text: var(--body-text);
    --submenu-link: var(--theme-main-text);
    --submenu-hover-background: var(--theme-dark-background);
    --sidebar-background: var(--theme-dark-background);
    --sidebar-link: var(--theme-light-text);
    --sidebar-section-padding: 10px 10px 0px 10px;
    --sidebar-section-background: var(--theme-dark-background);
    --sidebar-scrollbar-slider-color: #121822;
    --tab-color: var(--theme-main-text);
    --tab-background: var(--theme-dark-background);
    --tab-hover-color: var(--theme-hard-text);
    --tab-hover-background: var(--theme-dark-background);
    --tab-active-color: var(--theme-hard-text);
    --tab-active-background: var(--theme-dark-background);
    --tab-active-border: transparent;
    --input-background-color: var(--theme-light-background);
    --input-border-color: var(--theme-soft);
    --input-background-disabled-color: var(--theme-dark-background);
    --input-text-color: var(--theme-input-text);
    --input-file-filter: none;
    --quick-creator-button-background: var(--theme-soft);
    --quick-creator-button-hover-background: var(--dashboard-widget-admin-border);
    --header-text: var(--theme-hard-text);
    --text-help: var(--theme-main-text);
    --code-background: var(--theme-main-text);
    --pre-background: var(--code-background);
    --modal-background: var(--theme-dark-background);
    --modal-inner-border: transparent;
    --modal-close-opacity: 0.6;
    --modal-body-text: var(--theme-main-text);
    --modal-close-color: var(--header-text);
    --calendar-today: var(--theme-light-tonic-color);
    --calendar-week: var(--theme-soft);
    --calendar-weather: var(--theme-border);
    --calendar-season-text: var(--theme-main-text);
    --calendar-event-default: var(--theme-dark-background);
    --dashboard-preview-gradient: var(--theme-dark-background);
    --dashboard-widget-admin-border: var(--theme-soft);
    --footer-background: var(--theme-soft-background);
    --footer-links-background: rgba(0, 0, 0, 0.2);
    --footer-logo-blue: none;
    --footer-logo-white: unset;
    --footer-text: var(--theme-main-text);
    --body-background: var(--theme-dark-background);
    --body-text: var(--theme-main-text);
    --gallery-text: var(--theme-hard-text);
    --gallery-background: var(--theme-dark-background);
    --gallery-hover-text: var(--theme-main-text);
    --relation-explorer-background: var(--theme-dark-background);
    --relation-explorer-text: var(--theme-hard-text);
    --conversation-comment-background: var(--theme-light-background);
    --default-background: var(--theme-dark-background);
    --bg-default-link: var(--theme-input-text);
    --well-background: var(--theme-dark-background);
    --well-border: var(--theme-dark-background);
    --dashboard-setup-widget-background: rgba(0, 0, 0, 0.7);
    --dashboard-setup-widget-hover: rgba(0, 0, 0, 0.8);
    --content-wrapper-background: var(--theme-soft-background);
    --hr-border-top: 1px solid var(--theme-border);
    --leaflet-popup-background: var(--theme-dark-background);
    --leaflet-popup-text: var(--theme-input-text);
    --spectrum-border: var(--theme-border);
    --spectrum-background: var(--theme-dark-background);
    --spectrum-text: var(--theme-main-text);
    --search-background: var(--theme-dark-background);
    --search-text: var(--theme-main-text);
    --search-cursor-background: var(--theme-soft);
    --search-border: var(--theme-border);
    --dropdown-background: var(--theme-dark-background);
    --dropdown-border: var(--theme-border);
    --dropdown-hover-background: var(--search-cursor-background);
    --dropdown-link: var(--theme-main-text);
    --list-group-item-border: var(--theme-border);
    --list-group-item-background: var(--theme-dark-background);
    --timeline-item-background: var(--theme-dark-background);
    --timeline-element-border: var(--theme-border);
    --timeline-item-header-border: var(--theme-border);
    --btn-default-background: var(--theme-dark-background);
    --btn-default-hover-background: var(--default-background);
    --btn-default-text: var(--theme-light-text);
    --btn-default-hover-text: var(--theme-light-text);
    --btn-default-border: var(--theme-soft-background);
    --btn-default-hover-border: var(--btn-default-border);
    --label-default-background: var(--theme-normal-tonic-color);
    --label-default-text: var(--theme-main-text);
    --label-default-hover-text: var(--theme-light-text);
    --pagination-text: var(--theme-main-text);
    --pagination-background: var(--theme-dark-background);
    --box-header-background: var(--theme-dark-background);
    --box-background: var(--theme-dark-background);
    --box-with-border-bottom-border: var(--theme-soft-background);
    --box-footer-background: var(--theme-dark-background);
    --box-footer-border-top: var(--theme-soft-background);
    --popover-header-background: var(--theme-dark-background);
    --popover-border: var(--theme-border);
    --tinymce-background: var(--theme-dark-background);
    --tinymce-border: transparent;
    --tinymce-filter: invert(90%) !important;
    --tinymce-input-background: var(--theme-dark-background);
    --tinymce-input-border: var(--theme-border);
    --tinymce-input-text: var(--theme-main-text);
    --widget-map-background: var(--theme-dark-background);
    /* Custom Background */
    --background-image: url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/campaigns/92778/d10c3454-f136-4692-99f1-a9e1267ba856.jpg);
}

/***********************/
/* INTEGRATED PLUGINS */

/** Plugin: Background Image #1.1 by Guardian (https: //marketplace.kanka.io/profiles/17794) **/

.wrapper {
    background: var(--background-image) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: right bottom !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.content-wrapper,
.main-footer {
    background: none;
}

/** Plugin: Scrollable Main Sidebar 1.9 by Salvatos (https: //marketplace.kanka.io/profiles/22039) **/

/* BEGIN Scrollable Main Sidebar */
.main-sidebar {
    --sidebar-scrollbar-track-color: auto;
    --sidebar-scrollbar-width: thin;
}

@media (min-width:768px) {
    .main-sidebar {
        position: fixed;
    }

    .main-sidebar .sidebar-menu {
        margin-bottom: 0;
    }

    /* Main site sidebar */
    body:not(#map-body) .main-sidebar .sidebar {
        height: calc(100vh - 258px) !important;
        overflow-y: scroll;
        scrollbar-width: var(--sidebar-scrollbar-width);
        scrollbar-color: var(--sidebar-scrollbar-slider-color) var(--sidebar-scrollbar-track-color);
        margin-bottom: 0;
        padding: 0;
    }

    /* Adjust height for non-members */
    body:not(#map-body) .main-sidebar.main-sidebar-public .sidebar {
        height: calc(100vh - 210px) !important;
    }

    /* Webkit patch */
    body:not(#map-body) .main-sidebar .sidebar::-webkit-scrollbar {
        background-color: var(--sidebar-scrollbar-track-color);
    }

    body:not(#map-body) .main-sidebar .sidebar::-webkit-scrollbar-thumb {
        background-color: var(--sidebar-scrollbar-slider-color);
    }
}

/* END Scrollable Main Sidebar */
/******************************/

/*************************/
/* HOMEPAGE - DASHBOARD */

.campaign-header.campaign-imaged-header {
    padding: 40px 40px;
}

.campaign-header.campaign-imaged-header .campaign-header-content {
    margin-top: 0;
}

/* New dark background for the maps */
.widget-map .panel-body .map {
    background-color: var(--widget-map-background) !important;
}

/* Pop-Up des Pins de Map */
/* Fix: The default font is not displayed correctly on some browsers (including Firefox v.950.0.1) */
.leaflet-popup-content .marker-popup-entry {
    font-family: Roboto, 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif
}


/*****************/
/* MAIN SIDEBAR */

/* Background and display adjustments */
body:not(#map-body) .main-sidebar .sidebar {
    background: rgb(19, 25, 35);
    background: -moz-linear-gradient(180deg, rgba(19, 25, 35, 1) 0%, var(--sidebar-background) 10%, var(--sidebar-background) 80%, rgba(0, 0, 0, 0.20211834733893552) 100%);
    background: -webkit-linear-gradient(180deg, rgba(19, 25, 35, 1) 0%, var(--sidebar-background) 10%, var(--sidebar-background) 80%, rgba(0, 0, 0, 0.20211834733893552) 100%);
    background: linear-gradient(180deg, rgba(19, 25, 35, 1) 0%, var(--sidebar-background) 10%, var(--sidebar-background) 80%, rgba(0, 0, 0, 0.20211834733893552) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#131923", endColorstr="#000000", GradientType=1);
    padding-bottom: 30px;
}

/* Add Entity Button */
.sidebar-creator {
    background-color: var(--theme-normal-tonic-color);
}

aside.main-sidebar {
    box-shadow: 2px 2px 5px 0px rgb(28 28 38 / 50%);
}

.main-sidebar .sidebar-menu li a {
    background-position: bottom 4px left 200px;
}

/* Active and hover effect links */
.main-sidebar .sidebar-menu>li>ul>li>a:hover,
.main-sidebar .sidebar-menu>li>ul>li.active>a,
.main-sidebar .sidebar-menu>li.section-dashboard>a:hover,
.main-sidebar .sidebar-menu>li.active.section-dashboard>a {
    background-color: inherit !important;
    background-image: url('https://kanka-user-assets.s3.eu-central-1.amazonaws.com/campaigns/92778/91074f70-04e8-4b5d-97f5-3ecb1eed81b0.webp') !important;
    background-position: bottom 4px left 36px !important;
    background-repeat: no-repeat !important;
    background-size: auto;
    box-shadow: none !important;
    width: fit-content;
}

.main-sidebar .sidebar-menu li a {
    font-family: 'Ubuntu', sans-serif;
}

.main-sidebar .sidebar-menu li ul li a:hover {
    width: fit-content;
}

.skin-black .sidebar-menu>li:not(.section-dashboard)>a {
    border-left-color: transparent;
    background: url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/campaigns/92778/5804ee63-e99a-4b77-9211-e73172d0cfc4.webp);
    background-size: 264px 53px;
    background-position: center;
}

.skin-black .sidebar-menu>li.active>a,
.skin-black .sidebar-menu>li.menu-open>a {
    border-left-color: transparent;
    background: url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/campaigns/92778/5804ee63-e99a-4b77-9211-e73172d0cfc4.webp);
    background-size: 264px 53px;
    background-position: center;
}

.main-sidebar .sidebar-menu li:first-child a:hover {
    background: transparent;
}

/* Adding the red border below certains headers */
.widget .panel .panel-heading, .box-header, .table.table-striped:not(#campaign-members, #campaign-invites, #campaign-roles)>thead:first-child>tr:first-child>th {
    border-bottom: 2px solid var(--theme-normal-tonic-color);
}

/**********/
/* FORMS */

.note-editor.note-airframe,
.note-editor.note-frame {
    border: 1px solid var(--table-highlight);
}

.form-control {
    border: 1px solid var(--input-border-color) !important;
    background-color: var(--input-background-color) !important;
    color: var(--input-text-color) !important;
}

input[type=checkbox],
input[type=file] {
    accent-color: var(--theme-link);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--theme-light-text);
}

/* Attributes Category - Unlock Icon */
.entity-attributes .fa-unlock-alt {
    color: var(--body-text)
}

.entity-attributes .fa-unlock-alt:hover {
    color: var(--link-hover)
}

/* Permissions Category */

#crud_permissions div.row:not(:last-child) {
    border-bottom: 1px solid var(--btn-default-border);
}

#crud_permissions div.row hr {
    background-color: var(--theme-border);
}

#crud_permissions div.row strong {
    color: var(--input-text-color);
}

/* CSS Style Input Code */
.cm-s-dracula.CodeMirror,
.cm-s-dracula .CodeMirror-gutters {
    background-color: var(--theme-light-background) !important;
}

/****************/
/* ADMIN PANEL */

.element-live-reorder .element {
    background-color: var(--theme-soft-background);
}

/*************************/
/* GLOBAL BOXES & TABLES*/

.box .box-header,
.box .panel-heading,
.box .timeline-header,
.panel .box-header,
.panel .panel-heading,
.panel .timeline-header,
.popover .box-header,
.popover .panel-heading,
.popover .timeline-header,
.timeline-item .box-header,
.timeline-item .panel-heading,
.timeline-item .timeline-header {
    background-color: transparent;
    color: var(--box-header-text);
}

/* Change the color of the default warning button on certains locations */
.box.box-solid>.box-header .btn-primary,
.header-buttons .btn-warning,
.row-add-note-button .btn-warning,
.box-body .btn-warning {
    background: var(--theme-normal-tonic-color);
    border: none;
}

.box.box-solid>.box-header .btn-primary:hover,
.header-buttons .btn-warning:hover,
.entity-main-block .btn-warning:hover,
.row-add-note-button .btn-warning:hover,
.box-body .btn-warning:hover {
    background: var(--theme-light-tonic-color);
    text-shadow: none;
}

.btn-box-tool {
    color: var(--theme-light-text);
}

.btn-box-tool:hover,
.open .btn-box-tool {
    color: var(--theme-light-text);
    background: transparent;
}

.label-warning {
    background-color: var(--theme-normal-tonic-color) !important;
}

.box.box-solid>.box-header .btn-dafault:hover {
    background: transparent;
}

.entity-grid .entity-submenu a:hover,
.entity-grid .entity-sidebar a:hover,
.entity-grid .entity-story-block a:hover,
.box-body a:hover {
    text-shadow: 0 0 8px red;
}

.box {
    background-color: var(--theme-dark-background);
}

/* Pagination */

.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    color: var(--theme-light-text);
    background-color: var(--theme-soft);
    border-color: var(--theme-border);
}

/* Cancel the hover effect on striped tables */
.table-hover tbody tr:hover,
.table-striped>tbody>tr:nth-of-type(odd):hover {
    background-color: transparent;
}

.table-striped>tbody>tr:nth-of-type(odd):hover {
    background-color: var(--table-highlight);
}

/* Header Tables */

.table>thead:first-child>tr>th {
    border-bottom: none;
}

/* Redefining the table font size */
.table.table-striped>tbody>tr>td>a {
    font-size: 14px;
}

/**********************************/
/********** ENTITY PAGE **********/
/********************************/


/***********/
/* HEADER */

/* New Header Font */
.box-header .box-title,
.box-header>.fa,
.box-header>.glyphicon,
.box-header>.ion {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 17px;
    color: var(--theme-light-text);
}

/* Add an unique red border */
.box-header.with-border {
    border-bottom: 2px solid var(--theme-normal-tonic-color) !important;
}

/* Exception for modules boxes */

.box-module .box-header.with-border {border: none!important;}

.no-border .box-header {
    border: none;
}

/*********/
/* BODY */

/* Calendars */

.today .bg-light-blue,
.today .label-primary,
.today .modal-primary .modal-body {
    background-color: var(--theme-soft-background) !important;
}

.calendar tbody td .colour-pallet {
    background-color: var(--theme-light-background) !important;
}

/* Conversations  */

.box-conversation .box-comments .comment-text {
    color: var(--theme-main-text);
}

.box-conversation .box-comments strong.user {
    color: var(--theme-light-text);
}

.text-muted {
    color: var(--theme-main-text);
    opacity: 0.3;
}

/*****************/
/* LEFT SIDEBAR */

/* Marker for active category entity page */

.nav-stacked>li.active>a,
.nav-stacked>li.active>a:hover {
    border-left-color: var(--theme-normal-tonic-color);
}

.nav-tabs-custom>.nav-tabs>li.active {
    border-top-color: var(--theme-normal-tonic-color);
}

/******************/
/* RIGHT SIDEBAR */

/* Redefinition of the sidebar font */
.sidebar-section-box .sidebar-section-title {
    font-family: 'Roboto', 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.06rem;
    color: var(--theme-light-text);
}

.list-group .list-group-item span {
    color: var(--body-text);
}

.sidebar-section-box .sidebar-elements .element .title {
    color: var(--header-text);
}

/* Adding a separator between the different elements */
.sidebar-elements .element:not(:last-child) {
    border-color: var(--list-group-item-border);
}

/*****************/
/* SEARCH PAGES */

.alert-danger,
.alert-error,
.bg-red,
.callout.callout-danger,
.label-danger,
.modal-danger .modal-body {
    background-color: var(--theme-normal-tonic-color) !important;
}

a.create-random-character {
    background-color: var(--btn-default-background);
    border-color: var(--box-header-background);
    color: var(--btn-default-text);
}

a.create-random-character:hover {
    background-color: var(--btn-default-hover-background);
    border-color: var(--box-header-background);
    color: var(--theme-light-text);
    text-shadow: 0 0 8px red;
}

/*****************************

Author : MisterHims
Created for : Kanka v1.27.0
Plugin Version : 0.1 beta

CREDITS :
Concept-Cube - For the Background Image - https://www.deviantart.com/concept-cube/art/Fantasy-Landscape-V-434074069
Sasmira - RPG-Styled-UI - https://github.com/Xbozon/rpg-styled-ui - For the inspiration and UI Elements
Guardian - https://marketplace.kanka.io/profiles/17794 - For the Background Image Plugin
Salvatos - https://marketplace.kanka.io/profiles/22039 - For the Scrollable Main Sidebar Plugin  
Davsama - For the idea and more