forked from OrchardCMS/OrchardCore
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix Wysiwyg/Trumbowyg editor colors when dark theme enabled (OrchardC…
…MS#16356) --------- Co-authored-by: mdameer <mohammad_dameer@hotmail.com> Co-authored-by: Hisham Bin Ateya <hishamco_2007@yahoo.com> Co-authored-by: Mike Alhayek <mike@crestapps.com>
- Loading branch information
4 people
authored
Jun 27, 2024
1 parent
51eb7b8
commit 9133c52
Showing
35 changed files
with
250 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
26 changes: 26 additions & 0 deletions
26
src/OrchardCore.Modules/OrchardCore.ContentFields/ResourceManagementOptionsConfiguration.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| using Microsoft.Extensions.Options; | ||
| using OrchardCore.ResourceManagement; | ||
|
|
||
| namespace OrchardCore.ContentFields; | ||
|
|
||
| public sealed class ResourceManagementOptionsConfiguration : IConfigureOptions<ResourceManagementOptions> | ||
| { | ||
| public void Configure(ResourceManagementOptions options) | ||
| { | ||
| var manifest = new ResourceManifest(); | ||
|
|
||
| manifest | ||
| .DefineScript("trumbowyg-media-url") | ||
| .SetUrl("~/OrchardCore.ContentFields/Scripts/trumbowyg.media.url.min.js", "~/OrchardCore.ContentFields/Scripts/trumbowyg.media.url.js") | ||
| .SetDependencies("trumbowyg") | ||
| .SetVersion("1.0.0"); | ||
|
|
||
| manifest | ||
| .DefineScript("trumbowyg-media-tag") | ||
| .SetUrl("~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.min.js", "~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.js") | ||
| .SetDependencies("trumbowyg") | ||
| .SetVersion("1.0.0"); | ||
|
|
||
| options.ResourceManifests.Add(manifest); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
src/OrchardCore.Modules/OrchardCore.Resources/Assets/trumbowyg/js/trumbowyg.theme.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| document.addEventListener('DOMContentLoaded', function () { | ||
| function setTheme() { | ||
| var isDark = getPreferredTheme() == darkThemeName; | ||
|
|
||
| document | ||
| .querySelectorAll('.trumbowyg') | ||
| .forEach((element) => | ||
| element.parentElement.classList.toggle('trumbowyg-dark', isDark) | ||
| ); | ||
| } | ||
|
|
||
| const mutationObserver = new MutationObserver(setTheme); | ||
| mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| childList: true, | ||
| subtree: true, | ||
| }); | ||
|
|
||
| setTheme(); | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
20 changes: 20 additions & 0 deletions
20
src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /* | ||
| ** NOTE: This file is generated by Gulp and should not be edited directly! | ||
| ** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp. | ||
| */ | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function () { | ||
| function setTheme() { | ||
| var isDark = getPreferredTheme() == darkThemeName; | ||
| document.querySelectorAll('.trumbowyg').forEach(function (element) { | ||
| return element.parentElement.classList.toggle('trumbowyg-dark', isDark); | ||
| }); | ||
| } | ||
| var mutationObserver = new MutationObserver(setTheme); | ||
| mutationObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| childList: true, | ||
| subtree: true | ||
| }); | ||
| setTheme(); | ||
| }); |
1 change: 1 addition & 0 deletions
1
...rchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.min.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-manager.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| const darkThemeName = 'dark'; | ||
| const lightThemeName = 'light'; | ||
| const tenantName = document.currentScript.dataset.tenantName; | ||
| const themeStoreKeySuffix = 'theme'; | ||
|
|
||
| const getTenantName = () => tenantName || document.documentElement.getAttribute('data-tenant') || 'default'; | ||
| const getStoreKeySuffix = () => themeStoreKeySuffix || 'theme'; | ||
| const getStoreKey = () => `${getTenantName()}-${getStoreKeySuffix()}`; | ||
| const getStoredTheme = () => localStorage.getItem(getStoreKey()); | ||
| const setStoredTheme = (theme) => localStorage.setItem(getStoreKey(), theme); | ||
| const isDarkMedia = () => window.matchMedia('(prefers-color-scheme: dark)').matches; | ||
|
|
||
| const getPreferredTheme = () => { | ||
| const storedTheme = getStoredTheme(); | ||
| if (storedTheme) { | ||
| return storedTheme; | ||
| } | ||
|
|
||
| return isDarkMedia() ? darkThemeName : lightThemeName; | ||
| }; | ||
|
|
||
| const setTheme = (theme) => { | ||
| if (theme === 'auto') { | ||
| document.documentElement.setAttribute('data-bs-theme', isDarkMedia() ? darkThemeName : lightThemeName); | ||
| } else { | ||
| document.documentElement.setAttribute('data-bs-theme', theme); | ||
| } | ||
| }; | ||
|
|
28 changes: 28 additions & 0 deletions
28
src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| using Microsoft.Extensions.Options; | ||
| using OrchardCore.Environment.Shell; | ||
| using OrchardCore.ResourceManagement; | ||
|
|
||
| namespace OrchardCore.Themes; | ||
|
|
||
| public sealed class ResourceManagementOptionsConfiguration : IConfigureOptions<ResourceManagementOptions> | ||
| { | ||
| private readonly ShellSettings _shellSettings; | ||
|
|
||
| public ResourceManagementOptionsConfiguration(ShellSettings shellSettings) | ||
| { | ||
| _shellSettings = shellSettings; | ||
| } | ||
|
|
||
| public void Configure(ResourceManagementOptions options) | ||
| { | ||
| var manifest = new ResourceManifest(); | ||
|
|
||
| manifest | ||
| .DefineScript("theme-manager") | ||
| .SetAttribute("data-tenant-name", _shellSettings.Name) | ||
| .SetUrl("~/OrchardCore.Themes/Scripts/theme-manager.min.js", "~/OrchardCore.Themes/Scripts/theme-manager.js") | ||
| .SetVersion("1.0.0"); | ||
|
|
||
| options.ResourceManifests.Add(manifest); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| /* | ||
| ** NOTE: This file is generated by Gulp and should not be edited directly! | ||
| ** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp. | ||
| */ | ||
|
|
||
| var darkThemeName = 'dark'; | ||
| var lightThemeName = 'light'; | ||
| var tenantName = document.currentScript.dataset.tenantName; | ||
| var themeStoreKeySuffix = 'theme'; | ||
| var getTenantName = function getTenantName() { | ||
| return tenantName || document.documentElement.getAttribute('data-tenant') || 'default'; | ||
| }; | ||
| var getStoreKeySuffix = function getStoreKeySuffix() { | ||
| return themeStoreKeySuffix || 'theme'; | ||
| }; | ||
| var getStoreKey = function getStoreKey() { | ||
| return "".concat(getTenantName(), "-").concat(getStoreKeySuffix()); | ||
| }; | ||
| var getStoredTheme = function getStoredTheme() { | ||
| return localStorage.getItem(getStoreKey()); | ||
| }; | ||
| var setStoredTheme = function setStoredTheme(theme) { | ||
| return localStorage.setItem(getStoreKey(), theme); | ||
| }; | ||
| var isDarkMedia = function isDarkMedia() { | ||
| return window.matchMedia('(prefers-color-scheme: dark)').matches; | ||
| }; | ||
| var getPreferredTheme = function getPreferredTheme() { | ||
| var storedTheme = getStoredTheme(); | ||
| if (storedTheme) { | ||
| return storedTheme; | ||
| } | ||
| return isDarkMedia() ? darkThemeName : lightThemeName; | ||
| }; | ||
| var setTheme = function setTheme(theme) { | ||
| if (theme === 'auto') { | ||
| document.documentElement.setAttribute('data-bs-theme', isDarkMedia() ? darkThemeName : lightThemeName); | ||
| } else { | ||
| document.documentElement.setAttribute('data-bs-theme', theme); | ||
| } | ||
| }; |
1 change: 1 addition & 0 deletions
1
src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.min.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.