josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds material dark theme

Browse Source
This commit is contained in:
Alicia Sykes
2021-06-02 18:54:57 +01:00
parent 453b162cac
commit f08a4dfbad
3 changed files with 108 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/styles/color-themes.scss
View File

@@ -174,7 +174,7 @@ html[data-theme='material-original'] {
--heading-text-color: #fff;
}
html[data-theme='material-dark'] {
html[data-theme='material-dark-original'] {
--primary: #08B0BB;
--settings-text-color: #08B0BB;
--background: #39434C;
@@ -275,50 +275,12 @@ html[data-theme='minimal-light'], html[data-theme='minimal-dark'] {
}
}
html[data-theme='material'] {
html[data-theme='material'], html[data-theme='material-dark'] {
--font-body: 'Raleway', serif;
--font-headings: 'Francois One', serif;
--primary: #363636;
--background: #f5f5f5;
--background-darker: #4285f4;
--item-group-outer-background: none;
--item-group-shadow: none;
--item-group-background: none;
--item-background: #fff;
--item-background-hover: #fff;
--item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
--item-text-color: #363636;
--item-group-heading-text-color-hover: #363636;
--item-icon-transform-hover: none;
--nav-link-background-color: #0c4eba;
--nav-link-text-color: #fff;
--nav-link-border-color: #0c4eba;
--settings-text-color: #363636;
--config-code-color: #363636;
--config-settings-background: #fff;
--config-settings-color: #363636;
--heading-text-color: #fff;
--curve-factor: 4px;
--curve-factor-navbar: 8px;
--search-container-background: #4285f4;
header {
background: #4285f4;
color: #fff;
.page-titles span.subtitle {
text-shadow: none;
}
}
footer {
opacity: 1;
color: #fff;
}
section.filter-container form label {
color: #fff;
}
.prism-editor-wrapper {
background: #f5f5f5;
}
.collapsable {
margin: 0;
padding: 0;
@@ -404,15 +366,15 @@ html[data-theme='material'] {
left: 0px;
height: 100%;
width: 1rem;
background-color: #ccd3dd80;
background: #ccd3dd80;
border-radius: 0 60% 60% 0;
transform: scale(0,1);
transform-origin: left center;
transition: all 0.2s linear 0s;
padding: 0 0.2rem;
}
&:hover {
div.icon-container {
&:hover, &:focus-within {
div.bounce {
text-indent: 1rem;
}
&:before {
@@ -446,6 +408,101 @@ html[data-theme='material'] {
}
}
html[data-theme='material'] {
--primary: #363636;
--background: #f5f5f5;
--background-darker: #4285f4;
--item-group-outer-background: none;
--item-group-shadow: none;
--item-group-background: none;
--item-background: #fff;
--item-background-hover: #fff;
--item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
--item-text-color: #363636;
--item-group-heading-text-color-hover: #363636;
--item-icon-transform-hover: none;
--nav-link-background-color: #0c4eba;
--nav-link-text-color: #fff;
--nav-link-border-color: #0c4eba;
--settings-text-color: #363636;
--config-code-color: #363636;
--config-settings-background: #fff;
--config-settings-color: #363636;
--heading-text-color: #fff;
--curve-factor: 4px;
--curve-factor-navbar: 8px;
--search-container-background: #4285f4;
header {
background: #4285f4;
color: #fff;
.page-titles span.subtitle {
text-shadow: none;
}
}
footer {
opacity: 1;
color: #fff;
}
section.filter-container form label {
color: #fff;
}
.prism-editor-wrapper {
background: #f5f5f5;
}
}
html[data-theme='material-dark'] {
--primary: #08B0BB;
--background: #313941;
--background-darker: #08B0BB;
--settings-background: #092b3a;
--settings-text-color: #08B0BB;
--item-group-background: none;
--item-group-outer-background: none;
--item-group-shadow: none;
--item-group-padding: 5px 0 0;
--item-group-heading-text-color: #e0e0e0;
--item-group-heading-text-color-hover: #08B0BB;
--item-text-color: #e0e0e0;
--item-shadow: 2px 2px 3px #00000082, 0 1px 10px #00000040;
--item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
--item-background: #414B55;
--item-background-hover: #414B55;
--settings-background: #131a1f;
--search-container-background: #131a1f;
--search-field-background: #39434c;
--heading-text-color: #131a1f;
--nav-link-text-color: #08B0BB;
--nav-link-background-color: #131a1f;
--nav-link-text-color-hover: #08B0BB;
--nav-link-background-color-hover: #131a1fc7;
--nav-link-border-color-hover: transparent;
--curve-factor: 2px;
--curve-factor-navbar: 0;
--welcome-popup-background: #131a1f;
--welcome-popup-text-color: var(--primary);
--config-settings-background: #131a1f;
--config-settings-color: #41e2ed;
--scroll-bar-color: #08B0BB;
--scroll-bar-background: #131a1f;
&::-webkit-scrollbar-thumb {
border-left: 1px solid #131a1f;
}
.item {
&:before, &:active {
background: #131a1f !important;
}
}
}
html[data-theme='minimal-light'] {
--primary: #a5a5a5;
--background: #ffffff;