fix: Move data-theme attribute to root (html)
- So that the HTML background matches with the theme background color
This commit is contained in:
Suraj Shetty
parent
0e0413d096
commit
caaed1a4e5
2 changed files with 69 additions and 78 deletions
|
|
@ -14,7 +14,7 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
|
|||
}
|
||||
|
||||
refresh() {
|
||||
this.current_theme = document.body.dataset.theme;
|
||||
this.current_theme = document.documentElement.getAttribute("data-theme") || "light";
|
||||
this.fetch_themes().then(() => {
|
||||
this.render();
|
||||
});
|
||||
|
|
@ -45,7 +45,6 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
get_preview_html(theme) {
|
||||
const preview = $(`<div class="${this.current_theme == theme.name ? "selected" : "" }">
|
||||
<div data-theme=${theme.name}>
|
||||
|
|
@ -69,15 +68,9 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
|
|||
</div>
|
||||
</div>`);
|
||||
|
||||
// preview.on('mouseover', () => {
|
||||
// this.toggle_theme(theme.name, true)
|
||||
// })
|
||||
|
||||
// preview.on('mouseleave', () => {
|
||||
// this.toggle_theme(this.current_theme, true)
|
||||
// })
|
||||
|
||||
preview.on('click', () => {
|
||||
if (this.current_theme === theme.name) return;
|
||||
|
||||
this.themes.forEach((th) => {
|
||||
th.$html.removeClass("selected");
|
||||
});
|
||||
|
|
@ -89,19 +82,15 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
|
|||
return preview;
|
||||
}
|
||||
|
||||
toggle_theme(theme, preview=false) {
|
||||
if (!preview) {
|
||||
document.body.dataset.theme = theme.toLowerCase();
|
||||
frappe.show_alert("Theme Changed", 3);
|
||||
toggle_theme(theme) {
|
||||
this.current_theme = theme.toLowerCase();
|
||||
document.documentElement.setAttribute("data-theme", this.current_theme);
|
||||
frappe.show_alert("Theme Changed", 3);
|
||||
|
||||
frappe.call('frappe.core.doctype.user.user.switch_theme', {
|
||||
theme: toTitle(theme)
|
||||
});
|
||||
} else {
|
||||
document.body.dataset.theme = theme.toLowerCase();
|
||||
}
|
||||
frappe.xcall("frappe.core.doctype.user.user.switch_theme", {
|
||||
theme: toTitle(theme)
|
||||
});
|
||||
}
|
||||
|
||||
show() {
|
||||
this.dialog.show();
|
||||
}
|
||||
|
|
@ -109,4 +98,4 @@ frappe.ui.ThemeSwitcher = class ThemeSwitcher {
|
|||
hide() {
|
||||
this.dialog.hide();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,65 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<!-- Chrome, Firefox OS and Opera -->
|
||||
<meta name="theme-color" content="#0089FF">
|
||||
<!-- Windows Phone -->
|
||||
<meta name="msapplication-navbutton-color" content="#0089FF">
|
||||
<!-- iOS Safari -->
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="#0089FF">
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
<meta name="author" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,
|
||||
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="white">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>Frappe</title>
|
||||
<link rel="shortcut icon"
|
||||
href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
|
||||
<link rel="icon"
|
||||
href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
|
||||
{% for include in include_css -%}
|
||||
<link type="text/css" rel="stylesheet" href="{{ include }}?ver={{ build_version }}">
|
||||
{%- endfor -%}
|
||||
</head>
|
||||
<body data-theme="{{ desk_theme.lower() }}">
|
||||
{% include "public/icons/timeless/symbol-defs.svg" %}
|
||||
<div class="centered splash">
|
||||
<img src="{{ splash_image or "/assets/frappe/images/frappe-framework-logo.png" }}"
|
||||
style="max-width: 100px; max-height: 100px;">
|
||||
</div>
|
||||
<div class="main-section">
|
||||
<header></header>
|
||||
<div id="body"></div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
<html data-theme="{{ desk_theme.lower() }}">
|
||||
<head>
|
||||
<!-- Chrome, Firefox OS and Opera -->
|
||||
<meta name="theme-color" content="#0089FF">
|
||||
<!-- Windows Phone -->
|
||||
<meta name="msapplication-navbutton-color" content="#0089FF">
|
||||
<!-- iOS Safari -->
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="#0089FF">
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
<meta name="author" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,
|
||||
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="white">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>Frappe</title>
|
||||
<link rel="shortcut icon"
|
||||
href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
|
||||
<link rel="icon"
|
||||
href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
|
||||
{% for include in include_css -%}
|
||||
<link type="text/css" rel="stylesheet" href="{{ include }}?ver={{ build_version }}">
|
||||
{%- endfor -%}
|
||||
</head>
|
||||
<body>
|
||||
{% include "public/icons/timeless/symbol-defs.svg" %}
|
||||
<div class="centered splash">
|
||||
<img src="{{ splash_image or "/assets/frappe/images/frappe-framework-logo.png" }}"
|
||||
style="max-width: 100px; max-height: 100px;">
|
||||
</div>
|
||||
<div class="main-section">
|
||||
<header></header>
|
||||
<div id="body"></div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
window._version_number = "{{ build_version }}";
|
||||
// browser support
|
||||
window.app = true;
|
||||
window.dev_server = {{ dev_server }};
|
||||
<script type="text/javascript">
|
||||
window._version_number = "{{ build_version }}";
|
||||
// browser support
|
||||
window.app = true;
|
||||
window.dev_server = {{ dev_server }};
|
||||
|
||||
if(!window.frappe) window.frappe = {};
|
||||
if(!window.frappe) window.frappe = {};
|
||||
|
||||
frappe.boot = {{ boot }};
|
||||
frappe.boot = {{ boot }};
|
||||
|
||||
frappe.csrf_token = "{{ csrf_token }}";
|
||||
frappe.csrf_token = "{{ csrf_token }}";
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
||||
{% for include in include_js %}
|
||||
<script type="text/javascript" src="{{ include }}?ver={{ build_version }}"></script>
|
||||
{% endfor %}
|
||||
{% include "templates/includes/app_analytics/google_analytics.html" %}
|
||||
{% include "templates/includes/app_analytics/mixpanel_analytics.html" %}
|
||||
{% for include in include_js %}
|
||||
<script type="text/javascript" src="{{ include }}?ver={{ build_version }}"></script>
|
||||
{% endfor %}
|
||||
{% include "templates/includes/app_analytics/google_analytics.html" %}
|
||||
{% include "templates/includes/app_analytics/mixpanel_analytics.html" %}
|
||||
|
||||
{% for sound in (sounds or []) %}
|
||||
<audio preload="auto" id="sound-{{ sound.name }}" volume={{ sound.volume or 1 }}>
|
||||
<source src="{{ sound.src }}"></source>
|
||||
</audio>
|
||||
{% endfor %}
|
||||
</body>
|
||||
{% for sound in (sounds or []) %}
|
||||
<audio preload="auto" id="sound-{{ sound.name }}" volume={{ sound.volume or 1 }}>
|
||||
<source src="{{ sound.src }}"></source>
|
||||
</audio>
|
||||
{% endfor %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue