React Calculator

Community feedback

• 

  Graiess_Youssef•410

  @graiess073029Posted over 1 year ago

  Hello @saturnextreme.

  You did well trying completing the challenge

  I understood that you have a problem changing themes, right ?

  There an easy solution that you can follow (I worked with it too):

  -You're using ReactJs. So, you can create a state named theme and set theme variable as a second class in the components for exemple : <button id={'7'} className={`button ${theme}`}>7</button>

  -In the Css side, you will create css rules for the main layout of the button using the button class, and you will create other css rules for color and bg for each theme

  I think it was helpful. Happy Hacking !

  Marked as helpful

  0
• 

  SaturnExtreme•120

  @saturnextremePosted over 1 year ago

  Can anyone tell me how can I change the theme in my calculator code.In my code I wrote every style in sass variables and was thinking about changing sass variables through react but it wasn't working.

  sass

  $bg-color: rgb(0, 41, 65);
  $simple-btn-color: hsla(0, 0, 90, 100%);
  $simple-btn-color-hover: hsla(0, 0, 90, 80%);
  $eq-btn-color: hsla(0, 70, 64, 100%);
  $er-btn-color: hsla(205, 42, 49, 100%);
  $er-btn-color-hover: hsla(205, 42, 49, 80%);
  $sc-color: rgb(1, 7, 54);
  $txt-color: hsl(41, 100%, 44%);
  

  Link to Repository.

  0

  ---

  

  Nicolas•120

  @NicolasAgromartinPosted over 1 year ago

  @saturnextreme I used react conext hook to change between themes. Check my solution :

  https://www.frontendmentor.io/solutions/themed-calculator-app-with-react-and-css-Uv1aXHdKCX

  Marked as helpful

  0

  

  Oleg•350

  @o-gtkvPosted over 1 year ago

  @saturnextreme If you want to redefine variables, you should use regular css variables instead.

  Marked as helpful

  0