{"id":19241866,"url":"https://github.com/mudblazor/thememanager","last_synced_at":"2025-04-12T14:57:46.963Z","repository":{"id":43455001,"uuid":"343098220","full_name":"MudBlazor/ThemeManager","owner":"MudBlazor","description":"ThemeManager built to showcase MudBlazor theming.","archived":false,"fork":false,"pushed_at":"2025-01-18T19:31:27.000Z","size":66782,"stargazers_count":238,"open_issues_count":14,"forks_count":65,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-04-12T14:57:30.366Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MudBlazor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-28T12:20:03.000Z","updated_at":"2025-04-08T00:42:14.000Z","dependencies_parsed_at":"2025-02-05T19:12:08.656Z","dependency_job_id":"590d9411-9de8-46b7-a75b-4184060da82e","html_url":"https://github.com/MudBlazor/ThemeManager","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MudBlazor%2FThemeManager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MudBlazor%2FThemeManager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MudBlazor%2FThemeManager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MudBlazor%2FThemeManager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MudBlazor","download_url":"https://codeload.github.com/MudBlazor/ThemeManager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586249,"owners_count":21128997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T17:12:47.959Z","updated_at":"2025-04-12T14:57:46.944Z","avatar_url":"https://github.com/MudBlazor.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"content/MudBlazor-GitHub-NoBg-Dark.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"content/MudBlazor-GitHub-NoBg.png\"\u003e\n    \u003cimg alt=\"MudBlazor\" src=\"content/MudBlazor-GitHub-NoBg.png\"\u003e\n  \u003c/picture\u003e\n\u003c/h1\u003e\n\n# Theme Manager / Generator for MudBlazor\n\n[![GitHub](https://img.shields.io/github/license/garderoben/mudblazor?color=594ae2\u0026style=flat-square\u0026logo=github)](https://github.com/Garderoben/MudBlazor.ThemeManager/blob/master/LICENSE)\n[![Twitter](https://img.shields.io/twitter/follow/MudBlazor?color=1DA1F2\u0026label=Twitter\u0026logo=Twitter\u0026style=flat-square)](https://twitter.com/MudBlazor)\n[![Nuget version](https://img.shields.io/nuget/v/MudBlazor.ThemeManager?color=ff4081\u0026label=nuget%20version\u0026logo=nuget\u0026style=flat-square)](https://www.nuget.org/packages/MudBlazor.ThemeManager/)\n[![Discord](https://img.shields.io/discord/786656789310865418?color=%237289da\u0026label=Discord\u0026logo=discord\u0026logoColor=%237289da\u0026style=flat-square)](https://discord.gg/mudblazor)\n\nBlazor Theme Manager component for MudBlazor library. Can be used live or during development to fast and easy try out different theme settings.\n\n**This component is currently not suitable for production applications, be ready for performance issues, bugs and missing features. Feel free to help improve it.**\n\n## Workflow\n![caption](content/WorkFlow_DarkTheme.webp)\n\n## Prerequisites\n- [MudBlazor](https://www.mudblazor.com/getting-started/installation) Installed and configurated.\n## Installation\nInstall Package\n```\ndotnet add package MudBlazor.ThemeManager\n```\nAdd the following to `_Imports.razor`\n```razor\n@using MudBlazor.ThemeManager\n```\nAdd the following to your HTML `head` section, it's either `index.html` or `_Layout.cshtml`/`_Host.cshtml`/`App.razor` depending on whether you're running WebAssembly or Server.\n```razor\n\u003clink href=\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700\u0026display=swap\" rel=\"stylesheet\"\u003e\n\u003clink href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700\u0026display=swap\" rel=\"stylesheet\"\u003e\n\u003clink href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\u0026display=swap\" rel=\"stylesheet\" /\u003e\n\u003clink href=\"_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css\" rel=\"stylesheet\" /\u003e\n```\nAdd the components in your `MainLayout.razor` and inside `\u003cMudLayout\u003e`\n```razor\n\u003cMudThemeManagerButton OnClick=\"@((e) =\u003e OpenThemeManager(true))\" /\u003e\n\u003cMudThemeManager Open=\"_themeManagerOpen\" OpenChanged=\"OpenThemeManager\" Theme=\"_themeManager\" ThemeChanged=\"UpdateTheme\" /\u003e\n```\nAdd the following inside your @code for `MainLayout.razor`\n```razor\nprivate ThemeManagerTheme _themeManager = new ThemeManagerTheme();\npublic bool _themeManagerOpen = false;\n\nvoid OpenThemeManager(bool value)\n{\n    _themeManagerOpen = value;\n}\n\nvoid UpdateTheme(ThemeManagerTheme value)\n{\n    _themeManager = value;\n    StateHasChanged();\n}\n\nprotected override void OnInitialized()\n{\n    StateHasChanged();\n}\n```\nConnect the ThemeManagerTheme with `MudThemeProvider` to control all the theme colors. You can also connect `MudAppBar` and `MudDrawer` directly.\n```html\n\u003cMudThemeProvider Theme=\"_themeManager.Theme\" /\u003e\n\u003cMudAppBar Elevation=\"_themeManager.AppBarElevation\"\u003e\n\u003cMudDrawer @bind-Open=\"_drawerOpen\" ClipMode=\"_themeManager.DrawerClipMode\" Elevation=\"_themeManager.DrawerElevation\"\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmudblazor%2Fthememanager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmudblazor%2Fthememanager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmudblazor%2Fthememanager/lists"}