add dark theme support and some basic styles

2025-12-16 12:31:10 +00:00 · 2022-06-21 12:10:49 +02:00
parent 2f0c8e8bc8
commit e1642e5f26
5 changed files with 158 additions and 94 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="1">
   <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,8 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -11,3 +11,57 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
 }
+
+[data-theme='1']{
+  --primary: #0066CC;
+  --primary-content: #ffffff;
+  --secondary: #f000b8,
+  --secondary-content: #ffffff;
+  --accent: #37cdbe;
+  --accent-content: #163835;
+  --neutral: #3d4451;
+  --neutral-content: #ffffff;
+  --base-100: #ffffff;
+  --base-200: #F2F2F2;
+  --base-300: #E5E6E6;
+  --base-content: #1f2937;
+}
+
+[data-theme='2'] {
+  --primary: #661AE6;
+  --primary-content: #ffffff;
+  --secondary: #D926AA;
+  --secondary-content: #ffffff;
+  --accent: #1FB2A5;
+  --accent-content: #ffffff;
+  --neutral: #191D24;
+  --neutral-focus: #111318;
+  --neutral-content: #A6ADBB;
+  --base-100: #2A303C;
+  --base-200: #242933;
+  --base-300: #20252E;
+  --base-content: #A6ADBB;
+}
+[data-theme='3'] {
+  --primary : #ef9995;
+  --primary-content: #282425;
+  --secondary : #a4cbb4;
+  --secondary-content: #282425;
+  --accent : #ebdc99;
+  --accent-content: #282425;
+  --neutral : #7d7259;
+  --neutral-content: #e4d8b4;
+  --base-100: #e4d8b4;
+  --base-200: #d2c59d;
+  --base-300: #c6b386;
+  --base-content: #282425;
+  --info: #2563eb;
+  --success: #16a34a;
+  --warning: #d97706;
+  --error: #dc2626;
+
+}
+html {
+   background-color: var(--base-100);
+   color: var(--base-content);
+}
--- a/src/s1-main/App.tsx
+++ b/src/s1-main/App.tsx
@@ -5,10 +5,16 @@ import HW1 from '../s2-homeworks/hw01/HW1'
 // import HW3 from '../s2-homeworks/hw03/HW3'
 // import HW4 from '../s2-homeworks/hw04/HW4'
 import HW5 from '../s2-homeworks/hw05/HW5'
+import { useSelector } from 'react-redux'
+import { useEffect } from 'react'

 const App = () => {
+   const themeId = useSelector((state: any) => state.theme.themeId)
+   useEffect(() => {
+      document.documentElement.dataset.theme = themeId
+   }, [themeId])
   return (
-        <div className={s.App}>
+      <div className={s.App} data-theme={themeId}>
         <div>react homeworks:</div>

         {/*<HW1/>*/}
@@ -16,7 +22,7 @@ const App = () => {
         {/*<HW3/>*/}
         {/*<HW4/>*/}

-            <HW5/>
+         <HW5 />
      </div>
   )
 }
--- a/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
+++ b/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
@@ -1,38 +1,37 @@
 .select {
   width: 100px;
   padding: 5px;
-    padding-right: 30px;
-
   cursor: pointer;
   appearance: none;
-    background-color: #003300; /*---------------------------------------------------------------------------------------------------------------------------------------------------fill---------99ff99*/
-    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2399FF99%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
-    background-repeat: no-repeat, repeat;
-    background-position: right .7em top 50%, 0 0;
-    background-size: .65em auto, 100%;
-
-    border: 2px inset rgb(118, 118, 118);
-    color: #99ff99;
+   background-color: var(--primary);
+   background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%);
+   background-position: calc(100% - 20px) calc(1px + 50%),
+      calc(100% - 16px) calc(1px + 50%);
+   background-size: 4px 4px, 4px 4px;
+   background-repeat: no-repeat;
+   border-radius: 2px;
+   border: 2px solid var(--primary);
+   color: var(--primary-content);
 }

 .select:focus {
   outline: none;
-    border: #99ff99 solid 2px;
 }

 .option {
   /*padding: 30px;*/
-    color: #003300;
-    background: #99ff99;
+   color: var(--primary-content);
+   background: var(--primary);
 }

 .option:checked {
-    background: #003300;
-    color: #99ff99;
+   color: var(--secondary-content);
+   background: var(--primary);
 }

-.option:hover{
-    box-shadow: 0 0 10px 100px #FED20F inset;
-    transition: all .2s ease-in-out;
+.option:hover {
+   box-shadow: 0 0 10px 100px #fed20f inset;
+   transition: all 0.2s ease-in-out;
   background: red;
 }
--- a/src/s2-homeworks/hw12/HW12.tsx
+++ b/src/s2-homeworks/hw12/HW12.tsx
@@ -2,18 +2,18 @@ import React from 'react'
 import s from './HW12.module.css'
 import s2 from '../../s1-main/App.module.css'
 import SuperSelect from '../hw07/common/c5-SuperSelect/SuperSelect'
-import {useDispatch, useSelector} from 'react-redux'
-import {changeThemeId} from './bll/themeReducer'
+import { useDispatch, useSelector } from 'react-redux'
+import { changeThemeId } from './bll/themeReducer'

 const themes = [
-    {id: 1, value: 'dark'},
-    {id: 2, value: 'red'},
-    {id: 3, value: 'some'},
+   { id: 1, value: 'light' },
+   { id: 2, value: 'dark' },
+   { id: 3, value: 'retro' },
 ]

 const HW12 = () => {
   const themeId = useSelector((state: any) => state.theme.themeId)
-    const theme = themes.find(t => t.id === themeId)!.value
+   const theme = themes.find((t) => t.id === themeId)!.value

   const dispatch = useDispatch()
   const change = (id: number) => {
@@ -22,10 +22,15 @@ const HW12 = () => {

   return (
      <div id={'hw12'} className={s2.hw + ' ' + s[theme]}>
-            <hr/>
+         <hr />
         {/*можно убрать этот тег*/}

-            <div id={'hw12-text'} className={s2.hwTitle + ' ' + s[theme + '-text']}>homeworks 12</div>
+         <div
+            id={'hw12-text'}
+            className={s2.hwTitle + ' ' + s[theme + '-text']}
+         >
+            homeworks 12
+         </div>
         <SuperSelect
            id={'hw12-select-theme'}
            value={themeId}
@@ -33,9 +38,9 @@ const HW12 = () => {
            onChangeOption={change}
         />

-            <hr/>
+         <hr />
         {/*можно убрать этот тег*/}
-            <hr/>
+         <hr />
         {/*можно убрать этот тег*/}
      </div>
   )