diff --git a/README.md b/README.md index d8e1a2a4..b93b0a50 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,7 @@ Dashy supports 1-Click deployments on several popular cloud platforms. To spin u - [ Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/Lissy93/dashy) - [ Deploy to Vercel](https://vercel.com/new/project?template=https://github.com/lissy93/dashy) - [ Deploy to Render](https://render.com/deploy?repo=https://github.com/lissy93/dashy/tree/deploy_render) +- [ Deploy to GCP](https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git) - [ Deploy to PWD](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/Lissy93/dashy/master/docker-compose.yml) #### Basic Commands @@ -149,9 +150,15 @@ You may find these [example config](https://gist.github.com/Lissy93/000f712a5ce9

-The app comes with a number of built-in themes, but it's also easy to write you're own. All colors, and most other CSS properties make use of CSS variables, which makes customizing the look and feel of Dashy very easy. +Dashy comes with a number of built-in themes, but it's also easy to make you're own. All colors, and most other CSS properties are specified using CSS variables, which are [documented here](./docs/theming.md#css-variables). This make modifying styles and customizing the look and feel of Dashy very easy. -You can also apply custom CSS overrides directly through the UI (Under Config menu --> Custom CSS), or specify it in your config file under `appConfig.customCss`. If you have a lot of custom styles, you can pass in the path to a stylesheet, in `appConfig.externalStyleSheet`. +You can select a theme, and customize it's colors directly through the UI. But it's also possible tp pass in external stylesheets and styles either in the config file (under `appConfig.externalStyleSheet`), or by mounting it to `/app/src/styles/user-defined-themes.scss` with Docker. + +

+ + Example Themes + +

**[⬆️ Back to Top](#dashy)** diff --git a/app.json b/app.json index 8b8b61ed..6d674ad9 100644 --- a/app.json +++ b/app.json @@ -12,6 +12,5 @@ "home-lab", "lissy93" ], - "image": "heroku/nodejs", "stack": "heroku-20" } \ No newline at end of file diff --git a/docs/assets/theme-config-demo.gif b/docs/assets/theme-config-demo.gif new file mode 100644 index 00000000..2cc13b73 Binary files /dev/null and b/docs/assets/theme-config-demo.gif differ diff --git a/docs/configuring.md b/docs/configuring.md index 0da72148..616e54d1 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -65,6 +65,7 @@ To disallow any changes from being written to disk via the UI config editor, set **`iconSize`** | `string` | _Optional_ | The size of link items / icons. Can be either `small`, `medium,` or `large`. Defaults to `medium`. This can also be set directly from the UI. **`theme`** | `string` | _Optional_ | The default theme for first load (you can change this later from the UI) **`cssThemes`** | `string[]` | _Optional_ | An array of custom theme names which can be used in the theme switcher dropdown +**`customColors`** | `object`| _Optional_ | Enables you to apply a custom color palette to any given theme. Use the theme name (lowercase) as the key, for an object including key-value-pairs, with the color variable name as keys, and 6-digit hex code as value. See [Theming](/docs/theming.md#modifying-theme-colors) for more info **`externalStyleSheet`** | `string` or `string[]` | _Optional_ | Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI **`customCss`** | `string` | _Optional_ | Raw CSS that will be applied to the page. This can also be set from the UI. Please minify it first. **`hideComponents`** | `object` | _Optional_ | A list of key page components (header, footer, search, settings, etc) that are present by default, but can be removed using this option. See [`appConfig.hideComponents`](#appconfighideComponents-optional) diff --git a/docs/deployment.md b/docs/deployment.md index 4cae89a2..12ee05e4 100644 --- a/docs/deployment.md +++ b/docs/deployment.md @@ -123,6 +123,16 @@ https://vercel.com/new/project?template=https://github.com/lissy93/dashy https://cloud.digitalocean.com/apps/new?repo=https://github.com/lissy93/dashy/tree/deploy_digital-ocean ``` +#### Google Cloud Platform +[![Run on Google Cloud](https://deploy.cloud.run/button.svg)](https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git) + +[Cloud Run](https://cloud.google.com/run/) is a service offered by [Google Cloud](https://cloud.google.com/). It's a fully managed serverless platform, for developing and deploying highly scalable containerized applications. Similar to AWS and Azure, GCP offers a wide range of cloud services, which are billed on a pay‐per‐use basis, but Cloud Run has a [free tier](https://cloud.google.com/run/pricing) offering 180,000 vCPU-seconds, 360,000 GiB-seconds, and 2 million requests per month. + +To deploy Dashy to GCP, use the following link +``` +https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git +``` + #### Platform.sh [![Deploy to Platform.sh](https://platform.sh/images/deploy/deploy-button-lg-blue.svg)](https://console.platform.sh/projects/create-project/?template=https://github.com/lissy93/dashy&utm_campaign=deploy_on_platform?utm_medium=button&utm_source=affiliate_links&utm_content=https://github.com/lissy93/dashy) diff --git a/docs/theming.md b/docs/theming.md index a87783c0..8ae58b51 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -33,6 +33,32 @@ Finally, from the UI use the theme dropdown menu to select your new theme, and y You can also set `appConfig.theme` to pre-select a default theme, which will be applied immediately after deployment. +### Modifying Theme Colors + +Themes can be modified either through the UI, using the color picker menu (to the right of the theme dropdown), or directly in the config file, under `appConfig.customColors`. Here you can specify the value for any of the [available CSS variables](#css-variables). + +

+ + Example Themes + +

+ +By default, any color modifications made to the current theme through the UI will only be applied locally. If you need these settings to be set globally, then click the 'Export' button, to get the color codes and variable names, which can then be backed up, or saved in your config file. + +Custom colors are saved relative the the base theme selected. So if you switch themes after setting custom colors, then you're settings will no longer be applied. You're changes are not lost though, and switching back to the original theme will see your styles reapplied. + +If these values are specified in your `conf.yml` file, then it will look something like the below example. Note that in YAML, values or keys which contain special characters, must be wrapped in quotes. + +```yaml +appConfig: + customColors: + oblivion: + primary: '#75efff' + background: '#2a3647' + dracula: + primary: '#8be9fd' +``` + ### Adding your own Theme User-defined styles and custom themes should be defined in `./src/styles/user-defined-themes.scss`. If you're using Docker, you can pass your own stylesheet in using the `--volume` flag. E.g. `v ./my-themes.scss:/app/src/styles/user-defined-themes.scss`. Don't forget to pass your theme name into `appConfig.cssThemes` so that it shows up on the theme-switcher dropdown. @@ -83,7 +109,7 @@ CSS variables are simple to use. You define them like: `--background: #fff;` and You can determine the variable used by any given element, and visualize changes using the browser developer tools (Usually opened with `F12`, or Options --> More --> Developer Tools). Under the elements tab, click the Element Selector icon (usually top-left corner), you will then be able to select any DOM element on the page by hovering and clicking it. In the CSS panel you will see all styles assigned to that given element, including CSS variables. Click a variable to see it's parent value, and for color attributes, click the color square to modify the color. For more information, see this [getting started guide](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools), and these articles on [selecting elements](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element) and [inspecting and modifying colors](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors). #### Top-Level Variables -These are all that are required to create a theme. All other variables inherit their values from these variables. +These are all that are required to create a theme. All other variables inherit their values from these variables, and can optionally be overridden. - `--primary` - Application primary color. Used for title, text, accents, and other features - `--background` - Application background color diff --git a/package.json b/package.json index a812fda0..ef979ced 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "vue-prism-editor": "^1.2.2", "vue-router": "^3.0.3", "vue-select": "^3.11.2", + "vue-swatches": "^2.1.1", "vue-toasted": "^1.1.28" }, "devDependencies": { @@ -86,4 +87,4 @@ "> 1%", "last 2 versions" ] -} \ No newline at end of file +} diff --git a/src/assets/interface-icons/config-cancel.svg b/src/assets/interface-icons/config-cancel.svg new file mode 100644 index 00000000..93ff381c --- /dev/null +++ b/src/assets/interface-icons/config-cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/config-color-palette.svg b/src/assets/interface-icons/config-color-palette.svg new file mode 100644 index 00000000..ae3571ea --- /dev/null +++ b/src/assets/interface-icons/config-color-palette.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue index 7548ba7d..e38995aa 100644 --- a/src/components/Configuration/ConfigContainer.vue +++ b/src/components/Configuration/ConfigContainer.vue @@ -331,6 +331,7 @@ p.small-screen-note { height: -webkit-fill-available; height: -moz-available; height: stretch; + height: 100%; // Firefox } .tab-item { diff --git a/src/components/Configuration/CustomCss.vue b/src/components/Configuration/CustomCss.vue index 35524863..e2523da5 100644 --- a/src/components/Configuration/CustomCss.vue +++ b/src/components/Configuration/CustomCss.vue @@ -1,5 +1,5 @@ + + diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue index 27c721fa..00637f08 100644 --- a/src/components/Settings/SettingsContainer.vue +++ b/src/components/Settings/SettingsContainer.vue @@ -7,7 +7,7 @@ />
- @@ -50,7 +50,7 @@ export default { props: { displayLayout: String, iconSize: String, - availableThemes: Object, + externalThemes: Object, appConfig: Object, pageInfo: Object, sections: Array, diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue index 92d903f6..e7722676 100644 --- a/src/components/Settings/ThemeSelector.vue +++ b/src/components/Settings/ThemeSelector.vue @@ -1,5 +1,6 @@