Einen Überblick über das Administrationstool KeyHelp der Keyweb AG und dessen Download gibt es auf https://www.keyhelp.de

Dieses Forum soll es interessierten Benutzern ermöglichen, sich über KeyHelp auszutauschen und Hilfe bei Problemen zu finden.

Kleines Experiment: Dark-Mode

Für die restlichen Themen
keyhelpuser
Beiträge: 4
Registriert: Sa 13. Mär 2021, 21:56

Re: Kleines Experiment: Dark-Mode

Beitrag von keyhelpuser »

Hi, Theme adapted to the personal project ,maybe it will be useful to someone. I can't solve the problem with the add file option because I keep getting the blue button color (.file-cta, .file-name). The rest should work, at least I didn't notice any other problems.
Bild
Instructions:
Settings>Configuration>White Label>(Edit)All Languages: Additional CSS add this code - SAVE

Code: Alles auswählen

.title {
    color: white;
}

html {
    background-color: #2B3E50;
}

#header {
    background-color: #2B3E50;
}

#user-menu {
    background-color: #2B3E50;
}

#header a {
    color: #e0dada;
}

.dropdown-item {
    color: #cacaca;
}

.card-header {
    background-color: #00000040;
}

.card {
    color: #fff;
}

.card-content {
    background-color: #7b7b7b21;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: #f0efef;
}

.card-footer {
    background-color: #b6b6bc;
}

.breadcrumb li + li::before {

    color: #fffafa;
}

.breadcrumb li.is-disabled a {
    color: #fff;
}

.breadcrumb a {
    color: #6fbcff;
}
.breadcrumb a:hover {
    color: #ffb96f;
}

.card {
    color: #2b2b2b;
}

.has-text-grey-light {
    color: #8e8e8e !important;
}

.tabs a {
    color: #ffffffbf;
}

.tabs.is-boxed li.is-active a {
    background-color: #d7d7d7;
}

.tabs.is-boxed a:hover {
    background-color: #ddd;
    border-bottom-color: #0f0f0f;
}
.select select, .textarea, .input {
    background-color: #fbfbfb;
    border-color: #dbdbdb;
    color: #363636;
}
input[disabled], input[readonly], textarea[disabled], select[disabled] {
    color: #0d0d0d !important;
    border-color: #999797 !important;
    background-color: #c7c7d2 !important;
}
.has-text-grey {
    color: #555 !important;
}
.table {
    color: #000;
}
.file.is-link .file-cta {
    background-color: #DF691A;
    border-color: transparent;
    color: #fff;
    border-radius: 100px;
}

.file.is-link:hover .file-cta:hover {
    background-color: #E4E4EA;
    border-color: #DF691A;
    color: #DF691A;
}

.button.is-link {
    background-color: #DF691A;
    border-color: transparent;
    color: #fff;
    border-radius: 100px;
}

.button.is-link:hover {
    color: #DF691A;
    background-color: #E4E4EA;
    border-color: #DF691A;
}

.button.is-danger:hover {
    color: #A62C44;
    background-color: #E4E4EA;
    border-color: #A62C44;
}

.button.is-danger {
    background-color: #a62c44;
    border-color: transparent;
    color: #fff;
    border-radius: 100px;
}

.button.is-small:not(.is-rounded) {
    border-radius: 100px;
}

body {
    color: #cecece;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    font-family: IBM Plex Mono,monospace;
}

body, button, input, optgroup, select, textarea {
    font-family: IBM Plex Mono,monospace;
}

a {
    color: #0062ff;
}

.menu-list a.is-active {
    background-color: #DF691A;
    color: #fff;
}

#sidebar {
    background-color: #2B3E50;
    border-right: 1px solid #2B3E50;
}

a {
    color: #DF691A;
}

.has-text-link {
    color: #DF691A !important;
}

.box {
    border-radius: 9px;
}

.table tr.is-selected {
    background-color: #DF691A;
    color: #fff;
}
.has-text-danger {
    color: #2B3E50 !important;
}

.card {
    border-radius: 9px;
}

.breadcrumb a {
    color: #DF691A;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: #E4E4EA;
}

.card-header {
    background-color: #E4E4EA;
}

.card-footer {
    background-color: #E4E4EA;
}

.card-footer:first-child, .card-content:first-child, .card-header:first-child {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.card-footer:last-child, .card-content:last-child, .card-header:last-child {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}



.file-name {
    border-color: #E4E4EA;
}

.file-cta, .file-name {
    border-color: #E4E4EA;
}

.modal-close, .delete {
    background-color: #DF691A;
}

.tabs li.is-active a {
    color: #DF691A;
}

.button {
    border-radius: 30px;
}

.message-body {
    color: #DF691A;
}

.message.is-info .message-body {
    border-color: #DF691A;
    color: #DF691A;
}

.message.is-info {
    background-color: #E4E4EA;
}

.message.is-success .message-body {
    border-color: #DF691A;
    color: #DF691A;
}

.message.is-success {
    background-color: #E4E4EA;
}

.card {
    color: #DF691A;
}

.button.is-link.is-outlined {
    background-color: transparent;
    border-color: #DF691A;
    color: #DF691A;
}
.button.is-link.is-outlined:hover {
    color: #DF691A;
    background-color: #E4E4EA;
    border-color: #DF691A;
}

.column.is-4-fullhd {
    flex: 0 1 auto;
    width: 33%;
}

.columns:not(.is-desktop) {
    justify-content: space-around;
    flex-flow: row wrap;
    align-items: stretch;
}

.label {
    color: #DF691A;
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    color: #DF691A;
    font-weight: 600;
    line-height: 1.125;
}

strong {
    color: #B6B6BC;
    font-weight: 700;
}
Dateianhänge
theme-keyhelp.png
Antworten