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,21 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+<html lang="en" data-theme="1">
+   <head>
+      <meta charset="utf-8" />
+      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="theme-color" content="#000000" />
+      <meta
+         name="description"
+         content="Web site created using create-react-app"
+      />
+      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+      <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+      <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,12 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+      <title>React App</title>
+   </head>
+   <body>
+      <noscript>You need to enable JavaScript to run this app.</noscript>
+      <div id="root"></div>
+      <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

@@ -39,5 +39,5 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
-  </body>
+   </body>
 </html>
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,67 @@
 body {
-  margin: 0;
-  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;
+   margin: 0;
+   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;
 }

 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+   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,20 +5,26 @@ 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 = () => {
-    return (
-        <div className={s.App}>
-            <div>react homeworks:</div>
+   const themeId = useSelector((state: any) => state.theme.themeId)
+   useEffect(() => {
+      document.documentElement.dataset.theme = themeId
+   }, [themeId])
+   return (
+      <div className={s.App} data-theme={themeId}>
+         <div>react homeworks:</div>

-            {/*<HW1/>*/}
-            {/*<HW2/>*/}
-            {/*<HW3/>*/}
-            {/*<HW4/>*/}
+         {/*<HW1/>*/}
+         {/*<HW2/>*/}
+         {/*<HW3/>*/}
+         {/*<HW4/>*/}

-            <HW5/>
-        </div>
-    )
+         <HW5 />
+      </div>
+   )
 }

 export default App
--- 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;
+   width: 100px;
+   padding: 5px;
+   cursor: pointer;
+   appearance: none;
+   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;
+   outline: none;
 }

 .option {
-    /*padding: 30px;*/
-    color: #003300;
-    background: #99ff99;
+   /*padding: 30px;*/
+   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;
-    background: red;
+.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,43 +2,48 @@ 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 themeId = useSelector((state: any) => state.theme.themeId)
+   const theme = themes.find((t) => t.id === themeId)!.value

-    const dispatch = useDispatch()
-    const change = (id: number) => {
-        dispatch(changeThemeId(id))
-    }
+   const dispatch = useDispatch()
+   const change = (id: number) => {
+      dispatch(changeThemeId(id))
+   }

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

-            <div id={'hw12-text'} className={s2.hwTitle + ' ' + s[theme + '-text']}>homeworks 12</div>
-            <SuperSelect
-                id={'hw12-select-theme'}
-                value={themeId}
-                options={themes}
-                onChangeOption={change}
-            />
+         <div
+            id={'hw12-text'}
+            className={s2.hwTitle + ' ' + s[theme + '-text']}
+         >
+            homeworks 12
+         </div>
+         <SuperSelect
+            id={'hw12-select-theme'}
+            value={themeId}
+            options={themes}
+            onChangeOption={change}
+         />

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

 export default HW12