White-Label - Dark Mode

Für Modifikationen in und um KeyHelp.
Post Reply
tellerrocker
Posts: 15
Joined: Tue 31. Mar 2020, 09:26

White-Label - Dark Mode

Post by tellerrocker »

Nach langer Zeit bin ich mal wieder zu KeyHelp zurückgekommen und werde erstmal ohne Pro-Version starten. Daher das ich habe das Light Layout nicht mag habe ich kurzerhand ein kleinen "Self-Dark-Mode" zusammen geschrieben. Läuft dauerhaft über die White-Label Funktion. Hier für euch:

Code: Select all

html, body {
	background-color: #181821 !important;
	color: #bdbec9 !important;
}
.table th, .table {
	color: #bdbec9 !important;
}
#header {
	background-color: #1f1f2b !important;
	border-bottom: 0px solid #1f1f2b !important;
	box-shadow: 0px 0px 0px rgb(10 10 10 / 10%) !important;
}
#sidebar {
	background-color: #1f1f2b !important;
	border-right: 0px solid #30343f !important;
	box-shadow: 0px 0px 0px rgb(10 10 10 / 20%) !important;
}
.menu-list a.is-active {
    background-color: transparent !important;
    color: #83d8ae !important;
}
.card {
	background-color: #1f1f2b !important;
	color: #bdbec9 !important;
}
.title, .card-header-title, strong {
	color: #ffffff !important;
}
.breadcrumb a, .breadcrumb li.is-disabled a {
	color: #bdbec9 !important;
}
.breadcrumb a:hover, .breadcrumb li.is-disabled a:hover {
	color: #83d8ae !important;
}
.icon i {
	color: #83d8ae !important;
}
.card-content:not(:first-child), .card-footer {
    border-top: 0px !important;
}
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: transparent !important;
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
    background-color: #2a2a39 !important;
}
.table td, .table th {
	padding: 0.75em 1em !important;
	border-bottom: 1px solid #2a2a39 !important;
}
a, .tabs a:hover {
	color: #83d8ae;
}
a:hover {
	color: #bdbec9;
}
.tabs ul {
	border-bottom-width: 0px !important;
}
.tabs.is-boxed a {
	background-color: #232331 !important;
    border: 1px solid transparent;
    border-radius: 4px 4px 4px 4px;
}
.tabs.is-boxed li.is-active a {
	background-color: #1f1f2b;
	border-color: transparent !important;
}
.tabs li.is-active a {
	color: #fff !important;
}
.tabs.is-boxed a:hover {
    border-bottom-color: transparent !important;
}
.tabs li {
	margin-left: 5px;
	margin-right: 5px;
}
.label {
	color: #ffffff !important;
}
Ist noch nicht 100% fertig aber der Rest sind nur Kleinigekeiten die jeder hin bekommt ;)
Top
hfuser
Posts: 1
Joined: Mon 16. Jan 2023, 18:09

Re: White-Label - Dark Mode

Post by hfuser »

Uhh .. looking nice :)
Top
tellerrocker
Posts: 15
Joined: Tue 31. Mar 2020, 09:26

Re: White-Label - Dark Mode

Post by tellerrocker »

New Version with some bug fixed :)

Code: Select all

:root {
  --accentcolor: #83d8ae;
  --accentcolor-hover: #69bf95;
}
html, body {
	background-color: #181821 !important;
	color: #bdbec9 !important;
}
.table th, .table {
	color: #bdbec9 !important;
}
#header {
	background-color: #1f1f2b !important;
	border-bottom: 0px solid #1f1f2b !important;
}
#sidebar {
	background-color: #1f1f2b !important;
	border-right: 0px solid #30343f !important;
}
.menu-list a.is-active {
    background-color: transparent !important;
    color: var(--accentcolor) !important;
}
.card, .modal-card-head {
	background-color: #1f1f2b !important;
	color: #bdbec9 !important;
}
.title, .card-header-title, strong {
	color: #ffffff !important;
}
.breadcrumb a, .breadcrumb li.is-disabled a {
	color: #bdbec9 !important;
}
.breadcrumb a:hover, .breadcrumb li.is-disabled a:hover {
	color: var(--accentcolor) !important;
}
.card-content:not(:first-child), .card-footer {
    border-top: 0px !important;
}
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: transparent !important;
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
    background-color: #2a2a39 !important;
}
.table td, .table th {
	padding: 0.75em 1em !important;
	border-bottom: 1px solid #2a2a39 !important;
}
a, .tabs a:hover {
	color: var(--accentcolor);
}
a:hover {
	color: #bdbec9;
}
.tabs ul {
	border-bottom-width: 0px !important;
}
.tabs.is-boxed a {
	background-color: #232331 !important;
    border: 1px solid transparent;
    border-radius: 4px 4px 4px 4px;
}
.tabs.is-boxed li.is-active a {
	background-color: #1f1f2b;
	border-color: transparent !important;
}
.tabs li.is-active a {
	color: #fff !important;
}
.tabs.is-boxed a:hover {
    border-bottom-color: transparent !important;
}
.tabs li {
	margin-left: 5px;
	margin-right: 5px;
}
.label {
	color: #ffffff !important;
}
.modal-card-body {
      background-color: #1f1f2b !important;
}
.modal-card-head {
      background-color: #1f1f2b !important;
      border-bottom: 0 !important;
}
.modal-card-foot {
      background-color: #1f1f2b !important;
      border-top: 0 !important;
}
.modal-card-title {
    color: #ffffff !important;
}
.has-text-link, .menu-label i {
  color: var(--accentcolor) !important;
}
.button.is-link, .file.is-link .file-cta{
  background-color: var(--accentcolor) !important;
  color: #ffffff !important;
}
.button.is-link:hover, .file.is-link .file-cta:hover{
  background-color: var(--accentcolor-hover) !important;
  color: #ffffff !important;
}
How to use the custom dark mode:
1 - Settings > Configuration > White Label > Your language (Which is in use)
2 - scroll down to "Additional CSS" and add the CSS Code
3 - scroll down and save

@KeyWeb AG Feel free to use it ;)
Demo
Demo
Last edited by tellerrocker on Tue 1. Oct 2024, 13:17, edited 1 time in total.
Top
User avatar
24unix
Posts: 1825
Joined: Sun 21. Jun 2020, 17:16
Location: Kollmar
Contact:
Contact 24unix

Re: White-Label - Dark Mode

Post by 24unix »

That look great, thx.

What do you think about some variables, e.g. for the accent color?

https://developer.mozilla.org/en-US/doc ... properties
mfg Micha
--
95% aller Programmier halten sich für genial.
Der Rest immer noch für überdurchschnittlich.
Top
tellerrocker
Posts: 15
Joined: Tue 31. Mar 2020, 09:26

Re: White-Label - Dark Mode

Post by tellerrocker »

Done 8-)
Top
User avatar
24unix
Posts: 1825
Joined: Sun 21. Jun 2020, 17:16
Location: Kollmar
Contact:
Contact 24unix

Re: White-Label - Dark Mode

Post by 24unix »

tellerrocker wrote: ↑Tue 1. Oct 2024, 13:18Done 8-)
Cool :-) Thx.
mfg Micha
--
95% aller Programmier halten sich für genial.
Der Rest immer noch für überdurchschnittlich.
Top
tellerrocker
Posts: 15
Joined: Tue 31. Mar 2020, 09:26

Re: White-Label - Dark Mode

Post by tellerrocker »

Changelog:
- setup a login layout
- add --mainbackground (body background)
- add --boxedbackground

Upcoming & last update:
- Font color --textcolor --highlighttextcolor

Code: Select all

:root {
  --accentcolor: #83d8ae;
  --accentcolor-hover: #69bf95;
  --mainbackground: #181821;
  --boxedbackground: #1f1f2b;
}
html, body, .hero.is-primary {
	background-color: var(--mainbackground) !important;
	color: #bdbec9 !important;
}
.table th, .table {
	color: #bdbec9 !important;
}
#header, #sidebar {
	background-color: var(--boxedbackground) !important;
	border: 0 !important;
}
.menu-list a.is-active {
    background-color: transparent !important;
    color: var(--accentcolor) !important;
}
.card, .modal-card-head {
	background-color: var(--boxedbackground) !important;
	color: #bdbec9 !important;
}
.title, .card-header-title, strong {
	color: #ffffff !important;
}
.breadcrumb a, .breadcrumb li.is-disabled a {
	color: #bdbec9 !important;
}
.breadcrumb a:hover, .breadcrumb li.is-disabled a:hover {
	color: var(--accentcolor) !important;
}
.card-content:not(:first-child), .card-footer {
    border: 0 !important;
}
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: transparent !important;
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
    background-color: #2a2a39 !important;
}
.table td, .table th {
	padding: 0.75em 1em !important;
	border-bottom: 1px solid #2a2a39 !important;
}
a, .tabs a:hover {
	color: var(--accentcolor);
}
a:hover {
	color: #bdbec9;
}
.tabs ul {
	border-bottom-width: 0px !important;
}
.tabs.is-boxed a {
	background-color: #232331 !important;
    border: 1px solid transparent;
    border-radius: 4px 4px 4px 4px;
}
.tabs.is-boxed li.is-active a {
	background-color: var(--boxedbackground);
	border-color: transparent !important;
}
.tabs li.is-active a {
	color: #fff !important;
}
.tabs.is-boxed a:hover {
    border-bottom-color: transparent !important;
}
.tabs li {
	margin-left: 5px;
	margin-right: 5px;
}
.label {
	color: #ffffff !important;
}
.modal-card-body {
      background-color: var(--boxedbackground) !important;
}
.modal-card-head {
      background-color: var(--boxedbackground) !important;
      border-bottom: 0 !important;
}
.modal-card-foot {
      background-color: var(--boxedbackground) !important;
      border-top: 0 !important;
}
.modal-card-title {
    color: #ffffff !important;
}
.has-text-link, .menu-label i {
  color: var(--accentcolor) !important;
}
.button.is-link, .file.is-link .file-cta{
  background-color: var(--accentcolor) !important;
  color: #ffffff !important;
}
.button.is-link:hover, .file.is-link .file-cta:hover{
  background-color: var(--accentcolor-hover) !important;
  color: #ffffff !important;
}
.box {
	background-color: var(--boxedbackground) !important;
	color: #bdbec9 !important;
}
Top
Post Reply

Return to “Modifikationen / Skripte”