Create a light and dark theme

[Torvec]

• [ ] Make a toggle switch that can switch between light and dark themes manually
• [ ] Check for system preferences first and set the theme accordingly IF a theme selection hasn't been saved in local storage
• Light theme will be blue/sky, and slate
• Dark theme will be orange/amber, and stone

[Torvec]

DARK THEME

App

• Background: stone-900

UI Components

Section Header

• Border = orange-700
• Text = orange-500
• Text = Gradient (stone-200 -> stone-600)

Header

• Border - stone-800

Footer

• Border = stone-800
• Background = Gradient (stone-900 -> stone-950)
• Text = stone-400

Drop Down Menu

• Border = stone-800
• Background = stone-950
• Text = orange-500
• Background :hover = orange-500
• Text :hover = stone-200

Action Header

• Text = Gradient(stone-200 -> stone-600)

Action Button

• Primary
  • Background = Gradient(orange-500 -> orange-700)
  • Background :hover = Gradient(Orange-700 -> orange-500)
  • Text = orange-100
  • Text :hover = orange-50
  • Border = orange-400
  • Border :hover = orange-300
• Secondary
  • Background = Gradient(stone-300 -> stone-500)
  • Background :hover = Gradient(stone-500 -> stone-300)
  • Text = stone-800
  • Text :hover = stone-50
  • Border = stone-300
  • Border :hover = stone-200
• Outline
  • Text = stone-200
  • Text :hover = orange-500
  • Border = stone-700
  • Border :hover = orange-500

Sections

Resume

• ResumeItemList
  • Background = Gradient(stone-800 -> stone-950)
• ResumeItem
  • Text = stone-400
  • Background = Rad Gradient(stone-900 -> stone-950)
  • Background = Rad Gradient(stone-900 -> stone-900 -> stone-950)
  • Text = stone-300
• Download
  • Border = stone-800
  • Text = stone-400

Projects

• ProjectCard
  • Border = stone-800
  • Background = Gradient(stone-950 -> stone-800)
• InfoContainer
  • Text = stone-200
  • Text = stone-400
• TechStackItem
  • Border = stone-800
  • Background = Gradient(stone-950 -> transparent)
• ImageContainer
  • Background Shadow = black
  • Border = stone-800
• MoreProjects
  • Border = stone-800

Hero

• Border = stone-800
• HeroHeader
  • Text = Gradient (stone-200 -> stone-600)
  • Text = Gradient (orange-500 -> orange-700)
  • Text = Gradient (orange-500 -> orange-700)
  • Text = stone-400
• RadarScanner
  • Background = Con Gradient (orange-950 -> orange-400 -> orange-600)
  • Background = Rad Gradient (Transparent -> stone-950)

Contact Me

• AvailabilityList
  • Border = stone-800
  • Background = Gradient (stone-900 -> Transparent)
  • Text = stone-300
• AvailabilityItem
  • Border = stone-800
  • Background = Gradient (stone-800 -> stone-900)
  • Text = stone-400
  • Text = orange-500
• DirectContact
  • Text = stone-400
  • Anchor Text = orange-500
  • Anchor Text :hover = orange-600

About Me

• Border = stone-800
• Background = Rad Gradient (stone-800 -> stone-950)
• IntroContent
  • Text = stone-300
  • Text = stone-400
  • Text = stone-400
• IntroProfilePic
  • Background Shadow: black

[Torvec]

LIGHT THEME (WIP)

App

• Background: slate-100

UI Components

Section Header

• Border = blue-700
• Text = blue-500
• Text = Gradient (slate-200 -> slate-600)

Header

• Border - slate-800

Footer

• Border = slate-800
• Background = Gradient (slate-100 -> slate-50)
• Text = slate-500

Drop Down Menu

• Border = slate-800
• Background = slate-50
• Text = blue-500
• Background :hover = blue-500
• Text :hover = slate-200

Action Header

• Text = Gradient(slate-200 -> slate-600)

Action Button

• Primary
  • Background = Gradient(blue-500 -> blue-700)
  • Background :hover = Gradient(Blue-700 -> blue-500)
  • Text = blue-100
  • Text :hover = blue-50
  • Border = blue-400
  • Border :hover = blue-300
• Secondary
  • Background = Gradient(slate-300 -> slate-500)
  • Background :hover = Gradient(slate-500 -> slate-300)
  • Text = slate-800
  • Text :hover = slate-50
  • Border = slate-300
  • Border :hover = slate-200
• Outline
  • Text = slate-500
  • Text :hover = blue-500
  • Border = slate-800
  • Border :hover = blue-500

Sections

Resume

• ResumeItemList
  • Background = Gradient(slate-800 -> slate-950)
• ResumeItem
  • Text = slate-500
  • Background = Rad Gradient(slate-900 -> slate-950)
  • Background = Rad Gradient(slate-900 -> slate-900 -> slate-950)
  • Text = slate-400
• Download
  • Border = slate-800
  • Text = slate-500

Projects

• ProjectCard
  • Border = slate-800
  • Background = Gradient(slate-950 -> slate-800)
• InfoContainer
  • Text = slate-200
  • Text = slate-400
• TechStackItem
  • Border = slate-800
  • Background = Gradient(slate-950 -> transparent)
• ImageContainer
  • Background Shadow = black
  • Border = slate-800
• MoreProjects
  • Border = slate-800

Hero

• Border = slate-800
• HeroHeader
  • Text = Gradient (slate-200 -> slate-600)
  • Text = Gradient (blue-500 -> blue-700)
  • Text = Gradient (blue-500 -> blue-700)
  • Text = slate-400
• RadarScanner
  • Background = Con Gradient (blue-950 -> blue-400 -> blue-600)
  • Background = Rad Gradient (Transparent -> slate-950)

Contact Me

• AvailabilityList
  • Border = slate-800
  • Background = Gradient (slate-900 -> Transparent)
  • Text = slate-300
• AvailabilityItem
  • Border = slate-800
  • Background = Gradient (slate-800 -> slate-900)
  • Text = slate-400
  • Text = blue-500
• DirectContact
  • Text = slate-400
  • Anchor Text = blue-500
  • Anchor Text :hover = blue-600

About Me

• Border = slate-800
• Background = Rad Gradient (slate-800 -> slate-950)
• IntroContent
  • Text = slate-300
  • Text = slate-400
  • Text = slate-400
• IntroProfilePic
  • Background Shadow: black