diff --git a/Directory.Packages.props b/Directory.Packages.props index f1b9ec2f..ec6b77f8 100644 --- a/Directory.Packages.props +++ b/Directory.Packages.props @@ -15,7 +15,7 @@ - + diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Pages/_Host.cshtml b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Pages/_Host.cshtml index 6eb87d7d..5700bfee 100644 --- a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Pages/_Host.cshtml +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Pages/_Host.cshtml @@ -42,5 +42,8 @@ + + + diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/MainLayout.razor b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/MainLayout.razor index 9165bc18..0100cb60 100644 --- a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/MainLayout.razor +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/MainLayout.razor @@ -2,10 +2,10 @@ @inject IJSRuntime JSRuntime -
+
-
+
@Body diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/NavMenu.razor b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/NavMenu.razor index e7e36e58..ea15a520 100644 --- a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/NavMenu.razor +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/NavMenu.razor @@ -1,4 +1,5 @@ 
+
@*
*@ diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/Theme.razor b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/Theme.razor new file mode 100644 index 00000000..0d39bc3d --- /dev/null +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Shared/Theme.razor @@ -0,0 +1,13 @@ +@inject ThemeService _themeService + + \ No newline at end of file diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Startup.cs b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Startup.cs index 5e7560af..12f74af9 100644 --- a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Startup.cs +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/Startup.cs @@ -31,6 +31,8 @@ public void ConfigureServices(IServiceCollection services) services.AddRazorPages(); services.AddServerSideBlazor(); services.AddIxBlazorServices(); + + services.AddScoped(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/ThemeService.cs b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/ThemeService.cs new file mode 100644 index 00000000..4dbe1401 --- /dev/null +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/ThemeService.cs @@ -0,0 +1,24 @@ +using Microsoft.JSInterop; +using System.Threading.Tasks; + +namespace ixBlazor.App +{ + public class ThemeService + { + private readonly IJSRuntime _js; + + public ThemeService(IJSRuntime js) => _js = js; + + public ValueTask InitAsync() => + _js.InvokeVoidAsync("themeManager.init"); + + public ValueTask SetLightAsync() => + _js.InvokeVoidAsync("themeManager.setLight"); + + public ValueTask SetDarkAsync() => + _js.InvokeVoidAsync("themeManager.setDark"); + + public ValueTask SetSystemAsync() => + _js.InvokeVoidAsync("themeManager.setSystem"); + } +} diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/momentum.css b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/momentum.css index 7daef16a..65f64407 100644 --- a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/momentum.css +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/momentum.css @@ -1,4 +1,4 @@ -/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { @@ -22,20 +22,27 @@ --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); - --color-white: #fff; + --color-white: #FFFFFF; --spacing: 0.25rem; --breakpoint-xl: 80rem; --container-4xl: 56rem; --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; - --text-3xl--line-height: calc(2.25 / 1.875); + --text-3xl--line-height: calc(2 / 1.5); --text-4xl: 2.25rem; - --text-4xl--line-height: calc(2.5 / 2.25); + --text-4xl--line-height: calc(2 / 1.5); + --text-5xl: 3rem; + --text-5xl--line-height: calc(2 / 1.5); + --font-weight-normal: 400; --font-weight-bold: 700; --radius-md: 0.375rem; --radius-lg: 0.5rem; @@ -43,6 +50,16 @@ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); + --radius-full: calc(infinity * 1px); + --radius-small: 1rem; + --radius-extra-small: var(--radius-md); + --color-background: #FEFEFE; + --color-background-light: #FFFFFF; + --color-text: #000000; + --color-text-light: #5F5F5F; + --color-link: #0065B3; + --color-link-hover: #003078; + --color-danger: #D0190F; } } @layer base { @@ -229,6 +246,9 @@ .my-4 { margin-block: calc(var(--spacing) * 4); } + .my-auto { + margin-block: auto; + } .mt-4 { margin-top: calc(var(--spacing) * 4); } @@ -253,6 +273,10 @@ .hidden { display: none; } + .size-5 { + width: calc(var(--spacing) * 5); + height: calc(var(--spacing) * 5); + } .h-8 { height: calc(var(--spacing) * 8); } @@ -316,6 +340,12 @@ .border-gray-300 { border-color: var(--color-gray-300); } + .bg-background { + background-color: var(--color-background); + } + .bg-background-light { + background-color: var(--color-background-light); + } .bg-blue-600 { background-color: var(--color-blue-600); } @@ -382,6 +412,9 @@ .text-nowrap { text-wrap: nowrap; } + .text-danger { + color: var(--color-danger); + } .text-gray-500 { color: var(--color-gray-500); } @@ -509,6 +542,194 @@ } } } +@layer theme { + :root, :host { + --font-sans: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } +} +@layer base { + h1 { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h2 { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h3 { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h4 { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h5 { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h6 { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + p { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text-light); + } + a { + cursor: pointer; + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + text-decoration-line: underline; + color: var(--color-link); + &:hover { + @media (hover: hover) { + color: var(--color-link-hover); + } + } + } + hr { + color: var(--color-text-light); + opacity: 30%; + } + span { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + div { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + input[type="date"], input[type="time"], input[type="datetime-local"] { + color-scheme: light; + } + [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"], [data-theme="dark"] input[type="datetime-local"] { + color-scheme: dark; + } +} +[data-theme="dark"] { + --color-black: #FFFFFF; + --color-white: #0B0C0C; + --color-gray-1: #2A2A2A; + --color-gray-2: #3A3A3A; + --color-gray-3: #9E9E9E; + --color-background: #121212; + --color-background-light: #1F1F1F; + --color-background-dark: #1F1F1F; + --color-background-modal: #1E1E1E; + --color-background-modal-light: #252525; + --color-text: #FFFFFF; + --color-text-light: #CFCFCF; + --color-border: #3A3A3A; + --color-border-input: #FFFFFF; + --color-link: #82B1FF; + --color-link-hover: #AECbFA; + --color-link-visited: #B39DDB; + --color-primary: #82B1FF; + --color-primary-light: #1E2A44; + --color-success: #4CAF50; + --color-success-light: #1E3B2C; + --color-warning: #FFB74D; + --color-warning-light: #3A2A12; + --color-danger: #EF5350; + --color-danger-light: #3A1F1F; + --color-info: #64B5F6; + --color-info-light: #1E2F3F; + --color-noactive: #9E9E9E; + --color-noactive-light: #2A2A2A; + --color-result-failed: #EF5350; + --color-result-passed: #4CAF50; + --color-result-inprogress: #64B5F6; + --color-result-exclude: #9575CD; + --color-result-bypassed: #CE93D8; + --color-result-inconcllusive: #D4A373; + --color-result-runnig: #4DD0E1; + --color-result-noaction: #9E9E9E; + --color-diagnostic-debug: #64B5F6; + --color-diagnostic-verbose: #90A4AE; + --color-diagnostic-information: #4FC3F7; + --color-diagnostic-warning: #FFB74D; + --color-diagnostic-error: #EF5350; + --color-diagnostic-fatal: #E53935; + --color-automat: #4CAF50; + --color-ground: #64B5F6; + --color-grounded: #42A5F5; + --color-idle: #9E9E9E; + --color-manual: #FFB74D; + --color-oee: #82B1FF; + --color-availability: #4CAF50; + --color-performance: #64B5F6; + --color-quality: #FFB74D; + --color-downtime-unassigned: #616161; + --color-downtime-material: #FFB74D; + --color-downtime-operator: #EF9A9A; + --color-downtime-working: #AED581; + --color-downtime-technical: #B39DDB; + --color-downtime-planned: #80DEEA; + --color-btn-primary: #82B1FF; + --color-btn-primary-hover: #1E2A44; + --color-btn-success: #4CAF50; + --color-btn-success-hover: #1E3B2C; + --color-btn-danger: #EF5350; + --color-btn-danger-hover: #3A1F1F; + --color-btn-warning: #FFB74D; + --color-btn-warning-hover: #3A2A12; + --color-btn-info: #64B5F6; + --color-btn-info-hover: #1E2F3F; + --color-btn-noactive: #9E9E9E; + --color-btn-noactive-hover: #2A2A2A; + --color-btn-outline-bg: transparent; + --color-btn-no-bg-bg: transparent; +} @property --tw-space-x-reverse { syntax: "*"; inherits: false; diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/tailwind.css b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/tailwind.css index 8f26aea4..e76793ee 100644 --- a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/tailwind.css +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/tailwind.css @@ -1 +1,296 @@ @import "tailwindcss"; +@source "./"; +@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); + +@layer theme { + :root, :host { + --font-sans: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } +} + +@layer base { + h1 { + @apply text-5xl text-text font-bold text-wrap wrap-break-word; + } + + h2 { + @apply text-4xl text-text font-bold text-wrap wrap-break-word; + } + + h3 { + @apply text-3xl text-text font-bold text-wrap wrap-break-word; + } + + h4 { + @apply text-2xl text-text font-bold text-wrap wrap-break-word; + } + + h5 { + @apply text-xl text-text font-normal text-wrap wrap-break-word; + } + + h6 { + @apply text-lg text-text font-normal text-wrap wrap-break-word; + } + + p { + @apply text-base text-text-light font-normal text-wrap wrap-break-word; + } + + a { + @apply text-base font-normal text-wrap wrap-break-word cursor-pointer underline; + @apply text-link hover:text-link-hover; + } + + hr { + @apply text-text-light opacity-30; + } + + span { + @apply text-base text-text font-normal text-wrap wrap-break-word; + } + + div { + @apply text-base text-text font-normal text-wrap wrap-break-word; + } + + /* input theme */ + input[type="date"], + input[type="time"], + input[type="datetime-local"] { + color-scheme: light; + } + + [data-theme="dark"] input[type="date"], + [data-theme="dark"] input[type="time"], + [data-theme="dark"] input[type="datetime-local"] { + color-scheme: dark; + } +} + +@theme { + --text-3xl--line-height: calc(2 / 1.5); + --text-4xl--line-height: calc(2 / 1.5); + --text-5xl--line-height: calc(2 / 1.5); + --text-6xl--line-height: calc(2 / 1.5); + --text-7xl--line-height: calc(2 / 1.5); + --text-8xl--line-height: calc(2 / 1.5); + --text-9xl--line-height: calc(2 / 1.5); + /* radius */ + --radius-full: calc(infinity * 1px); /* 0.25rem; */ + --radius-small: 1rem; + --radius-extra-small: var(--radius-md); + --radius-nav: var(--radius-small); + --radius-button: var(--radius-full); + --radius-input: var(--radius-full); + --radius-textarea: var(--radius-small); + --radius-checkbox: var(--radius-extra-small); + --radius-toggle: var(--radius-full); + --radius-radio: var(--radius-full); + --radius-select: var(--radius-small); + --radius-file: var(--radius-small); + --radius-color: var(--radius-small); + --radius-picker: var(--radius-small); + --radius-card: var(--radius-small); + --radius-simple-border: var(--radius-small); + --radius-alert: var(--radius-small); + --radius-list-group: var(--radius-small); + --radius-tab: var(--radius-small); + --radius-dropdown: var(--radius-small); + --radius-modal: var(--radius-small); + --radius-tooltip: var(--radius-extra-small); + --radius-accordion: var(--radius-small); + --radius-toast: var(--radius-small); + --radius-table: var(--radius-full); + --radius-pagination-number: var(--radius-full); + /* #region Colors */ + --color-black: #0B0C0C; + --color-gray-1: #F3F2F1; + --color-gray-2: #DEE0E2; + --color-gray-3: #949494; + --color-white: #FFFFFF; + --color-background: #FEFEFE; + --color-background-light: #FFFFFF; + --color-background-dark: #F0F8FF; + --color-background-modal: #F5FAFF; + --color-background-modal-light: #FFFFFF; + --color-text: #000000; + --color-text-light: #5F5F5F; + --color-border: #BFC1C3; + --color-border-input: #0B0C0C; + --color-link: #0065B3; + --color-link-hover: #003078; + --color-link-visited: #4C2C92; + --color-primary: #0a319e; + --color-primary-light: #E0E8FF; + --color-success: #00703C; + --color-success-light: #D4F7D4; + --color-warning: #EC9811; + --color-warning-light: #FFEAC9; + --color-danger: #D0190F; + --color-danger-light: #FFDCDA; + --color-info: #2B8CC4; + --color-info-light: #D4ECF7; + --color-noactive: #7C7C7C; + --color-noactive-light: #DEE0E2; + /* #endregion */ + /* result colors*/ + --color-result-failed: #D0190F; + --color-result-passed: #00703C; + --color-result-inprogress: #0065B3; + --color-result-exclude: #7866B9; + --color-result-bypassed: #912B88; + --color-result-inconcllusive: #B58840; + --color-result-runnig: #00A2A3; + --color-result-noaction: #949494; + /* #end of result colors*/ + /* diagnostic colors */ + --color-diagnostic-debug: #0065B3; + --color-diagnostic-verbose: #769899; + --color-diagnostic-information: #2B8CC4; + --color-diagnostic-warning: #EC9811; + --color-diagnostic-error: #D0190F; + --color-diagnostic-fatal: #9E1912; + /* end of diagnostic colors */ + /* station status colors */ + --color-automat: #00703C; + --color-ground: #2B8CC4; + --color-grounded: #0065B3; + --color-idle: #949494; + --color-manual: #EC9811; + /* end of station status colors */ + /* prodinsight colors */ + --color-oee: #0A319E; + --color-availability: #00703C; + --color-performance: #0065B3; + --color-quality: #EC9811; + /* end of prodinsight colors */ + /* downtime colors */ + --color-downtime-unassigned: #C7C7C7; + --color-downtime-material: #EC9811; + --color-downtime-operator: #F08584; + --color-downtime-working: #B6D069; + --color-downtime-technical: #9885A9; + --color-downtime-planned: #7DCDD2; + /* end of downtime colors */ + /* buttons colors */ + --color-btn-primary: #0A319E; + --color-btn-primary-hover: #E0E8FF; + --color-btn-danger: #D0190F; + --color-btn-danger-hover: #FFDCDA; + --color-btn-success: #00703C; + --color-btn-success-hover: #D4F7D4; + --color-btn-warning: #EC9811; + --color-btn-warning-hover: #FFFAD5; + --color-btn-info: #2B8CC4; + --color-btn-info-hover: #D4ECF7; + --color-btn-noactive: #7C7C7C; + --color-btn-noactive-hover: #DEE0E2; + --color-btn-outline-bg: transparent; + --color-btn-no-bg-bg: transparent; + /* end of buttons colors */ + --animate-pulse-danger: pulse-danger 2s ease-in-out infinite; + + @keyframes pulse-danger { + 0%, 100% { + box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 30%, transparent); + } + + 50% { + box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-danger) 0%, transparent); + } + } +} + +[data-theme="dark"] { + /* #region Base colors */ + --color-black: #FFFFFF; + --color-white: #0B0C0C; + --color-gray-1: #2A2A2A; + --color-gray-2: #3A3A3A; + --color-gray-3: #9E9E9E; + --color-background: #121212; + --color-background-light: #1F1F1F; + --color-background-dark: #1F1F1F; + --color-background-modal: #1E1E1E; + --color-background-modal-light: #252525; + --color-text: #FFFFFF; + --color-text-light: #CFCFCF; + --color-border: #3A3A3A; + --color-border-input: #FFFFFF; + /* #endregion */ + /* #region Links */ + --color-link: #82B1FF; + --color-link-hover: #AECbFA; + --color-link-visited: #B39DDB; + /* #endregion */ + /* #region Brand & semantic colors */ + --color-primary: #82B1FF; + --color-primary-light: #1E2A44; + --color-success: #4CAF50; + --color-success-light: #1E3B2C; + --color-warning: #FFB74D; + --color-warning-light: #3A2A12; + --color-danger: #EF5350; + --color-danger-light: #3A1F1F; + --color-info: #64B5F6; + --color-info-light: #1E2F3F; + --color-noactive: #9E9E9E; + --color-noactive-light: #2A2A2A; + /* #endregion */ + /* #region Result colors */ + --color-result-failed: #EF5350; + --color-result-passed: #4CAF50; + --color-result-inprogress: #64B5F6; + --color-result-exclude: #9575CD; + --color-result-bypassed: #CE93D8; + --color-result-inconcllusive: #D4A373; + --color-result-runnig: #4DD0E1; + --color-result-noaction: #9E9E9E; + /* #endregion */ + /* #region Diagnostic colors */ + --color-diagnostic-debug: #64B5F6; + --color-diagnostic-verbose: #90A4AE; + --color-diagnostic-information: #4FC3F7; + --color-diagnostic-warning: #FFB74D; + --color-diagnostic-error: #EF5350; + --color-diagnostic-fatal: #E53935; + /* #endregion */ + /* #region Station status colors */ + --color-automat: #4CAF50; + --color-ground: #64B5F6; + --color-grounded: #42A5F5; + --color-idle: #9E9E9E; + --color-manual: #FFB74D; + /* #endregion */ + /* #region ProdInsight colors */ + --color-oee: #82B1FF; + --color-availability: #4CAF50; + --color-performance: #64B5F6; + --color-quality: #FFB74D; + /* #endregion */ + /* #region Downtime colors */ + --color-downtime-unassigned: #616161; + --color-downtime-material: #FFB74D; + --color-downtime-operator: #EF9A9A; + --color-downtime-working: #AED581; + --color-downtime-technical: #B39DDB; + --color-downtime-planned: #80DEEA; + /* #endregion */ + /* #region Buttons */ + --color-btn-primary: #82B1FF; + --color-btn-primary-hover: #1E2A44; + --color-btn-success: #4CAF50; + --color-btn-success-hover: #1E3B2C; + --color-btn-danger: #EF5350; + --color-btn-danger-hover: #3A1F1F; + --color-btn-warning: #FFB74D; + --color-btn-warning-hover: #3A2A12; + --color-btn-info: #64B5F6; + --color-btn-info-hover: #1E2F3F; + --color-btn-noactive: #9E9E9E; + --color-btn-noactive-hover: #2A2A2A; + --color-btn-outline-bg: transparent; + --color-btn-no-bg-bg: transparent; + /* #endregion */ +} diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/js/theme.js b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/js/theme.js new file mode 100644 index 00000000..f84b0ed6 --- /dev/null +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/js/theme.js @@ -0,0 +1,23 @@ +window.themeManager = { + init: () => { + if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + document.documentElement.setAttribute('data-theme', 'dark'); + } else { + document.documentElement.setAttribute('data-theme', 'light'); + } + /*document.documentElement.classList.toggle('dark', useDark);*/ + }, + setLight: () => { + localStorage.theme = 'light'; + document.documentElement.setAttribute('data-theme', 'light'); + }, + setDark: () => { + localStorage.theme = 'dark'; + document.documentElement.setAttribute('data-theme', 'dark'); + }, + setSystem: () => { + localStorage.removeItem('theme'); + // re-run init to pick up OS setting + window.themeManager.init(); + } +}; \ No newline at end of file diff --git a/src/AXSharp.sln b/src/AXSharp.sln index c3c8a308..af59e796 100644 --- a/src/AXSharp.sln +++ b/src/AXSharp.sln @@ -1,7 +1,7 @@  Microsoft Visual Studio Solution File, Format Version 12.00 -# Visual Studio Version 17 -VisualStudioVersion = 17.3.32804.467 +# Visual Studio Version 18 +VisualStudioVersion = 18.2.11408.102 MinimumVisualStudioVersion = 10.0.40219.1 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "AXSharp.abstractions", "AXSharp.abstractions", "{966916F3-7281-4FFF-89C3-D33B5EF6B285}" EndProject