♊️ GemiNews 🗞️ (dev)

Demo 1: Embeddings + Recommendation Demo 2: Bella RAGa Demo 3: NewRetriever Demo 4: Assistant function calling

🗞️Adding Dynamic Themes to a React App Using CSS Variables

🏷️ javascript 🏷️ css 🏷️ react

🗿Semantically Similar Articles (by :title_embedding)

Adding Dynamic Themes to a React App Using CSS Variables

2018-07-16 - Kevin Randles (from Kevin Randles on Medium)

I’ve been working on my portfolio website this weekend, and finally implemented a feature I’ve been thinking about for a few weeks — multiple color themes! Inspired by a blog post I read recently (and encouraged by the fact that, as much as I like the color palette above, I’ve spent quite a few hours looking at it), adding themes seemed like a good way to get some practice using Javascript to manipulate CSS properties and add a little bit of flash to what is, for now, one of the best showcases of my skills.First things first, I updated my app’s CSS, replacing all of my color properties with CSS variables which I defined (for now) in a “body” selector.With my colors all now nicely defined in one place, instead of 20 or 30 different places spread throughout my CSS, it was time to decide just how to implement this new feature. My initial thought was that I’d use React refs, grabbing the top level element of my App with a ref and setting style properties on it, but since I’m looking to set properties/variables that will apply document-wide, the solution turned out to be even simpler than that — document.body.Document.body returns the <body> node of the current document, allowing us to manipulate it with Javascript, giving us access to the style.setProperty() method, which takes two arguments — the name of the property to set, and the value to which we want to set it. To test this out, I added a componentDidMount() method to my page’s top-level component.…and, voila…Upon loading the page, the CSS variable setting the background color is changed to black, and I was pleasantly surprised to see it doesn’t look bad…needs work, but I like the combo of black with that shade of green.With a method for manipulating my CSS variables determined, I set about making my app able to change them with the click of a button. First, adding a few key/value pairs to my state (the theme colors will eventually be defined in another file, since they don’t really belong in the state, but this works for the moment) — the currently selected theme’s name, and the variables for my first two themes.Next, I wrote a function that iterates over the object that corresponds to the currently selected theme, and sets the CSS variables to their intended values.And another, that toggles the state back and forth between my two themes, depending on which is currently selected, and calls setTheme() to apply the newly changed theme.This isn’t really the ideal way to go about it (calling setTheme should be done in ComponentDidUpdate()), but by this point I’ve been coding all day long and that can wait until tomorrow —time to find out if this works. A bit of messing about with my page’s footer to add a button with an onClick handler pointed to toggleTheme() and…success!I’ve got a minor bug to squash — for some reason, the button doesn’t change the theme the first time it’s clicked — and some refactoring to do, but I’m happy with the results so far and dinner calls. Not ready for deployment yet, but the code is committed and pushed to Github, check it out here!Update!After a good night’s sleep and a few minutes of refactoring, I’m much happier with my work on this feature (bonus! the bug I mentioned above was fixed in the process). My lifecycle methods now looks like this:The setTheme() function is called on initial render, and I use componentDidUpdate() to to check if currentTheme changed at every state change. If so, setTheme() is called to push the currently selected theme’s colors to the DOM. With setTheme() being called when necessary from the component’s lifecycle methods, I was able to refactor toggleTheme(), removing the callback from its calls to setState().Cleaner, clearer, and in line with the React way of doing things, the basic version of this feature is complete…now to come up with some more color palettes. My plan for this feature is for it to eventually select a random theme on page load, and implement a theme selector component instead of just a single clickable icon to switch themes….back to work.

🏷️ javascript 🏷️ css 🏷️ react
[Technology] 🌎 https://medium.com/@krandles/adding-dynamic-themes-to-a-react-app-using-css-variables-57957e39f0bf?source=rss-d451d084d34a------2 [🧠] [v2] article_embedding_description: {:llm_project_id=>"Unavailable", :llm_dimensions=>nil, :article_size=>5673, :llm_embeddings_model_name=>"textembedding-gecko"}
[🧠] [v1/3] title_embedding_description: {:ricc_notes=>"[embed-v3] Fixed on 9oct24. Only seems incompatible at first glance with embed v1.", :llm_project_id=>"unavailable possibly not using Vertex", :llm_dimensions=>nil, :article_size=>5673, :poly_field=>"title", :llm_embeddings_model_name=>"textembedding-gecko"}
[🧠] [v1/3] summary_embedding_description:
[🧠] As per bug https://github.com/palladius/gemini-news-crawler/issues/4 we can state this article belongs to titile/summary version: v3 (very few articles updated on 9oct24)

🗿article.to_s 

------------------------------
Title: Adding Dynamic Themes to a React App Using CSS Variables
[content]
I’ve been working on my portfolio website this weekend, and finally implemented a feature I’ve been thinking about for a few weeks — multiple color themes! Inspired by a blog post I read recently (and encouraged by the fact that, as much as I like the color palette above, I’ve spent quite a few hours looking at it), adding themes seemed like a good way to get some practice using Javascript to manipulate CSS properties and add a little bit of flash to what is, for now, one of the best showcases of my skills.First things first, I updated my app’s CSS, replacing all of my color properties with CSS variables which I defined (for now) in a “body” selector.With my colors all now nicely defined in one place, instead of 20 or 30 different places spread throughout my CSS, it was time to decide just how to implement this new feature. My initial thought was that I’d use React refs, grabbing the top level element of my App with a ref and setting style properties on it, but since I’m looking to set properties/variables that will apply document-wide, the solution turned out to be even simpler than that — document.body.Document.body returns the <body> node of the current document, allowing us to manipulate it with Javascript, giving us access to the style.setProperty() method, which takes two arguments — the name of the property to set, and the value to which we want to set it. To test this out, I added a componentDidMount() method to my page’s top-level component.…and, voila…Upon loading the page, the CSS variable setting the background color is changed to black, and I was pleasantly surprised to see it doesn’t look bad…needs work, but I like the combo of black with that shade of green.With a method for manipulating my CSS variables determined, I set about making my app able to change them with the click of a button. First, adding a few key/value pairs to my state (the theme colors will eventually be defined in another file, since they don’t really belong in the state, but this works for the moment) — the currently selected theme’s name, and the variables for my first two themes.Next, I wrote a function that iterates over the object that corresponds to the currently selected theme, and sets the CSS variables to their intended values.And another, that toggles the state back and forth between my two themes, depending on which is currently selected, and calls setTheme() to apply the newly changed theme.This isn’t really the ideal way to go about it (calling setTheme should be done in ComponentDidUpdate()), but by this point I’ve been coding all day long and that can wait until tomorrow —time to find out if this works. A bit of messing about with my page’s footer to add a button with an onClick handler pointed to toggleTheme() and…success!I’ve got a minor bug to squash — for some reason, the button doesn’t change the theme the first time it’s clicked — and some refactoring to do, but I’m happy with the results so far and dinner calls. Not ready for deployment yet, but the code is committed and pushed to Github, check it out here!Update!After a good night’s sleep and a few minutes of refactoring, I’m much happier with my work on this feature (bonus! the bug I mentioned above was fixed in the process). My lifecycle methods now looks like this:The setTheme() function is called on initial render, and I use componentDidUpdate() to to check if currentTheme changed at every state change. If so, setTheme() is called to push the currently selected theme’s colors to the DOM. With setTheme() being called when necessary from the component’s lifecycle methods, I was able to refactor toggleTheme(), removing the callback from its calls to setState().Cleaner, clearer, and in line with the React way of doing things, the basic version of this feature is complete…now to come up with some more color palettes. My plan for this feature is for it to eventually select a random theme on page load, and implement a theme selector component instead of just a single clickable icon to switch themes….back to work.
[/content]

Author: Kevin Randles
PublishedDate: 2018-07-16
Category: Technology
NewsPaper: Kevin Randles on Medium
Tags: javascript, css, react
{"id"=>4226,
"title"=>"Adding Dynamic Themes to a React App Using CSS Variables",
"summary"=>nil,
"content"=>"
\"\"

I’ve been working on my portfolio website this weekend, and finally implemented a feature I’ve been thinking about for a few weeks — multiple color themes! Inspired by a blog post I read recently (and encouraged by the fact that, as much as I like the color palette above, I’ve spent quite a few hours looking at it), adding themes seemed like a good way to get some practice using Javascript to manipulate CSS properties and add a little bit of flash to what is, for now, one of the best showcases of my skills.

First things first, I updated my app’s CSS, replacing all of my color properties with CSS variables which I defined (for now) in a “body” selector.

\"\"

With my colors all now nicely defined in one place, instead of 20 or 30 different places spread throughout my CSS, it was time to decide just how to implement this new feature. My initial thought was that I’d use React refs, grabbing the top level element of my App with a ref and setting style properties on it, but since I’m looking to set properties/variables that will apply document-wide, the solution turned out to be even simpler than that — document.body.

Document.body returns the <body> node of the current document, allowing us to manipulate it with Javascript, giving us access to the style.setProperty() method, which takes two arguments — the name of the property to set, and the value to which we want to set it. To test this out, I added a componentDidMount() method to my page’s top-level component.

\"\"

…and, voila…

\"\"

Upon loading the page, the CSS variable setting the background color is changed to black, and I was pleasantly surprised to see it doesn’t look bad…needs work, but I like the combo of black with that shade of green.

With a method for manipulating my CSS variables determined, I set about making my app able to change them with the click of a button. First, adding a few key/value pairs to my state (the theme colors will eventually be defined in another file, since they don’t really belong in the state, but this works for the moment) — the currently selected theme’s name, and the variables for my first two themes.

\"\"

Next, I wrote a function that iterates over the object that corresponds to the currently selected theme, and sets the CSS variables to their intended values.

\"\"

And another, that toggles the state back and forth between my two themes, depending on which is currently selected, and calls setTheme() to apply the newly changed theme.

\"\"

This isn’t really the ideal way to go about it (calling setTheme should be done in ComponentDidUpdate()), but by this point I’ve been coding all day long and that can wait until tomorrow —time to find out if this works. A bit of messing about with my page’s footer to add a button with an onClick handler pointed to toggleTheme() and…success!

I’ve got a minor bug to squash — for some reason, the button doesn’t change the theme the first time it’s clicked — and some refactoring to do, but I’m happy with the results so far and dinner calls. Not ready for deployment yet, but the code is committed and pushed to Github, check it out here!

Update!

After a good night’s sleep and a few minutes of refactoring, I’m much happier with my work on this feature (bonus! the bug I mentioned above was fixed in the process). My lifecycle methods now looks like this:

\"\"

The setTheme() function is called on initial render, and I use componentDidUpdate() to to check if currentTheme changed at every state change. If so, setTheme() is called to push the currently selected theme’s colors to the DOM. With setTheme() being called when necessary from the component’s lifecycle methods, I was able to refactor toggleTheme(), removing the callback from its calls to setState().

\"\"

Cleaner, clearer, and in line with the React way of doing things, the basic version of this feature is complete…now to come up with some more color palettes. My plan for this feature is for it to eventually select a random theme on page load, and implement a theme selector component instead of just a single clickable icon to switch themes….back to work.

\"\"",
"author"=>"Kevin Randles",
"link"=>"https://medium.com/@krandles/adding-dynamic-themes-to-a-react-app-using-css-variables-57957e39f0bf?source=rss-d451d084d34a------2",
"published_date"=>Mon, 16 Jul 2018 01:31:38.000000000 UTC +00:00,
"image_url"=>nil,
"feed_url"=>"https://medium.com/@krandles/adding-dynamic-themes-to-a-react-app-using-css-variables-57957e39f0bf?source=rss-d451d084d34a------2",
"language"=>nil,
"active"=>true,
"ricc_source"=>"feedjira::v1",
"created_at"=>Mon, 01 Apr 2024 20:13:35.220507000 UTC +00:00,
"updated_at"=>Mon, 21 Oct 2024 18:02:59.707265000 UTC +00:00,
"newspaper"=>"Kevin Randles on Medium",
"macro_region"=>"Technology"}
Edit this article
Back to articles