DRAFT: Sample ThemePlugins#65
Closed
bmingles wants to merge 15 commits intodeephaven:mainfrom
Closed
Conversation
bmingles
added a commit
to deephaven/web-client-ui
that referenced
this pull request
Oct 5, 2023
- First pass at base theme variables `theme_default_dark.scss` and `theme_default_light.scss` - Swapped a few places `--dh-background-color`. This is only consumed in a few places and is set to the original `#1a171a` color in theme_default_dark, so shouldn't result in any display changes by default. - Loading custom themes from a new `ThemePlugin` type. 2 sample themes can be found in this DRAFT PR: deephaven/deephaven-plugins#65 ### Testing Setup Theme Plugins Locally - Checkout the draft plugins PR: deephaven/deephaven-plugins#65 - Configure docker-compose for Community to load from checked out plugins directory e.g `START_OPTS=-Xmx4g -Ddeephaven.jsPlugins.resourceBase=/plugin-dev` and map a volume `/Users/jdoe/code/deephaven-plugins/plugins:/plugin-dev` - `docker-compose up` (note, this has to be restarted any time plugins config changes) Run web ui locally - On initial load - Nothing should look different in the UI. Inspect the `div id="root"` element. - Its first child should be `<style data-theme-key="default-dark">...` - Inspect the `<body>` el. There should be some `--dh-color-xxx` CSS variables loaded in the inspector. - In "Application" dev tools tab there should be an entry in localStorage `deephaven.themeCache` `{"themeKey":"default-dark","preloadStyleContent":":root{--dh-accent-color:#4c7dee;--dh-background-color:#1a171a}"}` - Switch default theme - In console run: `localStorage.setItem('deephaven.themeCache', '{"themeKey":"default-light"}')` and reload page Note: On the first page refresh, there will be a moment where the background shows the previously applied theme. Refreshing the page again should show the right color the entire time. This is due to how we are setting things via the console but won't be an issue once users can select themes from the UI. - UI should show white background in title bar (it won't look good, just proving we can switch color) - Its first child should be `<style data-theme-key="default-light">...` - Inspect the `<body>` el. There should be some `--dh-color-xxx` CSS variables loaded in the inspector. - In "Application" dev tools tab there should be an entry in localStorage `deephaven.themeCache` `{"themeKey":"default-light","preloadStyleContent":":root{--dh-accent-color:#4c7dee;--dh-background-color:#fdfdfd}"}` - Repeat, but this time run: `localStorage.setItem('deephaven.themeCache', '{"themeKey":"default-dark"}')` and reload page. Should see things go back to initial load state - Load custom themes There should be 4 custom themes provided by the plugins repo. They can be selected via the following: - `localStorage.setItem('deephaven.themeCache', '{"themeKey":"theme-multi-example_acme-dark"}')` - `localStorage.setItem('deephaven.themeCache', '{"themeKey":"theme-multi-example_acme-light"}')` - `localStorage.setItem('deephaven.themeCache', '{"themeKey":"theme-multi-example_acme-cool"}')` - `localStorage.setItem('deephaven.themeCache', '{"themeKey":"theme-single-example_single-dark"}')` - These should produce similar results as the default ones, except: - There should be 2 `style` tags under the `div id="root"`. The first will be either the dark or light base theme. The 2nd will correspond to the custom theme variables - Inspecting the body element should show additional `:root { ... }` css variables for the custom theme just above the base theme variables - localStorage should contain an entry like: `{"themeKey":"theme-multi-example_acme-light","preloadStyleContent":":root{--dh-accent-color:#4c7dee;--dh-background-color:#fdfdfd}"}` corresponding to the current theme. - Reloading the page should keep the same styling resolves #1530
|
Pull Request titles must follow the Conventional Commits specification. Details: |
bmingles
force-pushed
the
1504-theme-plugin
branch
from
57d106d to
3e06c6d
Compare
bmingles
force-pushed
the
1504-theme-plugin
branch
from
f5b8cd4 to
93f9fbb
Compare
bmingles
force-pushed
the
1504-theme-plugin
branch
2 times, most recently
from
e340369 to
aa004bb
Compare
bmingles
force-pushed
the
1504-theme-plugin
branch
from
4322e09 to
656fb01
Compare
#1504
#1504
#1504
#1504
#1504
bmingles
force-pushed
the
1504-theme-plugin
branch
from
39e30ed to
27f2a6e
Compare
Contributor
Author
|
Dev only. Won't implement. |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#1504