Kleines Experiment: Dark-Mode

For topics beyond KeyHelp. / Für Themen jenseits von KeyHelp.
User avatar
keyhelpuser
Posts: 20
Joined: Sat 13. Mar 2021, 21:56
Location: ...earth
Contact:

Re: Kleines Experiment: Dark-Mode

Post by 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.
Image
Instructions:
Settings>Configuration>White Label>(Edit)All Languages: Additional CSS add this code - SAVE

Code: Select all

.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;
}
Attachments
theme-keyhelp.png
User avatar
keyhelpuser
Posts: 20
Joined: Sat 13. Mar 2021, 21:56
Location: ...earth
Contact:

Re: Kleines Experiment: Dark-Mode

Post by keyhelpuser »

I made a few changes to the domain tab. Let's encrypt is now yellow, the rest of the certificates are green. File to download in zip format, unpack and put content in Additional CSS.
If you have any comments, feel free to discuss them here. I hope the forum moderators will not close this topic in the forum ;)
Attachments
keyhelp_domain_themes.png
Lou Zypher
Posts: 64
Joined: Thu 28. Feb 2019, 10:07

Re: Kleines Experiment: Dark-Mode

Post by Lou Zypher »

Very nicely done, the color scheme is really harmonious in my opinion.

Thumbs up!
User avatar
keyhelpuser
Posts: 20
Joined: Sat 13. Mar 2021, 21:56
Location: ...earth
Contact:

Re: Kleines Experiment: Dark-Mode

Post by keyhelpuser »

The link to the new css file is always available in my signature. It will be easier this way ;)
User avatar
24unix
Posts: 1560
Joined: Sun 21. Jun 2020, 17:16
Location: Kollmar
Contact:

Re: Kleines Experiment: Dark-Mode

Post by 24unix »

keyhelpuser wrote: Wed 12. May 2021, 23:57 The link to the new css file is always available in my signature. It will be easier this way ;)
I really like your theme, orange/mango is my favorite accent color :)

But, when one compares your theme with the one from page 1, there are too many light regions.

Are you still working on this theme?
mfg Micha
--
If Bill Gates had a nickel for every time Windows crashed …
… oh wait, he does.
User avatar
keyhelpuser
Posts: 20
Joined: Sat 13. Mar 2021, 21:56
Location: ...earth
Contact:

Re: Kleines Experiment: Dark-Mode

Post by keyhelpuser »

Hi, I've been a bit busy in the last few weeks, of course I'm continuing the project - a new edition of the theme will be available next week.
Attachments
new_edition_theme_for_keyhelp_by_tinycube.png
User avatar
24unix
Posts: 1560
Joined: Sun 21. Jun 2020, 17:16
Location: Kollmar
Contact:

Re: Kleines Experiment: Dark-Mode

Post by 24unix »

keyhelpuser wrote: Fri 18. Feb 2022, 21:41 Hi, I've been a bit busy in the last few weeks, of course I'm continuing the project - a new edition of the theme will be available next week.
Wow that looks awesome. Please keep us updated.
mfg Micha
--
If Bill Gates had a nickel for every time Windows crashed …
… oh wait, he does.
User avatar
keyhelpuser
Posts: 20
Joined: Sat 13. Mar 2021, 21:56
Location: ...earth
Contact:

Re: Kleines Experiment: Dark-Mode

Post by keyhelpuser »

Hello everyone, I had a little spare time so theme 1.2 for keyhelp has been released - link in signature.
User avatar
24unix
Posts: 1560
Joined: Sun 21. Jun 2020, 17:16
Location: Kollmar
Contact:

Re: Kleines Experiment: Dark-Mode

Post by 24unix »

keyhelpuser wrote: Sun 20. Feb 2022, 19:36 Hello everyone, I had a little spare time so theme 1.2 for keyhelp has been released - link in signature.
Thank you for the great work. I was too fast with my documentation:
https://git.24unix.net/tracer/bindAPI

I'll recreate my screenshots tomorrow with the new awesome Dark theme.
mfg Micha
--
If Bill Gates had a nickel for every time Windows crashed …
… oh wait, he does.
User avatar
keyhelpuser
Posts: 20
Joined: Sat 13. Mar 2021, 21:56
Location: ...earth
Contact:

Re: Kleines Experiment: Dark-Mode

Post by keyhelpuser »

The next version 1.3 will be available soon, additionally I will make a typical black theme and that's it. I am slowly getting ready to create a theme from scratch but that will be a different story ;)

bindAPI - great thing! I downloaded the repository to a private git server as a mirror
User avatar
24unix
Posts: 1560
Joined: Sun 21. Jun 2020, 17:16
Location: Kollmar
Contact:

Re: Kleines Experiment: Dark-Mode

Post by 24unix »

keyhelpuser wrote: Sun 20. Feb 2022, 22:27 bindAPI - great thing! I downloaded the repository to a private git server as a mirror
You're welcome.

Everything besides MS-GitHub is OK.
mfg Micha
--
If Bill Gates had a nickel for every time Windows crashed …
… oh wait, he does.
User avatar
24unix
Posts: 1560
Joined: Sun 21. Jun 2020, 17:16
Location: Kollmar
Contact:

Re: Kleines Experiment: Dark-Mode

Post by 24unix »

BTW, why are LE Certs yellow?

They are not less secure than commercial ones, I find it misleading to mark them yellow instead of green.

Not to be taken too seriously :-)
It would even be better to mark certs from Comodo & Co as red:

"Hey, fool, you're wasting money!“ :-)
mfg Micha
--
If Bill Gates had a nickel for every time Windows crashed …
… oh wait, he does.
User avatar
keyhelpuser
Posts: 20
Joined: Sat 13. Mar 2021, 21:56
Location: ...earth
Contact:

Re: Kleines Experiment: Dark-Mode

Post by keyhelpuser »

LE Certs is yellow because it is easier to distinguish them from purchased certificates - green ;)

Theme keyhelp 1.3 in beta has been released!
User avatar
24unix
Posts: 1560
Joined: Sun 21. Jun 2020, 17:16
Location: Kollmar
Contact:

Re: Kleines Experiment: Dark-Mode

Post by 24unix »

keyhelpuser wrote: Sat 26. Feb 2022, 23:57 LE Certs is yellow because it is easier to distinguish them from purchased certificates - green ;)

Theme keyhelp 1.3 in beta has been released!
Green means good, yellow means not so good.

I'd suggest changing the order.

I'll check out 1.3 later.
Thanks for your efforts.
mfg Micha
--
If Bill Gates had a nickel for every time Windows crashed …
… oh wait, he does.
User avatar
keyhelpuser
Posts: 20
Joined: Sat 13. Mar 2021, 21:56
Location: ...earth
Contact:

Re: Kleines Experiment: Dark-Mode

Post by keyhelpuser »

Theme keyhelp 1.4 BETA has been released
Post Reply