+
+
diff --git a/packages/materialize b/packages/materialize
index a2650dd..90acdf6 160000
--- a/packages/materialize
+++ b/packages/materialize
@@ -1 +1 @@
-Subproject commit a2650dd1c05fa1b65f044eac18832aaa79388929
+Subproject commit 90acdf638b2f24808746ffabfdb68a2e0fc9a754
diff --git a/parallax-demo.html b/parallax-demo.html
index 08e0b18..b74f352 100644
--- a/parallax-demo.html
+++ b/parallax-demo.html
@@ -3,6 +3,23 @@
{{> head }}
+
diff --git a/partials/footer.html b/partials/footer.html
index 1a06117..a277720 100644
--- a/partials/footer.html
+++ b/partials/footer.html
@@ -6,8 +6,8 @@
diff --git a/sass.html b/sass.html
index 6d3dee4..36846e4 100644
--- a/sass.html
+++ b/sass.html
@@ -13,6 +13,7 @@
Help Materialize Grow
- We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by opening issues or contributing - on GitHub. + We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can + help us by opening issues or contributing on GitHub.
ContributeVariables
+Deprecated in Version 2.1.0. You can use CSS Variables now to change the colors. Take a look at Themes
When using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in
_variables.scss.
diff --git a/shadow.html b/shadow.html
index 3bbfe23..ae98ef6 100644
--- a/shadow.html
+++ b/shadow.html
@@ -32,45 +32,49 @@
@extend .z-depth-2. A z-depth-0 can be used to remove shadows from elements that have z-depths
by default.
-
-
+
+
- 0
-
+
+
- 1
-
+ document.getElementById("color-picker");
const themePrimaryColor = themes.getThemePrimaryColor();
if (toggleColorsButton && themePrimaryColor) {
@@ -206,7 +207,8 @@ document.addEventListener("DOMContentLoaded", async function () {
toggleColorsButton?.addEventListener("change", () => {
themes.setThemePrimaryColor(toggleColorsButton.value);
});
- */
+
+ //---------------------------------------------------------------
//------ Copy Button
diff --git a/src/style.scss b/src/style.scss
index 0344971..60b2893 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -26,7 +26,7 @@ $font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
h5 > span {
font-size: 14px;
margin-left: 15px;
- color: var(--font-color-medium);
+ color: var(--md-sys-color-on-surface-variant);
}
*/
@@ -125,12 +125,6 @@ footer {
//--------------
/*
-.parallax-demo header,
-.parallax-demo main,
-.parallax-demo footer {
- padding-left: 0;
-}
-
@media #{$medium-and-down} {
header,
main,
@@ -146,8 +140,6 @@ footer {
//--- Index Page Styles
-
-
.center {
text-align: center;
vertical-align: middle;
@@ -200,18 +192,6 @@ footer {
}
}
-
-
-// parallax demo
-.parallax-container {
- .text-center {
- position: absolute;
- top: 50%;
- left: 0;
- right: 0;
- margin-top: -27px;
- }
-}
*/
//--------- Code Styling
@@ -238,14 +218,14 @@ pre:has(code) {
// Styles one-liners
:not(pre) > code[class*="language-"] {
- background: var(--background-color-slight-emphasis);
+ background: rgba(0, 0, 0, 0.08);
color: var(--md-sys-color-on-background);
}
// copy code icons
.copyMessage,
.copyButton {
- color: var(--font-color-medium);
+ color: var(--md-sys-color-on-surface-variant);
position: absolute;
}
@@ -264,35 +244,12 @@ pre:has(code) {
cursor: pointer;
}
-//---------------------------
-
-@keyframes rotate {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-
-.gradient {
- --size: 100vh;
- --speed: 25s;
- --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
- width: var(--size);
- height: var(--size);
- filter: blur(calc(var(--size) / 5));
- background-image: linear-gradient(hsla(158, 81%, 41%, 0.85), hsl(252, 59%, 63%));
- animation: rotate var(--speed) var(--easing) alternate infinite;
- border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-}
-
// Footer
footer {
font-size: 0.9rem;
.footer-copyright,
.footer-copyright a {
- color: var(--font-color-medium);
+ color: var(--md-sys-color-on-surface-variant);
background-color: transparent;
}
}
@@ -318,7 +275,7 @@ ul.table-of-contents {
margin: 5px 0;
z-index: 2;
.search-wrapper {
- color: var(--font-color-medium);
+ color: var(--md-sys-color-on-surface-variant);
margin-top: -1px;
transition: margin 0.25s ease;
position: relative;
@@ -331,7 +288,7 @@ ul.table-of-contents {
border: 1px solid var(--md-sys-color-outline-variant);
border-radius: 3px;
margin: 0 auto;
- color: var(--font-color-medium);
+ color: var(--md-sys-color-on-surface-variant);
display: block;
font-size: 16px;
width: 80%;
@@ -365,16 +322,16 @@ ul.table-of-contents {
left: 35px;
}
z-index: 9999;
- background-color: var(--surface-color);
+ background-color: var(--md-sys-color-surface);
a {
font-size: 12px;
padding: 5px;
&.focused {
- background-color: var(--focus-color);
+ background-color: rgba(0, 0, 0, 0.12);
outline: none;
}
&:hover {
- background-color: var(--hover-color);
+ background-color: rgba(0, 0, 0, 0.04);
outline: none;
}
white-space: nowrap;
@@ -382,11 +339,18 @@ ul.table-of-contents {
}
}
-/*
-body.parallax-demo footer {
- margin-top: 0;
+// Thanks for Downloading
+#download-thanks {
+ transition: all 0.3s ease-in-out;
+ max-height: 300px;
+ opacity: 1;
+}
+#download-thanks.is-closed {
+ opacity: 0;
+ max-height: 0;
}
+/*
//About page styling
.image-container {
width: 100%;
@@ -421,18 +385,18 @@ body.parallax-demo footer {
#pushpin-demo-1 {
display: block;
height: inherit;
- background-color: var(--slider-track-color);
+ background-color: var(--md-sys-color-shadow-light);
}
// Valign Demo
.valign-demo {
height: 400px;
- border: 1px solid var(--secondary-color);
+ border: 1px solid var(--md-sys-color-secondary);
}
.talign-demo {
height: 100px;
- border: 1px solid var(--secondary-color);
+ border: 1px solid var(--md-sys-color-secondary);
}
// Transitions demos
@@ -441,27 +405,6 @@ body.parallax-demo footer {
opacity: 0;
}
-// Thanks for Downloading
-#download-thanks {
- transition: all 0.3s ease-in-out;
- overflow: hidden;
- max-height: 300px;
- opacity: 1;
- margin: 1rem 0;
- padding: 1rem;
-}
-
-#download-thanks .header {
- font-size: 1.75em;
- color: var(--md-sys-color-primary);
- margin: 0;
-}
-
-#download-thanks.is-closed {
- opacity: 0;
- max-height: 0;
-}
-
// For GitHub and OpenCollective
.ext-link > img {
vertical-align: middle;
@@ -470,8 +413,8 @@ body.parallax-demo footer {
#nav-mobile {
li .new.badge {
- background-color: var(--secondary-color);
- color: var(--font-on-secondary-color-main);
+ background-color: var(--md-sys-color-secondary);
+ color: var(--md-sys-color-on-secondary);
}
}
diff --git a/src/themes.ts b/src/themes.ts
index 1f53b91..2e12f9f 100644
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -9,7 +9,7 @@ export class Themes {
setThemePrimaryColor(value: string) {
localStorage.setItem(Themes.themePrimaryColorStorageKey, value);
- this.applyThemeProperties();
+ this.applyThemeProperties(this.isDarkMode());
}
getThemePrimaryColor(): string {
@@ -18,115 +18,54 @@ export class Themes {
return themeColor;
}
+ isDarkMode(): boolean {
+ // Manually stored
+ const stored = localStorage.getItem(Themes.themeModeStorageKey);
+ if (stored === "dark") return true;
+ if (stored === "light") return false;
+ // Via CSS or System
+ const isDarkModeByCss = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+ return isDarkModeByCss;
+ }
+
setLightMode() {
this.document.documentElement.setAttribute("theme", "light");
localStorage.setItem(Themes.themeModeStorageKey, "light");
- this.applyThemeProperties();
+ this.applyThemeProperties(false);
}
+
setDarkMode() {
this.document.documentElement.setAttribute("theme", "dark");
- localStorage.setItem("theme-mode", "dark");
- this.applyThemeProperties();
+ localStorage.setItem(Themes.themeModeStorageKey, "dark");
+ this.applyThemeProperties(true);
}
- public applyThemeProperties() {
- const mode = localStorage.getItem(Themes.themeModeStorageKey);
- const isDark = mode == "dark";
-
+ public applyThemeProperties(isDark: boolean) {
let themeColor = this.getThemePrimaryColor();
const color = argbFromHex(themeColor);
-
const atheme = themeFromSourceColor(color);
const target = this.document.body;
+ this.document.documentElement.style.colorScheme = isDark ? "dark" : "light";
applyTheme(atheme, { target: target, dark: isDark, brightnessSuffix: true });
- this.setThemeProperties(target);
}
downloadCss() {
const color = argbFromHex(this.getThemePrimaryColor());
-
const generator = new CssGenerator(themeFromSourceColor(color));
var fileLines = generator.tokens();
this.downloadFile("tokens.module.scss", fileLines.join("\n"));
}
downloadFile(filename, text) {
- var element = document.createElement("a");
+ const element = document.createElement("a");
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
element.setAttribute("download", filename);
-
element.style.display = "none";
document.body.appendChild(element);
-
element.click();
-
document.body.removeChild(element);
}
- public setThemeProperties(target: HTMLElement) {
- /*
- this.setThemeProperty(target, '--surface-color', '--md-sys-color-surface')
- this.setThemeProperty(target, '--background-color', '--md-sys-color-background')
- this.setThemeProperty(target, '--font-color-main', '--md-sys-color-on-background')
- this.setThemeProperty(target, '--font-color-medium', '--md-sys-color-on-surface-variant')
- this.setThemeProperty(target, '--font-color-disabled', '--md-sys-color-on-surface')
- this.setThemeProperty(target, '--font-on-primary-color-main', '--md-sys-color-on-primary')
- this.setThemeProperty(target, '--font-on-primary-color-dark-main', '--md-sys-color-on-primary-dark')
- this.setThemeProperty(target, '--font-on-primary-color-dark-medium', '--md-sys-color-on-surface-variant-dark')
- this.setThemeProperty(target, '--font-on-primary-color-medium', '--md-sys-color-on-surface-variant')
- //this.setThemeProperty(target, '---font-on-primary-color-disabled', '--')
- this.setThemeProperty(target, '--font-on-secondary-color-main', '--md-sys-color-on-secondary')
-
-
-
-
- // --hover-color: rgba(0, 0, 0, 0.04);
- // --focus-color: rgba(0, 0, 0, 0.12);
- // --focus-color-solid: #E0E0E0;
-
- // --background-color-disabled: rgba(0, 0, 0, 0.12);
- // --background-color-level-4dp: rgba(0, 0, 0, 0.09);
- this.setThemeProperty(target, '--background-color-level-16dp-solid', '--surface-color')
-
- // --background-color-slight-emphasis: rgba(0, 0, 0, 0.08);
-
- this.setThemeProperty(target, '--background-color-card', '--surface-color')
-
- // --tooltip-background-color: #313033;
- // --tooltip-font-color: rgba(255, 255, 255, 0.77);
-
- // --separator-color: #DDDDDD;
-
- // --error-color: #F44336;
-
-
- this.setThemeProperty(target, '--slider-track-color', '--md-sys-color-shadow-light')
- this.setThemeProperty(target, '--switch-thumb-off-color', '--md-ref-palette-primary100')
-
- // --carousel-indicator-color: rgba(255, 255, 255, 0.45);
-
- this.setThemeProperty(target, '--carousel-indicator-active-color', '--md-ref-palette-primary100')
- this.setThemeProperty(target, '--primary-color', '--md-sys-color-primary')
-
-
- this.setThemeProperty(target, '--primary-color-dark', '--md-sys-color-primary-dark')
- this.setThemeProperty(target, '--primary-color-raised-hover-solid', '--md-ref-palette-primary80')
- // --primary-color-font-medium-color: rgba(var(--primary-color-numeric), 0.7);
- // --primary-color-font-disabled-color: rgba(var(--primary-color-numeric), 0.4);
- // --primary-color-hover-opaque: rgba(var(--primary-color-numeric), 0.06);
- // --primary-color-focus-opaque: rgba(var(--primary-color-numeric), 0.18);
-
- this.setThemeProperty(target, '--secondary-color', '--md-sys-color-secondary')
- this.setThemeProperty(target, '--secondary-color-hover-solid', '--md-ref-palette-secondary70')
- this.setThemeProperty(target, '--secondary-color-focus-solid', '--md-ref-palette-secondary80')
- this.setThemeProperty(target, '--secondary-container-color', '--md-sys-color-secondary-container')
- this.setThemeProperty(target, '--font-on-secondary-container-color', '--md-sys-color-on-secondary-container')
-
-
- // --md_sys_color_on-surface: 28, 27, 31;
- */
- }
-
setThemeProperty(target: HTMLElement, targetProp: string, sourceProp: string) {
const color = target.style.getPropertyValue(sourceProp);
target.style.setProperty(targetProp, color);
diff --git a/themes.html b/themes.html
index 4eb6870..e15aeae 100644
--- a/themes.html
+++ b/themes.html
@@ -88,11 +88,10 @@
+
- 2
-
+
diff --git a/src/main.ts b/src/main.ts
index 42b0d83..e7e1183 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@ import { config } from "../config.materialize";
import { M } from "@materializecss/materialize";
import "./style.scss";
//import { argbFromHex, themeFromSourceColor } from "@material/material-color-utilities";
-//import { Themes } from "./themes";
+import { Themes } from "./themes";
import { autocompleteDemoData } from "./data-autocomplete";
import hljs from "highlight.js";
@@ -38,7 +38,7 @@ function escapeHtml(unsafe) {
globalThis.M = M;
document.addEventListener("DOMContentLoaded", async function () {
- //const themes = new Themes(document);
+ const themes = new Themes(document);
// CSS > Colors
document.querySelectorAll(".dynamic-color .col > div").forEach((el) => {
@@ -65,7 +65,7 @@ document.addEventListener("DOMContentLoaded", async function () {
onAutocomplete: (items) => {
if (items.length === 1) {
const targetItem = items[0];
- document.location.href = targetItem.url;
+ document.location.href = targetItem["url"];
}
},
});
@@ -78,7 +78,6 @@ document.addEventListener("DOMContentLoaded", async function () {
fetch("https://api.github.com/repos/materializecss/materialize/commits/main")
.then((resp) => resp.json())
.then((data) => {
- console.log(data);
const url = data.html_url;
const sha = data.sha.substring(0, 7);
const date = data.commit.author.date;
@@ -168,36 +167,38 @@ document.addEventListener("DOMContentLoaded", async function () {
(document.querySelector("#nav-mobile") as HTMLElement).style.overflow = "auto";
}
+ //---------------------------------------------------------------
// Theme
- const isDarkModeByCss = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
- const isDarkModeManual = localStorage.getItem("theme-mode") === "dark";
- const isDarkMode = isDarkModeManual || isDarkModeByCss;
+ const isDarkMode = themes.isDarkMode();
importCodeStyle(isDarkMode);
+ themes.applyThemeProperties(isDarkMode);
+
+ function setBtnState(isDark: boolean) {
+ const themeSwitch = document.querySelector("#theme-switch");
+ if (isDark) {
+ themeSwitch.classList.add("is-dark");
+ themeSwitch.querySelector("i").innerText = "light_mode";
+ (themeSwitch as any).title = "Switch to light mode";
+ return;
+ }
+ themeSwitch.classList.remove("is-dark");
+ themeSwitch.querySelector("i").innerText = "dark_mode";
+ (themeSwitch as any).title = "Switch to dark mode";
+ }
+ setBtnState(isDarkMode);
- //themes.applyThemeProperties();
const themeSwitch = document.querySelector("#theme-switch");
- if (themeSwitch) {
- themeSwitch.addEventListener("click", (e) => {
- e.preventDefault();
- if (!themeSwitch.classList.contains("is-dark")) {
- // Dark Theme
- themeSwitch.classList.add("is-dark");
- themeSwitch.querySelector("i").innerText = "light_mode";
- (themeSwitch as any).title = "Switch to light mode";
- document.documentElement.setAttribute("theme", "dark");
- localStorage.setItem("theme", "dark");
- //themes.setDarkMode();
- } else {
- themeSwitch.classList.remove("is-dark");
- themeSwitch.querySelector("i").innerText = "dark_mode";
- (themeSwitch as any).title = "Switch to dark mode";
- //themes.setLightMode();
- document.documentElement.setAttribute("theme", "light");
- localStorage.setItem("theme", "light");
- }
- });
- }
- /*
+ themeSwitch.addEventListener("click", (e) => {
+ e.preventDefault();
+ if (!themeSwitch.classList.contains("is-dark")) {
+ setBtnState(true);
+ themes.setDarkMode();
+ } else {
+ setBtnState(false);
+ themes.setLightMode();
+ }
+ });
+
const toggleColorsButton =
+
- 3
-
+
+
- 4
-
+
-
+
5
-
-<div class="col s12 m2">
- <p class="z-depth-1">z-depth-1</p>
-</div>
-<div class="col s12 m2">
- <p class="z-depth-2">z-depth-2</p>
-</div>
-<div class="col s12 m2">
- <p class="z-depth-3">z-depth-3</p>
-</div>
-<div class="col s12 m2">
- <p class="z-depth-4">z-depth-4</p>
-</div>
-<div class="col s12 m2">
- <p class="z-depth-5">z-depth-5</p>
+
+ <pre><code class="language-html"><xmp><div class="row">
+ <div class="col s12 m4 l3">
+ <p class="z-depth-0 p-3">0</p>
+ </div>
+ <div class="col s12 m4 l3">
+ <p class="z-depth-1 p-3">1</p>
+ </div>
+ <div class="col s12 m4 l3">
+ <p class="z-depth-2 p-3">2</p>
+ </div>
+ <div class="col s12 m4 l3">
+ <p class="z-depth-3 p-3">3</p>
+ </div>
+ <div class="col s12 m4 l3">
+ <p class="z-depth-4 p-3">4</p>
+ </div>
+ <div class="col s12 m4 l3">
+ <p class="z-depth-5 p-3">5</p>
+ </div>
</div>
-
- Creating a Theme
To create or overwrite a theme, you have to set the variables of the Theme. This variables can be defined in a seperate CSS-File and included before the
Materialize-CSS File inside of the
-
-
+ head
tags.
Deprecated in 2.1.0! Use the Material M3 Variables instead to create a custom Theme!
Here is an example of the standard Dark-Theme:
:root[theme='dark'] {
diff --git a/waves.html b/waves.html
index 4a268aa..159cc31 100644
--- a/waves.html
+++ b/waves.html
@@ -25,7 +25,7 @@
Introduction
Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design.
- Wave
+ Wave